admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: improve menuitem btn design (#3152)

Browse Source 
feat: add LightIconButtonGroup

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Cao Z.H
2024-01-04 06:15:38 +08:00
committed by GitHub
parent 8483cf0b4b
commit f36fa9aa14
4 changed files with 50 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
View File

@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import {
@ -59,7 +59,7 @@ export const MenuItem = ({
</StyledMenuItemLeftContent>
<div className="hoverable-buttons">
{showIconButtons && (
<FloatingIconButtonGroup iconButtons={iconButtons} size="small" />
<LightIconButtonGroup iconButtons={iconButtons} size="small" />
)}
</div>
</StyledHoverableMenuItemBase>

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
View File

@ -1,5 +1,5 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
@ -42,7 +42,7 @@ export const MenuItemDraggable = ({
showGrip={!isDragDisabled}
/>
{showIconButtons && (
<FloatingIconButtonGroup
<LightIconButtonGroup
className="hoverable-buttons"
iconButtons={iconButtons}
/>

5
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -91,6 +91,10 @@ export const StyledMenuItemLeftContent = styled.div`
gap: ${({ theme }) => theme.spacing(2)};
min-width: 0;
width: 100%;
& > svg {
flex-shrink: 0;
}
`;
export const StyledMenuItemRightContent = styled.div`
@ -114,6 +118,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
& .hoverable-buttons {
opacity: 1;
pointer-events: auto;
position: static;
}
}
`;