admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
5 changed files with 43 additions and 29 deletions
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 { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useIsMobile } from 'twenty-ui';
export const RecordIndexActionMenu = () => { export const RecordIndexActionMenu = () => {
const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2( const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
@ -22,6 +23,8 @@ export const RecordIndexActionMenu = () => {
'IS_PAGE_HEADER_V2_ENABLED', 'IS_PAGE_HEADER_V2_ENABLED',
); );
const isMobile = useIsMobile();
return ( return (
<> <>
{contextStoreCurrentObjectMetadataId && ( {contextStoreCurrentObjectMetadataId && (
@ -32,7 +35,7 @@ export const RecordIndexActionMenu = () => {
}} }}
> >
{isPageHeaderV2Enabled ? ( {isPageHeaderV2Enabled ? (
<RecordIndexActionMenuButtons /> <>{!isMobile && <RecordIndexActionMenuButtons />}</>
) : ( ) : (
<RecordIndexActionMenuBar /> <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 { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@ -10,16 +10,18 @@ export const PageHeaderOpenCommandMenuButton = () => {
'IS_PAGE_HEADER_V2_ENABLED', 'IS_PAGE_HEADER_V2_ENABLED',
); );
const isMobile = useIsMobile();
return ( return (
<> <>
{isPageHeaderV2Enabled ? ( {isPageHeaderV2Enabled ? (
<Button <Button
Icon={IconDotsVertical} Icon={IconDotsVertical}
dataTestId="page-header-open-command-menu-button" dataTestId="page-header-open-command-menu-button"
size="small" size={isMobile ? 'medium' : 'small'}
variant="secondary" variant="secondary"
accent="default" accent="default"
shortcut="⌘K" shortcut={isMobile ? '' : '⌘K'}
ariaLabel="Open command menu" ariaLabel="Open command menu"
onClick={openCommandMenu} 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 { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Button, IconButton, IconPlus } from 'twenty-ui'; import { Button, IconButton, IconPlus, useIsMobile } from 'twenty-ui';
type PageAddButtonProps = { type PageAddButtonProps = {
onClick?: () => void; onClick?: () => void;
@ -9,16 +9,18 @@ export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
const isPageHeaderV2Enabled = useIsFeatureEnabled( const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED', 'IS_PAGE_HEADER_V2_ENABLED',
); );
const isMobile = useIsMobile();
return ( return (
<> <>
{isPageHeaderV2Enabled ? ( {isPageHeaderV2Enabled ? (
<Button <Button
Icon={IconPlus} Icon={IconPlus}
dataTestId="add-button" dataTestId="add-button"
size="small" size={isMobile ? 'medium' : 'small'}
variant="secondary" variant="secondary"
accent="default" accent="default"
title="New record" title={isMobile ? '' : 'New record'}
onClick={onClick} onClick={onClick}
ariaLabel="New record" 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 <IconButton
Icon={IconChevronUp} Icon={IconChevronUp}
size="small" size={isMobile ? 'medium' : 'small'}
variant="secondary" variant="secondary"
disabled={!hasPreviousRecord} disabled={!hasPreviousRecord}
onClick={() => navigateToPreviousRecord?.()} onClick={() => navigateToPreviousRecord?.()}
/> />
<IconButton <IconButton
Icon={IconChevronDown} Icon={IconChevronDown}
size="small" size={isMobile ? 'medium' : 'small'}
variant="secondary" variant="secondary"
disabled={!hasNextRecord} disabled={!hasNextRecord}
onClick={() => navigateToNextRecord?.()} 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 { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton'; import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useIsMobile } from 'twenty-ui';
type RecordShowPageBaseHeaderProps = { type RecordShowPageBaseHeaderProps = {
isFavorite: boolean; isFavorite: boolean;
@ -26,29 +27,35 @@ export const RecordShowPageBaseHeader = ({
'IS_FAVORITE_FOLDER_ENABLED', 'IS_FAVORITE_FOLDER_ENABLED',
); );
const isMobile = useIsMobile();
return ( return (
<> <>
{isFavoriteFolderEnabled ? ( {!isMobile && (
<PageFavoriteFoldersDropdown <>
key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID} {isFavoriteFolderEnabled ? (
dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID} <PageFavoriteFoldersDropdown
isFavorite={isFavorite} key={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
record={record} dropdownId={FAVORITE_FOLDER_PICKER_DROPDOWN_ID}
objectNameSingular={objectNameSingular} isFavorite={isFavorite}
/> record={record}
) : ( objectNameSingular={objectNameSingular}
<PageFavoriteButton />
isFavorite={isFavorite} ) : (
onClick={handleFavoriteButtonClick} <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" /> <PageHeaderOpenCommandMenuButton key="more" />
</> </>
); );