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
/>
))}