Fix 4363 modify kanban menu (#5337)
**Changes:** - Changed -/+ to eye and eye off icons - Changed menu width to 200px - Created separate menu for hidden fields - Added Edit Fields option to hidden fields menu - Added test file MenuItemSelectTag (wasn't included in the issue) As this is my first pr, feedback is very welcome! **Note:** These changes cover most of #4363 . I left out the implementation of the RightIcon in the "Hidden Fields" menu item. --------- Co-authored-by: kiridarivaki <k.darivaki03@gmail.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Kyriaki Darivaki
@ -20,6 +20,7 @@ export const RecordIndexOptionsDropdown = ({
|
||||
<Dropdown
|
||||
dropdownId={RECORD_INDEX_OPTIONS_DROPDOWN_ID}
|
||||
clickableComponent={<RecordIndexOptionsDropdownButton />}
|
||||
dropdownMenuWidth={'200px'}
|
||||
dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }}
|
||||
dropdownOffset={{ y: 8 }}
|
||||
dropdownComponents={
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Key } from 'ts-key-enum';
|
||||
import {
|
||||
IconBaselineDensitySmall,
|
||||
IconChevronLeft,
|
||||
IconEyeOff,
|
||||
IconFileExport,
|
||||
IconFileImport,
|
||||
IconSettings,
|
||||
IconTag,
|
||||
} from 'twenty-ui';
|
||||
|
||||
@ -17,6 +20,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';
|
||||
@ -28,7 +33,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;
|
||||
@ -43,6 +48,8 @@ export const RecordIndexOptionsDropdownContent = ({
|
||||
}: RecordIndexOptionsDropdownContentProps) => {
|
||||
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { closeDropdown } = useDropdown(RECORD_INDEX_OPTIONS_DROPDOWN_ID);
|
||||
|
||||
const [currentMenu, setCurrentMenu] = useState<
|
||||
@ -55,6 +62,10 @@ export const RecordIndexOptionsDropdownContent = ({
|
||||
setCurrentMenu(option);
|
||||
};
|
||||
|
||||
const handleEditClick = () => {
|
||||
navigate(getSettingsPagePath(SettingsPath.Objects));
|
||||
};
|
||||
|
||||
useScopedHotkeys(
|
||||
[Key.Escape],
|
||||
() => {
|
||||
@ -142,20 +153,45 @@ export const RecordIndexOptionsDropdownContent = ({
|
||||
isDraggable
|
||||
onDragEnd={handleReorderFields}
|
||||
onVisibilityChange={handleChangeFieldVisibility}
|
||||
showSubheader={false}
|
||||
/>
|
||||
<DropdownMenuSeparator />
|
||||
<MenuItem
|
||||
onClick={() => handleSelectMenu('hiddenFields')}
|
||||
LeftIcon={IconEyeOff}
|
||||
text="Hidden Fields"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{currentMenu === 'hiddenFields' && (
|
||||
<>
|
||||
<DropdownMenuHeader
|
||||
StartIcon={IconChevronLeft}
|
||||
onClick={() => setCurrentMenu('fields')}
|
||||
>
|
||||
Hidden Fields
|
||||
</DropdownMenuHeader>
|
||||
<DropdownMenuSeparator />
|
||||
{hiddenRecordFields.length > 0 && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<ViewFieldsVisibilityDropdownSection
|
||||
title="Hidden"
|
||||
fields={hiddenRecordFields}
|
||||
isDraggable={false}
|
||||
onVisibilityChange={handleChangeFieldVisibility}
|
||||
showSubheader={false}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<MenuItem
|
||||
onClick={handleEditClick}
|
||||
LeftIcon={IconSettings}
|
||||
text="Edit Fields"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{viewType === ViewType.Kanban && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
@ -0,0 +1,94 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
CatalogOptions,
|
||||
CatalogStory,
|
||||
ComponentDecorator,
|
||||
ThemeColor,
|
||||
} from 'twenty-ui';
|
||||
|
||||
import { MenuItemSelectTag } from '../MenuItemSelectTag';
|
||||
|
||||
const meta: Meta<typeof MenuItemSelectTag> = {
|
||||
title: 'UI/Navigation/MenuItem/MenuItemSelectTag',
|
||||
component: MenuItemSelectTag,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof MenuItemSelectTag>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
selected: false,
|
||||
onClick: undefined,
|
||||
text: 'Item A',
|
||||
},
|
||||
argTypes: {
|
||||
selected: {
|
||||
control: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
onClick: {
|
||||
control: false,
|
||||
},
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof MenuItemSelectTag> = {
|
||||
args: {
|
||||
text: 'Item A',
|
||||
},
|
||||
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],
|
||||
};
|
||||
@ -7,9 +7,9 @@ import {
|
||||
} from '@hello-pangea/dnd';
|
||||
import {
|
||||
AppTooltip,
|
||||
IconEye,
|
||||
IconEyeOff,
|
||||
IconInfoCircle,
|
||||
IconMinus,
|
||||
IconPlus,
|
||||
useIcons,
|
||||
} from 'twenty-ui';
|
||||
|
||||
@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = {
|
||||
field: Omit<ColumnDefinition<FieldMetadata>, '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);
|
||||
@ -69,7 +71,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
|
||||
field.isLabelIdentifier
|
||||
? null
|
||||
: {
|
||||
Icon: field.isVisible ? IconMinus : IconPlus,
|
||||
Icon: field.isVisible ? IconEyeOff : IconEye,
|
||||
onClick: () => onVisibilityChange(field),
|
||||
},
|
||||
].filter(isDefined);
|
||||
@ -94,7 +96,9 @@ export const ViewFieldsVisibilityDropdownSection = ({
|
||||
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
|
||||
{showSubheader && (
|
||||
<StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
|
||||
)}
|
||||
<DropdownMenuItemsContainer>
|
||||
{nonDraggableItems.map((field, fieldIndex) => (
|
||||
<MenuItem
|
||||
|
||||
Reference in New Issue
Block a user