Add grip pointer + tests

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

Hide file tree

Showing 5 changed files with 61 additions and 14 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
@@ -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,10 +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,
@@ -30,9 +34,23 @@ export const MenuItemDraggable = ({
   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}

diff --git a/.../src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/.../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 },
+};
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
@@ -8,6 +8,7 @@ import {
 } from 'twenty-ui';
 
 import {
+  StyledDraggableItem,
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
@@ -31,15 +32,28 @@ export const MenuItemLeftContent = ({
 
   return (
     <StyledMenuItemLeftContent className={className}>
-      {showGrip && (
-        <IconGripVertical
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-          color={
-            isDisabled ? theme.font.color.extraLight : theme.font.color.light
-          }
-        />
-      )}
+      {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} />
       )}

diff --git a/...nty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/...nty-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;
 }>`

diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -107,9 +107,10 @@ export const ViewFieldsVisibilityDropdownSection = ({
             isTooltipOpen={openToolTipIndex === fieldIndex}
             text={field.label}
             className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`}
-            accent="placeholder"
-            isDragDisabled
+            accent={'placeholder'}
+            isHoverDisabled={field.isVisible}
             showGrip
+            isDragDisabled
           />
         ))}
         {!!draggableItems.length && (