diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent.tsx index 05063c2f7..9c9a2d0bc 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownContent.tsx @@ -1,22 +1,22 @@ import { ObjectOptionsDropdownFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent'; import { ObjectOptionsDropdownHiddenFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent'; import { ObjectOptionsDropdownHiddenRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenRecordGroupsContent'; +import { ObjectOptionsDropdownLayoutContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent'; +import { ObjectOptionsDropdownLayoutOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutOpenInContent'; import { ObjectOptionsDropdownMenuContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent'; import { ObjectOptionsDropdownRecordGroupFieldsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupFieldsContent'; import { ObjectOptionsDropdownRecordGroupsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent'; import { ObjectOptionsDropdownRecordGroupSortContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent'; -import { ObjectOptionsDropdownViewSettingsContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent'; -import { ObjectOptionsDropdownViewSettingsOpenInContent } from '@/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsOpenInContent'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; export const ObjectOptionsDropdownContent = () => { const { currentContentId } = useOptionsDropdown(); switch (currentContentId) { - case 'viewSettings': - return ; - case 'viewSettingsOpenIn': - return ; + case 'layout': + return ; + case 'layoutOpenIn': + return ; case 'fields': return ; case 'hiddenFields': diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx similarity index 94% rename from packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx rename to packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx index 41e4d4112..63f8450f4 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownViewSettingsContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx @@ -18,7 +18,7 @@ import { ViewType } from '@/views/types/ViewType'; import { useLingui } from '@lingui/react/macro'; import { useRecoilValue } from 'recoil'; -export const ObjectOptionsDropdownViewSettingsContent = () => { +export const ObjectOptionsDropdownLayoutContent = () => { const { t } = useLingui(); const { currentView } = useGetCurrentViewOnly(); @@ -42,11 +42,11 @@ export const ObjectOptionsDropdownViewSettingsContent = () => { return ( <> - {t`View settings`} + {t`Layout`} onContentChange('viewSettingsOpenIn')} + onClick={() => onContentChange('layoutOpenIn')} LeftIcon={ recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL ? IconLayoutSidebarRight @@ -60,6 +60,7 @@ export const ObjectOptionsDropdownViewSettingsContent = () => { } hasSubMenu /> + {viewType === ViewType.Kanban && ( { +export const ObjectOptionsDropdownLayoutOpenInContent = () => { const { onContentChange } = useOptionsDropdown(); const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState); const { currentView } = useGetCurrentViewOnly(); @@ -25,7 +25,7 @@ export const ObjectOptionsDropdownViewSettingsOpenInContent = () => { <> onContentChange('viewSettings')} + onClick={() => onContentChange('layout')} > {t`Open in`} diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx index e41e3e847..e1af431d2 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx @@ -1,11 +1,13 @@ import { Key } from 'ts-key-enum'; +import { capitalize, isDefined } from 'twenty-shared'; import { AppTooltip, IconCopy, - IconLayout, + IconLayoutKanban, IconLayoutList, IconList, - IconTag, + IconListDetails, + IconTable, IconTrash, MenuItem, useIcons, @@ -24,11 +26,11 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; +import { ViewType } from '@/views/types/ViewType'; import { useDeleteViewFromCurrentState } from '@/views/view-picker/hooks/useDeleteViewFromCurrentState'; import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState'; import { useTheme } from '@emotion/react'; import { useLingui } from '@lingui/react/macro'; -import { isDefined } from 'twenty-shared'; export const ObjectOptionsDropdownMenuContent = () => { const { t } = useLingui(); @@ -74,6 +76,7 @@ export const ObjectOptionsDropdownMenuContent = () => { deleteViewFromCurrentState(); closeDropdown(); }; + const theme = useTheme(); const { enqueueSnackBar } = useSnackBar(); @@ -85,9 +88,12 @@ export const ObjectOptionsDropdownMenuContent = () => { onContentChange('viewSettings')} - LeftIcon={IconLayout} - text={t`View settings`} + onClick={() => onContentChange('layout')} + LeftIcon={ + currentView?.type === ViewType.Table ? IconTable : IconLayoutKanban + } + text={t`Layout`} + contextualText={`${capitalize(currentView?.type ?? '')}`} hasSubMenu /> @@ -96,7 +102,7 @@ export const ObjectOptionsDropdownMenuContent = () => { onContentChange('fields')} - LeftIcon={IconTag} + LeftIcon={IconListDetails} text={t`Fields`} contextualText={`${visibleBoardFields.length} shown`} hasSubMenu diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx index 16dcf0964..bb647be79 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx @@ -123,7 +123,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({ export const Default = createStory(null); -export const ViewSettings = createStory('viewSettings'); +export const Layout = createStory('layout'); export const Fields = createStory('fields'); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/types/ObjectOptionsContentId.ts b/packages/twenty-front/src/modules/object-record/object-options-dropdown/types/ObjectOptionsContentId.ts index 8e91caa2c..92ecb6fd9 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/types/ObjectOptionsContentId.ts +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/types/ObjectOptionsContentId.ts @@ -1,6 +1,6 @@ export type ObjectOptionsContentId = - | 'viewSettings' - | 'viewSettingsOpenIn' + | 'layout' + | 'layoutOpenIn' | 'fields' | 'hiddenFields' | 'recordGroups'