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

Closes https://github.com/twentyhq/twenty/issues/5653 <img width="256" alt="Capture d’écran 2024-06-20 à 17 19 44" src="https://github.com/twentyhq/twenty/assets/22936103/c9d7e58f-818b-44f2-8aa4-4d85c8e1b6be"> <img width="231" alt="Capture d’écran 2024-06-20 à 17 20 03" src="https://github.com/twentyhq/twenty/assets/22936103/5e981e93-9d59-403a-bb6b-0ff75151ace2">
2024-06-21 14:42:48 +02:00
parent 7a0f097df4
commit 68e20c0e87
6 changed files with 73 additions and 14 deletions
--- 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
@ -3,7 +3,10 @@ import { IconComponent } from 'twenty-ui';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';

 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import {
+  StyledHoverableMenuItemBase,
+  StyledMenuItemBase,
+} from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';

 import { MenuItemIconButton } from './MenuItem';
@ -15,9 +18,11 @@ export type MenuItemDraggableProps = {
  isTooltipOpen?: boolean;
  onClick?: () => void;
  text: string;
-  isDragDisabled?: boolean;
  className?: string;
  isIconDisplayedOnHoverOnly?: boolean;
+  showGrip?: boolean;
+  isDragDisabled?: boolean;
+  isHoverDisabled?: boolean;
 };
 export const MenuItemDraggable = ({
  LeftIcon,
@ -28,9 +33,24 @@ export const MenuItemDraggable = ({
  isDragDisabled = false,
  className,
  isIconDisplayedOnHoverOnly = true,
+  showGrip = false,
+  isHoverDisabled = false,
 }: MenuItemDraggableProps) => {
  const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;

+  if (isHoverDisabled) {
+    return (
+      <StyledMenuItemBase accent={accent} isHoverBackgroundDisabled>
+        <MenuItemLeftContent
+          LeftIcon={LeftIcon}
+          text={text}
+          isDisabled={isDragDisabled}
+          showGrip={showGrip}
+        />
+      </StyledMenuItemBase>
+    );
+  }
+
  return (
    <StyledHoverableMenuItemBase
      onClick={onClick}
@ -41,7 +61,8 @@ export const MenuItemDraggable = ({
      <MenuItemLeftContent
        LeftIcon={LeftIcon}
        text={text}
-        showGrip={!isDragDisabled}
+        isDisabled={isDragDisabled}
+        showGrip={showGrip}
      />
      {showIconButtons && (
        <LightIconButtonGroup
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/stories/MenuItemDraggable.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/stories/MenuItemDraggable.stories.tsx
@ -104,3 +104,11 @@ export const Catalog: Story = {
  },
  decorators: [CatalogDecorator],
 };
+
+export const Grip: Story = {
+  args: { ...Default.args, showGrip: true, isDragDisabled: false },
+};
+
+export const HoverDisabled: Story = {
+  args: { ...Default.args, isHoverDisabled: true },
+};
--- 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
@ -8,6 +8,7 @@ import {
 } from 'twenty-ui';

 import {
+  StyledDraggableItem,
  StyledMenuItemLabel,
  StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
@ -16,6 +17,7 @@ type MenuItemLeftContentProps = {
  className?: string;
  LeftIcon: IconComponent | null | undefined;
  showGrip?: boolean;
+  isDisabled?: boolean;
  text: ReactNode;
 };

@ -24,18 +26,34 @@ export const MenuItemLeftContent = ({
  LeftIcon,
  text,
  showGrip = false,
+  isDisabled = false,
 }: MenuItemLeftContentProps) => {
  const theme = useTheme();

  return (
    <StyledMenuItemLeftContent className={className}>
-      {showGrip && (
-        <IconGripVertical
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-          color={theme.font.color.extraLight}
-        />
-      )}
+      {showGrip &&
+        (isDisabled ? (
+          <IconGripVertical
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+            color={
+              isDisabled ? theme.font.color.extraLight : theme.font.color.light
+            }
+          />
+        ) : (
+          <StyledDraggableItem>
+            <IconGripVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={
+                isDisabled
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
+        ))}
      {LeftIcon && (
        <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
      )}
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@ -7,6 +7,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 export type MenuItemBaseProps = {
  accent?: MenuItemAccent;
  isKeySelected?: boolean;
+  isHoverBackgroundDisabled?: boolean;
 };

 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
@ -31,7 +32,8 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`

  padding: var(--vertical-padding) var(--horizontal-padding);

-  ${HOVER_BACKGROUND};
+  ${({ isHoverBackgroundDisabled }) =>
+    isHoverBackgroundDisabled ?? HOVER_BACKGROUND};

  ${({ theme, accent }) => {
    switch (accent) {
@ -99,6 +101,10 @@ export const StyledMenuItemRightContent = styled.div`
  flex-direction: row;
 `;

+export const StyledDraggableItem = styled.div`
+  cursor: grab;
+`;
+
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
  isIconDisplayedOnHoverOnly?: boolean;
 }>`
--- 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,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
                        />
                      }
                    />
--- 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>