diff --git a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx index 73de518b0..4d9c8631b 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx @@ -182,6 +182,7 @@ export const RecordIndexOptionsDropdownContent = ({ onDragEnd={handleReorderFields} onVisibilityChange={handleChangeFieldVisibility} showSubheader={false} + showDragGrip={true} /> @@ -209,6 +210,7 @@ export const RecordIndexOptionsDropdownContent = ({ isDraggable={false} onVisibilityChange={handleChangeFieldVisibility} showSubheader={false} + showDragGrip={false} /> )} 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 index 98c01586b..dfe895fd8 100644 --- 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,10 +3,7 @@ import { IconComponent } from 'twenty-ui'; import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; -import { - StyledHoverableMenuItemBase, - StyledMenuItemBase, -} from '../internals/components/StyledMenuItemBase'; +import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase'; import { MenuItemAccent } from '../types/MenuItemAccent'; import { MenuItemIconButton } from './MenuItem'; @@ -24,6 +21,7 @@ export type MenuItemDraggableProps = { isDragDisabled?: boolean; isHoverDisabled?: boolean; }; + export const MenuItemDraggable = ({ LeftIcon, accent = 'default', @@ -34,22 +32,14 @@ export const MenuItemDraggable = ({ className, isIconDisplayedOnHoverOnly = true, showGrip = false, - isHoverDisabled = false, }: MenuItemDraggableProps) => { const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0; - if (isHoverDisabled) { - return ( - - - - ); - } + const cursorType = showGrip + ? isDragDisabled + ? 'not-allowed' + : 'drag' + : 'default'; return ( {showGrip && (isDisabled ? ( - + + + ) : ( ` ${({ isIconDisplayedOnHoverOnly, theme }) => isIconDisplayedOnHoverOnly && @@ -131,4 +135,15 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ & .hoverable-buttons { transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease; } + + cursor: ${({ cursor }) => { + switch (cursor) { + case 'drag': + return 'grab'; + case 'not-allowed': + return 'not-allowed'; + default: + return 'default'; + } + }}; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index edbbdf3c0..d8ba50b09 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -1,10 +1,10 @@ -import { useRef, useState } from 'react'; -import { createPortal } from 'react-dom'; import { DropResult, OnDragEndResponder, ResponderProvided, } from '@hello-pangea/dnd'; +import { useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { AppTooltip, IconEye, @@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = { ) => void; title: string; showSubheader: boolean; + showDragGrip: boolean; }; export const ViewFieldsVisibilityDropdownSection = ({ @@ -42,6 +43,7 @@ export const ViewFieldsVisibilityDropdownSection = ({ onVisibilityChange, title, showSubheader = true, + showDragGrip, }: ViewFieldsVisibilityDropdownSectionProps) => { const handleOnDrag = (result: DropResult, provided: ResponderProvided) => { onDragEnd?.(result, provided); @@ -107,9 +109,8 @@ export const ViewFieldsVisibilityDropdownSection = ({ isTooltipOpen={openToolTipIndex === fieldIndex} text={field.label} className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`} - accent={'placeholder'} - isHoverDisabled={field.isVisible} - showGrip + accent={showDragGrip ? 'placeholder' : 'default'} + showGrip={showDragGrip} isDragDisabled /> ))}