houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create old fields design widget (#15645)

Browse Source 
In this PR:

- Pass `layoutMode` and `tabId` via PageLayoutContentContext provider
- Getting `pageLayoutType` from the current page layout
- Getting isInPinnedTab through `useIsInPinnedTab` hook

## Before

<img width="3456" height="2160" alt="CleanShot 2025-11-06 at 14 22
44@2x"
src="https://github.com/user-attachments/assets/763bb413-5739-45ef-85ed-82a72415886f"
/>

## After

<img width="3456" height="2162" alt="CleanShot 2025-11-06 at 14 20
38@2x"
src="https://github.com/user-attachments/assets/eee6cccd-9d36-426e-a22f-400e8f7f9413"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Baptiste Devessier
2025-11-06 18:16:42 +01:00
committed by GitHub
parent 33c08ad437
commit bfe1f47065
20 changed files with 328 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/components/PageLayoutCanvasViewer.tsx
+2 -6
View File
@@ -1,7 +1,7 @@
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { PageLayoutType, type PageLayoutWidget } from '~/generated/graphql';
import { type PageLayoutWidget } from '~/generated/graphql';
const StyledCanvasContainer = styled.div`
display: grid;
@@ -23,11 +23,7 @@ export const PageLayoutCanvasViewer = ({
return (
<StyledCanvasContainer>
<WidgetRenderer
widget={widget}
pageLayoutType={PageLayoutType.RECORD_PAGE}
layoutMode="canvas"
/>
<WidgetRenderer widget={widget} />
</StyledCanvasContainer>
);
};
packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
+14 -12
View File
@@ -2,30 +2,29 @@ import { PageLayoutCanvasViewer } from '@/page-layout/components/PageLayoutCanva
import { PageLayoutGridLayout } from '@/page-layout/components/PageLayoutGridLayout';
import { PageLayoutVerticalListEditor } from '@/page-layout/components/PageLayoutVerticalListEditor';
import { PageLayoutVerticalListViewer } from '@/page-layout/components/PageLayoutVerticalListViewer';
import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
import { FeatureFlagKey } from '~/generated/graphql';
const StyledContainer = styled.div`
const StyledContainer = styled.div<{ isInPinnedTab: boolean }>`
background: ${({ theme }) => theme.background.primary};
box-sizing: border-box;
flex: 1;
min-height: 100%;
position: relative;
padding: ${({ theme }) => theme.spacing(2)};
width: 100%;
padding: ${({ theme, isInPinnedTab }) =>
isInPinnedTab ? 0 : theme.spacing(2)};
`;
type PageLayoutContentProps = {
tabId: string;
};
export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
export const PageLayoutContent = () => {
const isRecordPageEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_ENABLED,
);
@@ -35,18 +34,21 @@ export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
);
const { currentPageLayout } = useCurrentPageLayout();
const { tabId } = usePageLayoutContentContext();
const { reorderWidgets } = useReorderPageLayoutWidgets(tabId);
const activeTab = currentPageLayout?.tabs.find((tab) => tab.id === tabId);
const { layoutMode } = usePageLayoutContentContext();
const { isInPinnedTab } = useIsInPinnedTab();
if (!isDefined(currentPageLayout) || !isDefined(activeTab)) {
return null;
}
const isCanvasLayout =
isRecordPageEnabled && activeTab.layoutMode === 'canvas';
const isVerticalList =
isRecordPageEnabled && activeTab.layoutMode === 'vertical-list';
const isCanvasLayout = isRecordPageEnabled && layoutMode === 'canvas';
const isVerticalList = isRecordPageEnabled && layoutMode === 'vertical-list';
if (isCanvasLayout) {
return <PageLayoutCanvasViewer widgets={activeTab.widgets} />;
@@ -54,7 +56,7 @@ export const PageLayoutContent = ({ tabId }: PageLayoutContentProps) => {
if (isVerticalList) {
return (
<StyledContainer>
<StyledContainer isInPinnedTab={isInPinnedTab}>
{isPageLayoutInEditMode ? (
<PageLayoutVerticalListEditor
widgets={activeTab.widgets}
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+1 -5
View File
@@ -184,11 +184,7 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => {
{item.type === 'placeholder' ? (
<WidgetPlaceholder />
) : (
<WidgetRenderer
widget={item.widget}
pageLayoutType={currentPageLayout.type}
layoutMode="grid"
/>
<WidgetRenderer widget={item.widget} />
)}
</div>
))}
packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx
+19 -1
View File
@@ -1,6 +1,8 @@
import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
@@ -21,6 +23,15 @@ export const PageLayoutLeftPanel = ({
return null;
}
const pinnedTab = currentPageLayout.tabs.find(
(tab) => tab.id === pinnedLeftTabId,
);
const layoutMode = getTabLayoutMode({
tab: pinnedTab,
pageLayoutType: currentPageLayout.type,
});
return (
<ShowPageLeftContainer>
<SummaryCard
@@ -29,7 +40,14 @@ export const PageLayoutLeftPanel = ({
isInRightDrawer={isInRightDrawer}
/>
<PageLayoutContent tabId={pinnedLeftTabId} />
<PageLayoutContentProvider
value={{
tabId: pinnedLeftTabId,
layoutMode,
}}
>
<PageLayoutContent />
</PageLayoutContentProvider>
</ShowPageLeftContainer>
);
};
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+4 -4
View File
@@ -1,4 +1,5 @@
import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { PageLayoutLeftPanel } from '@/page-layout/components/PageLayoutLeftPanel';
import { PageLayoutTabHeader } from '@/page-layout/components/PageLayoutTabHeader';
import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
@@ -6,6 +7,7 @@ import { PageLayoutTabListEffect } from '@/page-layout/components/PageLayoutTabL
import { useCreatePageLayoutTab } from '@/page-layout/hooks/useCreatePageLayoutTab';
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
import { useReorderPageLayoutTabs } from '@/page-layout/hooks/useReorderPageLayoutTabs';
import { PageLayoutMainContent } from '@/page-layout/PageLayoutMainContent';
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
@@ -18,8 +20,6 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu';
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
@@ -124,7 +124,7 @@ export const PageLayoutRendererContent = () => {
defaultEnableXScroll={false}
>
{isDefined(activeTabId) && (
<PageLayoutContent tabId={activeTabId} />
<PageLayoutMainContent tabId={activeTabId} />
)}
</StyledScrollWrapper>
</StyledTabsAndDashboardContainer>
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx
+2 -6
View File
@@ -9,7 +9,7 @@ import {
type DropResult,
} from '@hello-pangea/dnd';
import { useId } from 'react';
import { PageLayoutType, type PageLayoutWidget } from '~/generated/graphql';
import { type PageLayoutWidget } from '~/generated/graphql';
const StyledVerticalListContainer = styled.div`
display: flex;
@@ -67,11 +67,7 @@ export const PageLayoutVerticalListEditor = ({
>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<div {...provided.dragHandleProps}>
<WidgetRenderer
widget={widget}
pageLayoutType={PageLayoutType.RECORD_PAGE}
layoutMode="vertical-list"
/>
<WidgetRenderer widget={widget} />
</div>
</StyledDraggableWrapper>
)}
packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx
+2 -6
View File
@@ -1,6 +1,6 @@
import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
import styled from '@emotion/styled';
import { PageLayoutType, type PageLayoutWidget } from '~/generated/graphql';
import { type PageLayoutWidget } from '~/generated/graphql';
const StyledVerticalListContainer = styled.div`
display: flex;
@@ -19,11 +19,7 @@ export const PageLayoutVerticalListViewer = ({
<StyledVerticalListContainer>
{widgets.map((widget) => (
<div key={widget.id}>
<WidgetRenderer
widget={widget}
pageLayoutType={PageLayoutType.RECORD_PAGE}
layoutMode="vertical-list"
/>
<WidgetRenderer widget={widget} />
</div>
))}
</StyledVerticalListContainer>