8976 modify mobile page header (#9020)

Closes #8976
twentyhq · Dec 11, 2024 · ad04040 · ad04040
1 parent 6067852
commit ad04040
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 29 deletions.
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
@@ -10,6 +10,7 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 export const RecordIndexActionMenu = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
@@ -22,6 +23,8 @@ export const RecordIndexActionMenu = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {contextStoreCurrentObjectMetadataId && (
@@ -32,7 +35,7 @@ export const RecordIndexActionMenu = () => {
           }}
         >
           {isPageHeaderV2Enabled ? (
-            <RecordIndexActionMenuButtons />
+            <>{!isMobile && <RecordIndexActionMenuButtons />}</>
           ) : (
             <RecordIndexActionMenuBar />
           )}

diff --git a/...ty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/...ty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -1,4 +1,4 @@
-import { Button, IconButton, IconDotsVertical } from 'twenty-ui';
+import { Button, IconButton, IconDotsVertical, useIsMobile } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@@ -10,16 +10,18 @@ export const PageHeaderOpenCommandMenuButton = () => {
     'IS_PAGE_HEADER_V2_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconDotsVertical}
           dataTestId="page-header-open-command-menu-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          shortcut="⌘K"
+          shortcut={isMobile ? '' : '⌘K'}
           ariaLabel="Open command menu"
           onClick={openCommandMenu}
         />

diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
@@ -1,5 +1,5 @@
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { Button, IconButton, IconPlus } from 'twenty-ui';
+import { Button, IconButton, IconPlus, useIsMobile } from 'twenty-ui';
 
 type PageAddButtonProps = {
   onClick?: () => void;
@@ -9,16 +9,18 @@ export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
   const isPageHeaderV2Enabled = useIsFeatureEnabled(
     'IS_PAGE_HEADER_V2_ENABLED',
   );
+  const isMobile = useIsMobile();
+
   return (
     <>
       {isPageHeaderV2Enabled ? (
         <Button
           Icon={IconPlus}
           dataTestId="add-button"
-          size="small"
+          size={isMobile ? 'medium' : 'small'}
           variant="secondary"
           accent="default"
-          title="New record"
+          title={isMobile ? '' : 'New record'}
           onClick={onClick}
           ariaLabel="New record"
         />

diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@@ -170,14 +170,14 @@ export const PageHeader = ({
           <>
             <IconButton
               Icon={IconChevronUp}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasPreviousRecord}
               onClick={() => navigateToPreviousRecord?.()}
             />
             <IconButton
               Icon={IconChevronDown}
-              size="small"
+              size={isMobile ? 'medium' : 'small'}
               variant="secondary"
               disabled={!hasNextRecord}
               onClick={() => navigateToNextRecord?.()}

diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
@@ -6,6 +6,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 type RecordShowPageBaseHeaderProps = {
   isFavorite: boolean;
@@ -26,29 +27,35 @@ export const RecordShowPageBaseHeader = ({
     'IS_FAVORITE_FOLDER_ENABLED',
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
-      {isFavoriteFolderEnabled ? (
-        <PageFavoriteFoldersDropdown
-          key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-          dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
-          isFavorite={isFavorite}
-          record={record}
-          objectNameSingular={objectNameSingular}
-        />
-      ) : (
-        <PageFavoriteButton
-          isFavorite={isFavorite}
-          onClick={handleFavoriteButtonClick}
-        />
+      {!isMobile && (
+        <>
+          {isFavoriteFolderEnabled ? (
+            <PageFavoriteFoldersDropdown
+              key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+              dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
+              isFavorite={isFavorite}
+              record={record}
+              objectNameSingular={objectNameSingular}
+            />
+          ) : (
+            <PageFavoriteButton
+              isFavorite={isFavorite}
+              onClick={handleFavoriteButtonClick}
+            />
+          )}
+          <ShowPageAddButton
+            key="add"
+            activityTargetObject={{
+              id: record?.id ?? '0',
+              targetObjectNameSingular: objectMetadataItem.nameSingular,
+            }}
+          />
+        </>
       )}
-      <ShowPageAddButton
-        key="add"
-        activityTargetObject={{
-          id: record?.id ?? '0',
-          targetObjectNameSingular: objectMetadataItem.nameSingular,
-        }}
-      />
       <PageHeaderOpenCommandMenuButton key="more" />
     </>
   );