From 68e20c0e8769bd1988978b8d021fc54df7f66d33 Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Fri, 21 Jun 2024 14:42:48 +0200 Subject: [PATCH] Add disabled style on non-draggable menu items (#5974) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes https://github.com/twentyhq/twenty/issues/5653 Capture d’écran 2024-06-20 à 17 19 44 Capture d’écran 2024-06-20 à 17 20 03 --- .../components/MenuItemDraggable.tsx | 27 ++++++++++++++-- .../__stories__/MenuItemDraggable.stories.tsx | 8 +++++ .../components/MenuItemLeftContent.tsx | 32 +++++++++++++++---- .../components/StyledMenuItemBase.tsx | 8 ++++- .../ViewFieldsVisibilityDropdownSection.tsx | 8 +++-- .../components/ViewPickerListContent.tsx | 4 ++- 6 files changed, 73 insertions(+), 14 deletions(-) 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 9643b8665948..98c01586b93f 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 71cd27eae09e..a2489def35b9 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 9bc30f5a2359..edbbdf3c0a8d 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 ef0a258b0dfd..91b18694dd2c 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 /> )}