twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-03 17:53:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

8976 modify mobile page header (#9020)

Browse Source 
Closes #8976
This commit is contained in:
Raphaël Bosi 2024-12-11 15:06:09 +01:00 committed by GitHub
parent 6067852c1c
commit ad04040ea6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
View File

@ -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 />
)}

8
packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
View File

@ -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}
/>

8
packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
View File

@ -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"
/>

4
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View File

@ -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?.()}

47
packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
View File

@ -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" />
</>
);