Add disabled style on non-draggable menu items (#5974)

Closes https://github.com/twentyhq/twenty/issues/5653

<img width="256" alt="Capture d’écran 2024-06-20 à 17 19 44"
src="https://github.com/twentyhq/twenty/assets/22936103/c9d7e58f-818b-44f2-8aa4-4d85c8e1b6be">
<img width="231" alt="Capture d’écran 2024-06-20 à 17 20 03"
src="https://github.com/twentyhq/twenty/assets/22936103/5e981e93-9d59-403a-bb6b-0ff75151ace2">
This commit is contained in:
Thomas Trompette
2024-06-21 14:42:48 +02:00
committed by GitHub
parent 7a0f097df4
commit 68e20c0e87
6 changed files with 73 additions and 14 deletions

View File

@ -19,7 +19,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
@ -101,13 +100,17 @@ export const ViewFieldsVisibilityDropdownSection = ({
)}
<DropdownMenuItemsContainer>
{nonDraggableItems.map((field, fieldIndex) => (
<MenuItem
<MenuItemDraggable
key={field.fieldMetadataId}
LeftIcon={getIcon(field.iconName)}
iconButtons={getIconButtons(fieldIndex, field)}
isTooltipOpen={openToolTipIndex === fieldIndex}
text={field.label}
className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`}
accent={'placeholder'}
isHoverDisabled={field.isVisible}
showGrip
isDragDisabled
/>
))}
{!!draggableItems.length && (
@ -131,6 +134,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
isTooltipOpen={openToolTipIndex === fieldIndex}
text={field.label}
className={`${title}-draggable-item-tooltip-anchor-${fieldIndex}`}
showGrip
/>
}
/>