Add disabled style on non-draggable menu items

twentyhq · Jun 21, 2024 · 62fb207 · 62fb207
1 parent 9228667
commit 62fb207
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -18,6 +18,7 @@ export type MenuItemDraggableProps = {
   isDragDisabled?: boolean;
   className?: string;
   isIconDisplayedOnHoverOnly?: boolean;
+  showGrip?: boolean;
 };
 export const MenuItemDraggable = ({
   LeftIcon,
@@ -28,6 +29,7 @@ export const MenuItemDraggable = ({
   isDragDisabled = false,
   className,
   isIconDisplayedOnHoverOnly = true,
+  showGrip = false,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
@@ -41,7 +43,8 @@ export const MenuItemDraggable = ({
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
-        showGrip={!isDragDisabled}
+        isDisabled={isDragDisabled}
+        showGrip={showGrip}
       />
       {showIconButtons && (
         <LightIconButtonGroup

diff --git a/...ty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/...ty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -16,6 +16,7 @@ type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
+  isDisabled?: boolean;
   text: ReactNode;
 };
 
@@ -24,6 +25,7 @@ export const MenuItemLeftContent = ({
   LeftIcon,
   text,
   showGrip = false,
+  isDisabled = false,
 }: MenuItemLeftContentProps) => {
   const theme = useTheme();
 
@@ -33,7 +35,9 @@ export const MenuItemLeftContent = ({
         <IconGripVertical
           size={theme.icon.size.md}
           stroke={theme.icon.stroke.sm}
-          color={theme.font.color.extraLight}
+          color={
+            isDisabled ? theme.font.color.extraLight : theme.font.color.light
+          }
         />
       )}
       {LeftIcon && (

diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -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,16 @@ 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"
+            isDragDisabled
+            showGrip
           />
         ))}
         {!!draggableItems.length && (
@@ -131,6 +133,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
                           isTooltipOpen={openToolTipIndex === fieldIndex}
                           text={field.label}
                           className={`${title}-draggable-item-tooltip-anchor-${fieldIndex}`}
+                          showGrip
                         />
                       }
                     />

diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -117,7 +117,7 @@ export const ViewPickerListContent = () => {
           )}
         />
         {indexView && (
-          <MenuItem
+          <MenuItemDraggable
             key={indexView.id}
             iconButtons={[
               {
@@ -128,6 +128,8 @@ export const ViewPickerListContent = () => {
             onClick={() => handleViewSelect(indexView.id)}
             LeftIcon={getIcon(indexView.icon)}
             text={indexView.name}
+            accent="placeholder"
+            isDragDisabled
           />
         )}
       </DropdownMenuItemsContainer>