twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-26 05:24:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add update chevron (#5988)

Browse Source 
Fixes #5986 


1. Added right chevron to Fields Menu Item
<img width="735" alt="Screenshot 2024-06-21 at 5 59 46 PM"
src="https://github.com/twentyhq/twenty/assets/63531478/1515aba0-6732-424d-a0b3-5cc826a35b16">



2. Changed color of Hidden fields menu item chevron and stroke of left
chevron
<img width="735" alt="Screenshot 2024-06-21 at 6 21 30 PM"
src="https://github.com/twentyhq/twenty/assets/63531478/20952197-2f09-486c-a3bb-5b6c285a6996">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Aakarshan Thapa 2024-06-24 09:01:21 -04:00 committed by GitHub
parent 901ef65545
commit 57bbd7c129
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
View File

@ -132,6 +132,7 @@ export const RecordIndexOptionsDropdownContent = ({
onClick={() => handleSelectMenu('fields')}
LeftIcon={IconTag}
text="Fields"
hasSubMenu
/>
<MenuItem
onClick={() => openRecordSpreadsheetImport()}

2
packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
View File

@ -105,7 +105,7 @@ export const LightIconButton = ({
active={active}
title={title}
>
{Icon && <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />}
{Icon && <Icon size={theme.icon.size.sm} />}
</StyledButton>
);
};

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

@ -1,5 +1,6 @@
import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
import { IconComponent } from 'twenty-ui';
import { useTheme } from '@emotion/react';
import { IconChevronRight, IconComponent } from 'twenty-ui';
import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
@ -30,6 +31,7 @@ export type MenuItemProps = {
onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
testId?: string;
text: ReactNode;
hasSubMenu?: boolean;
};
export const MenuItem = ({
@ -43,7 +45,9 @@ export const MenuItem = ({
onMouseLeave,
testId,
text,
hasSubMenu = false,
}: MenuItemProps) => {
const theme = useTheme();
const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
@ -72,6 +76,13 @@ export const MenuItem = ({
<LightIconButtonGroup iconButtons={iconButtons} size="small" />
)}
</div>
{hasSubMenu && (
<IconChevronRight
size={theme.icon.size.sm}
color={theme.font.color.tertiary}
/>
)}
</StyledHoverableMenuItemBase>
);
};

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

@ -27,7 +27,10 @@ export const MenuItemNavigate = ({
<StyledMenuItemLeftContent>
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
</StyledMenuItemLeftContent>
<IconChevronRight size={theme.icon.size.md} />
<IconChevronRight
size={theme.icon.size.sm}
color={theme.font.color.tertiary}
/>
</StyledMenuItemBase>
);
};