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

Refactor/new menu item (#1448)

Browse Source 
* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests
This commit is contained in:
Lucas Bordeau
2023-09-06 16:41:26 +02:00
committed by GitHub
parent 5c7660f588
commit 28ca9a9e49
96 changed files with 816 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
View File

@ -1,9 +1,10 @@
import { ChangeEvent, useState } from 'react';
import styled from '@emotion/styled';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
import { MenuItemSelectColor } from '@/ui/menu-item/components/MenuItemSelectColor';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { debounce } from '~/utils/debounce';
@ -32,21 +33,15 @@ export type BoardColumnEditTitleMenuProps = {
onClose: () => void;
title: string;
onTitleEdit: (title: string, color: string) => void;
color: string;
color: ThemeColor;
};
const StyledColorSample = styled.div<{ colorName: string }>`
background-color: ${({ theme, colorName }) =>
theme.tag.background[colorName]};
border: 1px solid
${({ theme, colorName }) =>
theme.color[colorName as keyof typeof theme.color]};
border-radius: ${({ theme }) => theme.border.radius.sm};
height: 12px;
width: 12px;
`;
type ColumnColorOption = {
name: string;
id: ThemeColor;
};
export const COLOR_OPTIONS = [
export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
{ name: 'Green', id: 'green' },
{ name: 'Turquoise', id: 'turquoise' },
{ name: 'Sky', id: 'sky' },
@ -85,18 +80,17 @@ export function BoardColumnEditTitleMenu({
/>
</StyledEditTitleContainer>
<StyledDropdownMenuSeparator />
{COLOR_OPTIONS.map((colorOption) => (
<DropdownMenuSelectableItem
{COLUMN_COLOR_OPTIONS.map((colorOption) => (
<MenuItemSelectColor
key={colorOption.name}
onClick={() => {
onTitleEdit(title, colorOption.id);
onClose();
}}
color={colorOption.id}
selected={colorOption.id === color}
>
<StyledColorSample colorName={colorOption.id} />
{colorOption.name}
</DropdownMenuSelectableItem>
text={colorOption.name}
/>
))}
</StyledDropdownMenuItemsContainer>
);