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 && ( - { onClick={() => handleViewSelect(indexView.id)} LeftIcon={getIcon(indexView.icon)} text={indexView.name} + accent="placeholder" + isDragDisabled /> )}