Page layout conditional display (#15802)
- Allow widgets to be hidden based on device's type conditions: desktop or mobile - Create two widgets for rich text fields on tasks and notes. One widget is displayed below fields on mobile (and in the right drawer); the other is displayed on a separate tab on desktop - In read mode, hide tabs if they contain no visible widgets. If there is no tab left to display, display at least the first one with no widgets. - In edit mode, display all tabs and all widgets. ## Demo https://github.com/user-attachments/assets/65ef1261-3902-4432-a420-48983b763b2c Closes https://github.com/twentyhq/core-team-issues/issues/1811
This commit is contained in:
committed by
GitHub
parent
d0d90735cb
commit
e0d1f74648
@@ -2,6 +2,7 @@ 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 { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
|
||||
import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
|
||||
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
|
||||
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
|
||||
@@ -18,15 +19,12 @@ export const PageLayoutLeftPanel = ({
|
||||
const { currentPageLayout } = useCurrentPageLayout();
|
||||
const targetRecordIdentifier = useTargetRecord();
|
||||
const { isInRightDrawer } = useLayoutRenderingContext();
|
||||
const pinnedTab = usePageLayoutTabWithVisibleWidgetsOrThrow(pinnedLeftTabId);
|
||||
|
||||
if (currentPageLayout?.type !== PageLayoutType.RECORD_PAGE) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const pinnedTab = currentPageLayout.tabs.find(
|
||||
(tab) => tab.id === pinnedLeftTabId,
|
||||
);
|
||||
|
||||
const layoutMode = getTabLayoutMode({
|
||||
tab: pinnedTab,
|
||||
pageLayoutType: currentPageLayout.type,
|
||||
|
||||
Reference in New Issue
Block a user