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 9643b8665..98c01586b 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,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 (
+
+
+
+ );
+ }
+
return (
{showIconButtons && (
{
const theme = useTheme();
return (
- {showGrip && (
-
- )}
+ {showGrip &&
+ (isDisabled ? (
+
+ ) : (
+
+
+
+ ))}
{LeftIcon && (
)}
diff --git 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
index 71cd27eae..a2489def3 100644
--- 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`
@@ -31,7 +32,8 @@ export const StyledMenuItemBase = styled.div`
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
index 9bc30f5a2..edbbdf3c0 100644
--- 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 = ({
)}
{nonDraggableItems.map((field, fieldIndex) => (
-
))}
{!!draggableItems.length && (
@@ -131,6 +134,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
index ef0a258b0..91b18694d 100644
--- 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 && (
-