From eb60bcd5c85304094abda81ac4eb5e97e3fc704f Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Sat, 20 Apr 2024 14:49:58 +0300 Subject: [PATCH 1/9] changed dropdown width to 200px --- .../options/components/RecordIndexOptionsDropdown.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx index 4b1d32086319..25e53d8cc5b1 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdown.tsx @@ -20,6 +20,7 @@ export const RecordIndexOptionsDropdown = ({ } + dropdownMenuWidth={'200px'} dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} dropdownOffset={{ y: 8 }} dropdownComponents={ From 2351e72db92196dcdd2a86c833b706fb7449b594 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Sat, 20 Apr 2024 15:38:38 +0300 Subject: [PATCH 2/9] changed hide/show icon from +/- to eye/eye-off --- .../components/ViewFieldsVisibilityDropdownSection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index bf9fa79079cf..9f49184628ec 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -7,9 +7,9 @@ import { } from '@hello-pangea/dnd'; import { AppTooltip, + IconEye, + IconEyeOff, IconInfoCircle, - IconMinus, - IconPlus, useIcons, } from 'twenty-ui'; @@ -69,7 +69,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ field.isLabelIdentifier ? null : { - Icon: field.isVisible ? IconMinus : IconPlus, + Icon: field.isVisible ? IconEye : IconEyeOff, onClick: () => onVisibilityChange(field), }, ].filter(isDefined); From fd2f80ae2a87d4a2e90be27835f07e669fd74259 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Mon, 6 May 2024 12:39:36 +0300 Subject: [PATCH 3/9] added hidden fields menu --- .../RecordIndexOptionsDropdownContent.tsx | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 890c609c6051..c0b3f61f9f84 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -3,8 +3,10 @@ import { Key } from 'ts-key-enum'; import { IconBaselineDensitySmall, IconChevronLeft, + IconEyeOff, IconFileExport, IconFileImport, + IconSettings, IconTag, } from 'twenty-ui'; @@ -25,7 +27,7 @@ import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFiel import { useGetCurrentView } from '@/views/hooks/useGetCurrentView'; import { ViewType } from '@/views/types/ViewType'; -type RecordIndexOptionsMenu = 'fields'; +type RecordIndexOptionsMenu = 'fields' | 'hiddenFields'; type RecordIndexOptionsDropdownContentProps = { recordIndexId: string; @@ -139,20 +141,45 @@ export const RecordIndexOptionsDropdownContent = ({ isDraggable onDragEnd={handleReorderFields} onVisibilityChange={handleChangeFieldVisibility} + showSubheader={false} /> + + handleSelectMenu('hiddenFields')} + LeftIcon={IconEyeOff} + text="Hidden Fields" + /> + + )} + {currentMenu === 'hiddenFields' && ( + <> + setCurrentMenu('fields')} + > + Hidden Fields + + {hiddenRecordFields.length > 0 && ( <> - )} + + )} + {viewType === ViewType.Kanban && ( <> From 495c721dc3d5a213f77042e405576051f1389357 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Mon, 6 May 2024 15:33:13 +0300 Subject: [PATCH 4/9] added routing logic to the edit fields menu item click --- .../RecordIndexOptionsDropdownContent.tsx | 11 ++- .../__stories__/MenuItemSelectTag.stories.tsx | 87 +++++++++++++++++++ .../ViewFieldsVisibilityDropdownSection.tsx | 6 +- 3 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index c0b3f61f9f84..ab0b74179b11 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { Key } from 'ts-key-enum'; import { IconBaselineDensitySmall, @@ -16,6 +17,8 @@ import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/opti import { useRecordIndexOptionsForTable } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForTable'; import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope'; import { useSpreadsheetRecordImport } from '@/object-record/spreadsheet-import/useSpreadsheetRecordImport'; +import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; +import { SettingsPath } from '@/types/SettingsPath'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; @@ -42,6 +45,8 @@ export const RecordIndexOptionsDropdownContent = ({ }: RecordIndexOptionsDropdownContentProps) => { const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView(); + const navigate = useNavigate(); + const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID); const [currentMenu, setCurrentMenu] = useState< @@ -54,6 +59,10 @@ export const RecordIndexOptionsDropdownContent = ({ setCurrentMenu(option); }; + const handleEditClick = () => { + navigate(getSettingsPagePath(SettingsPath.Objects)); + }; + useScopedHotkeys( [Key.Escape], () => { @@ -173,7 +182,7 @@ export const RecordIndexOptionsDropdownContent = ({ )} diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx new file mode 100644 index 000000000000..d7e941198383 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx @@ -0,0 +1,87 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { + CatalogDecorator, + CatalogDimension, + CatalogOptions, + CatalogStory, + ComponentDecorator, + ThemeColor, +} from 'twenty-ui'; + +import { MenuItemSelectTag } from '../MenuItemSelectTag'; + +const meta: Meta = { + title: 'UI/Navigation/MenuItem/MenuItemSelectTag', + component: MenuItemSelectTag, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { selected: false, onClick: undefined }, + argTypes: { + selected: { + control: 'boolean', + defaultValue: false, + }, + onClick: { + control: false, + }, + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + parameters: { + pseudo: { + hover: ['.hover'], + active: ['.pressed'], + focus: ['.focus'], + }, + catalog: { + dimensions: [ + { + name: 'color', + values: [ + 'green', + 'turquoise', + 'sky', + 'blue', + 'purple', + 'pink', + 'red', + 'orange', + 'yellow', + 'gray', + ], + props: (color: ThemeColor) => ({ color }), + }, + { + name: 'states', + values: ['default', 'hover', 'selected', 'hover+selected'], + props: (state: string) => { + switch (state) { + case 'default': + return {}; + case 'hover': + return { className: 'hover' }; + case 'selected': + return { selected: true }; + case 'hover+selected': + return { className: 'hover', selected: true }; + default: + return {}; + } + }, + labels: (state: string) => `State: ${state}`, + }, + ] as CatalogDimension[], + options: { + elementContainer: { width: 200 }, + } as CatalogOptions, + }, + }, + decorators: [CatalogDecorator], +}; diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index 9f49184628ec..45e5151ee4ca 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = { field: Omit, 'size' | 'position'>, ) => void; title: string; + showSubheader: boolean; }; export const ViewFieldsVisibilityDropdownSection = ({ @@ -41,6 +42,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ onDragEnd, onVisibilityChange, title, + showSubheader = true, }: ViewFieldsVisibilityDropdownSectionProps) => { const handleOnDrag = (result: DropResult, provided: ResponderProvided) => { onDragEnd?.(result, provided); @@ -94,7 +96,9 @@ export const ViewFieldsVisibilityDropdownSection = ({ return (
- {title} + {showSubheader && ( + {title} + )} {nonDraggableItems.map((field, fieldIndex) => ( Date: Wed, 8 May 2024 14:00:30 +0300 Subject: [PATCH 5/9] added right chevron icon to hidden fields menu item --- .../components/RecordIndexOptionsDropdownContent.tsx | 2 ++ .../modules/ui/navigation/menu-item/components/MenuItem.tsx | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index ab0b74179b11..dda866e20f11 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -4,6 +4,7 @@ import { Key } from 'ts-key-enum'; import { IconBaselineDensitySmall, IconChevronLeft, + IconChevronRight, IconEyeOff, IconFileExport, IconFileImport, @@ -156,6 +157,7 @@ export const RecordIndexOptionsDropdownContent = ({ handleSelectMenu('hiddenFields')} LeftIcon={IconEyeOff} + RightIcon={IconChevronRight} text="Hidden Fields" /> diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx index eb97bad4a877..ae213554e250 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx @@ -7,6 +7,7 @@ import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent import { StyledHoverableMenuItemBase, StyledMenuItemLeftContent, + StyledMenuItemRightContent, } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; @@ -17,6 +18,7 @@ export type MenuItemIconButton = { export type MenuItemProps = { LeftIcon?: IconComponent | null; + RightIcon?: IconComponent | null; accent?: MenuItemAccent; text: string; iconButtons?: MenuItemIconButton[]; @@ -29,6 +31,7 @@ export type MenuItemProps = { export const MenuItem = ({ LeftIcon, + RightIcon, accent = 'default', text, iconButtons, @@ -65,6 +68,9 @@ export const MenuItem = ({ )}
+ + + ); }; From a273c9abc49eb7f37415505fa31de2857a7486b5 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Wed, 8 May 2024 14:07:47 +0300 Subject: [PATCH 6/9] fixed eye/eye-off icons --- .../views/components/ViewFieldsVisibilityDropdownSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index 45e5151ee4ca..9bc30f5a2359 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -71,7 +71,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ field.isLabelIdentifier ? null : { - Icon: field.isVisible ? IconEye : IconEyeOff, + Icon: field.isVisible ? IconEyeOff : IconEye, onClick: () => onVisibilityChange(field), }, ].filter(isDefined); From 5046cc06c206f712557558b69c0ba0042c0b5244 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Wed, 15 May 2024 12:05:41 +0300 Subject: [PATCH 7/9] fixed bug caused by right chevron icon --- .../RecordIndexOptionsDropdownContent.tsx | 1 + .../menu-item/components/MenuItem.tsx | 18 ++++++++++++------ .../components/MenuItemLeftContent.tsx | 2 +- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index dda866e20f11..2bfe3bbc5a98 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -158,6 +158,7 @@ export const RecordIndexOptionsDropdownContent = ({ onClick={() => handleSelectMenu('hiddenFields')} LeftIcon={IconEyeOff} RightIcon={IconChevronRight} + hasRightIcon={true} text="Hidden Fields" /> diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx index ae213554e250..f8e912a379f0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx @@ -19,6 +19,7 @@ export type MenuItemIconButton = { export type MenuItemProps = { LeftIcon?: IconComponent | null; RightIcon?: IconComponent | null; + hasRightIcon?: boolean; accent?: MenuItemAccent; text: string; iconButtons?: MenuItemIconButton[]; @@ -32,6 +33,7 @@ export type MenuItemProps = { export const MenuItem = ({ LeftIcon, RightIcon, + hasRightIcon, accent = 'default', text, iconButtons, @@ -63,14 +65,18 @@ export const MenuItem = ({ -
- {showIconButtons && ( - - )} -
- + {hasRightIcon && ( + + )} + {!hasRightIcon && ( +
+ {showIconButtons && ( + + )} +
+ )} ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx index 01ae16da39d0..0c92385ec006 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx @@ -14,7 +14,7 @@ type MenuItemLeftContentProps = { className?: string; LeftIcon: IconComponent | null | undefined; showGrip?: boolean; - text: string; + text?: string; }; export const MenuItemLeftContent = ({ From 9c81963d678971dd86e3b630c453b5e808bc6626 Mon Sep 17 00:00:00 2001 From: kiridarivaki Date: Sun, 26 May 2024 19:07:30 +0300 Subject: [PATCH 8/9] reverted commit for right icon implementation --- .../RecordIndexOptionsDropdownContent.tsx | 3 --- .../menu-item/components/MenuItem.tsx | 18 ++++-------------- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 2bfe3bbc5a98..ab0b74179b11 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum'; import { IconBaselineDensitySmall, IconChevronLeft, - IconChevronRight, IconEyeOff, IconFileExport, IconFileImport, @@ -157,8 +156,6 @@ export const RecordIndexOptionsDropdownContent = ({ handleSelectMenu('hiddenFields')} LeftIcon={IconEyeOff} - RightIcon={IconChevronRight} - hasRightIcon={true} text="Hidden Fields" /> diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx index f8e912a379f0..c536b82e1598 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx @@ -7,7 +7,6 @@ import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent import { StyledHoverableMenuItemBase, StyledMenuItemLeftContent, - StyledMenuItemRightContent, } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; @@ -32,8 +31,6 @@ export type MenuItemProps = { export const MenuItem = ({ LeftIcon, - RightIcon, - hasRightIcon, accent = 'default', text, iconButtons, @@ -65,18 +62,11 @@ export const MenuItem = ({ - - {hasRightIcon && ( - +
+ {showIconButtons && ( + )} - - {!hasRightIcon && ( -
- {showIconButtons && ( - - )} -
- )} +
); }; From b6cdc4a9e2cbf02cef6294bdc46200b1195f0e20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 3 Jun 2024 22:17:15 +0200 Subject: [PATCH 9/9] Improve story --- .../components/__stories__/MenuItemSelectTag.stories.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx index d7e941198383..3a13147567d8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx @@ -20,7 +20,11 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { selected: false, onClick: undefined }, + args: { + selected: false, + onClick: undefined, + text: 'Item A', + }, argTypes: { selected: { control: 'boolean', @@ -34,6 +38,9 @@ export const Default: Story = { }; export const Catalog: CatalogStory = { + args: { + text: 'Item A', + }, parameters: { pseudo: { hover: ['.hover'],