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:
@ -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