twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 14:03:35 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx Normal file
View File

@ -0,0 +1,41 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton, LightIconButtonProps } from './LightIconButton';
const StyledLightIconButtonGroupContainer = styled.div`
display: inline-flex;
gap: 2px;
padding: 2px;
`;
export type LightIconButtonGroupProps = Pick<
LightIconButtonProps,
'className' | 'size'
> & {
iconButtons: {
Icon: IconComponent;
onClick?: (event: MouseEvent<any>) => void;
}[];
};
export const LightIconButtonGroup = ({
iconButtons,
size,
className,
}: LightIconButtonGroupProps) => (
<StyledLightIconButtonGroupContainer className={className}>
{iconButtons.map(({ Icon, onClick }, index) => {
return (
<LightIconButton
key={`light-icon-button-${index}`}
Icon={Icon}
onClick={onClick}
size={size}
/>
);
})}
</StyledLightIconButtonGroupContainer>
);

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;
}
}
`;