admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve design of fields menu (#5729)

Browse Source 
Improve design of field options menu and redirect to the right object
edit page



<img width="215" alt="Screenshot 2024-06-04 at 12 15 43"
src="https://github.com/twentyhq/twenty/assets/6399865/a8da18a1-49d4-40e3-b2cd-3a1a384366b2">
This commit is contained in:
Félix Malfait
2024-06-04 12:16:47 +02:00
committed by GitHub
parent d964f656f9
commit 719cce1ea2
2 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
View File

@ -11,6 +11,7 @@ import {
IconTag, IconTag,
} from 'twenty-ui'; } from 'twenty-ui';
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId'; import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
import { import {
displayedExportProgress, displayedExportProgress,
@ -27,6 +28,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle'; import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection'; import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
@ -62,8 +64,16 @@ export const RecordIndexOptionsDropdownContent = ({
setCurrentMenu(option); setCurrentMenu(option);
}; };
const { objectNamePlural } = useObjectNamePluralFromSingular({
objectNameSingular: objectNameSingular,
});
const handleEditClick = () => { const handleEditClick = () => {
navigate(getSettingsPagePath(SettingsPath.Objects)); navigate(
getSettingsPagePath(SettingsPath.ObjectDetail, {
objectSlug: objectNamePlural,
}),
);
}; };
useScopedHotkeys( useScopedHotkeys(
@ -146,7 +156,6 @@ export const RecordIndexOptionsDropdownContent = ({
<DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}> <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetMenu}>
Fields Fields
</DropdownMenuHeader> </DropdownMenuHeader>
<DropdownMenuSeparator />
<ViewFieldsVisibilityDropdownSection <ViewFieldsVisibilityDropdownSection
title="Visible" title="Visible"
fields={visibleRecordFields} fields={visibleRecordFields}
@ -156,11 +165,13 @@ export const RecordIndexOptionsDropdownContent = ({
showSubheader={false} showSubheader={false}
/> />
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<MenuItem <DropdownMenuItemsContainer>
onClick={() => handleSelectMenu('hiddenFields')} <MenuItemNavigate
LeftIcon={IconEyeOff} onClick={() => handleSelectMenu('hiddenFields')}
text="Hidden Fields" LeftIcon={IconEyeOff}
/> text="Hidden Fields"
/>
</DropdownMenuItemsContainer>
</> </>
)} )}
{currentMenu === 'hiddenFields' && ( {currentMenu === 'hiddenFields' && (
@ -171,7 +182,6 @@ export const RecordIndexOptionsDropdownContent = ({
> >
Hidden Fields Hidden Fields
</DropdownMenuHeader> </DropdownMenuHeader>
<DropdownMenuSeparator />
{hiddenRecordFields.length > 0 && ( {hiddenRecordFields.length > 0 && (
<> <>
<ViewFieldsVisibilityDropdownSection <ViewFieldsVisibilityDropdownSection
@ -184,11 +194,13 @@ export const RecordIndexOptionsDropdownContent = ({
</> </>
)} )}
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<MenuItem <DropdownMenuItemsContainer>
onClick={handleEditClick} <MenuItem
LeftIcon={IconSettings} onClick={handleEditClick}
text="Edit Fields" LeftIcon={IconSettings}
/> text="Edit Fields"
/>
</DropdownMenuItemsContainer>
</> </>
)} )}

19
packages/twenty-front/src/modules/settings/utils/getSettingsPagePath.ts
View File

@ -1,4 +1,19 @@
import { SettingsPath } from '@/types/SettingsPath'; import { SettingsPath } from '@/types/SettingsPath';
import { isDefined } from '~/utils/isDefined';
export const getSettingsPagePath = <Path extends SettingsPath>(path: Path) => type PathParams = {
`/settings/${path}` as const; objectSlug?: string;
};
export const getSettingsPagePath = <Path extends SettingsPath>(
path: Path,
params?: PathParams,
) => {
let resultPath = `/settings/${path}`;
if (isDefined(params?.objectSlug)) {
resultPath = resultPath.replace(':objectSlug', params.objectSlug);
}
return resultPath;
};