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 6db4ddc59a32d..98c01586b93f9 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,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 ( + + + + ); + } + 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 71cd27eae09e7..a2489def35b98 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 b667efd3a6062..edbbdf3c0a8da 100644 --- 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 && (