diff --git a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx index eb589ba8c..2629bd57a 100644 --- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx @@ -1,13 +1,18 @@ -import { ChangeEvent, useState } from 'react'; +import { ChangeEvent, useCallback, useState } from 'react'; import styled from '@emotion/styled'; +import { useRecoilState } from 'recoil'; import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator'; +import { IconTrash } from '@/ui/icon'; +import { MenuItem } from '@/ui/menu-item/components/MenuItem'; 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'; +import { boardColumnsState } from '../states/boardColumnsState'; + const StyledEditTitleContainer = styled.div` --vertical-padding: ${({ theme }) => theme.spacing(1)}; @@ -22,18 +27,26 @@ const StyledEditTitleContainer = styled.div` `; const StyledEditModeInput = styled.input` - font-size: ${({ theme }) => theme.font.size.sm}; - ${textInputStyle} + background: ${({ theme }) => theme.background.transparent.lighter}; + border-color: ${({ theme }) => theme.color.blue}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + border-style: solid; + border-width: 1px; + box-shadow: 0px 0px 0px 3px rgba(25, 97, 237, 0.1); + font-size: ${({ theme }) => theme.font.size.sm}; + height: 100%; width: 100%; `; export type BoardColumnEditTitleMenuProps = { onClose: () => void; + onDelete?: (id: string) => void; title: string; onTitleEdit: (title: string, color: string) => void; color: ThemeColor; + stageId: string; }; type ColumnColorOption = { @@ -56,6 +69,8 @@ export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [ export const BoardColumnEditTitleMenu = ({ onClose, + onDelete, + stageId, onTitleEdit, title, color, @@ -69,6 +84,16 @@ export const BoardColumnEditTitleMenu = ({ setInternalValue(event.target.value); debouncedOnUpdateTitle(event.target.value); }; + const [, setBoardColumns] = useRecoilState(boardColumnsState); + + const handleDelete = useCallback(() => { + setBoardColumns((previousBoardColumns) => + previousBoardColumns.filter((column) => column.id !== stageId), + ); + onDelete?.(stageId); + onClose(); + }, [onClose, onDelete, setBoardColumns, stageId]); + return ( @@ -92,6 +117,13 @@ export const BoardColumnEditTitleMenu = ({ text={colorOption.name} /> ))} + + ); }; diff --git a/front/src/modules/ui/board/components/BoardColumnMenu.tsx b/front/src/modules/ui/board/components/BoardColumnMenu.tsx index 949773961..67a77f0fa 100644 --- a/front/src/modules/ui/board/components/BoardColumnMenu.tsx +++ b/front/src/modules/ui/board/components/BoardColumnMenu.tsx @@ -1,19 +1,12 @@ import { useCallback, useContext, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { useRecoilState } from 'recoil'; import { Key } from 'ts-key-enum'; import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProgress'; import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery'; import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu'; import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer'; -import { - IconArrowLeft, - IconArrowRight, - IconPencil, - IconPlus, - IconTrash, -} from '@/ui/icon'; +import { IconArrowLeft, IconArrowRight, IconPencil, IconPlus } from '@/ui/icon'; import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect'; import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState'; import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect'; @@ -27,12 +20,13 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi import { BoardColumnContext } from '../contexts/BoardColumnContext'; import { useBoardColumns } from '../hooks/useBoardColumns'; -import { boardColumnsState } from '../states/boardColumnsState'; import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope'; import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu'; const StyledMenuContainer = styled.div` + left: 26.5px; position: absolute; + top: ${({ theme }) => theme.spacing(10)}; width: 200px; z-index: 1; `; @@ -55,8 +49,6 @@ export const BoardColumnMenu = ({ const [currentMenu, setCurrentMenu] = useState('actions'); const column = useContext(BoardColumnContext); - const [, setBoardColumns] = useRecoilState(boardColumnsState); - const boardColumnMenuRef = useRef(null); const { enqueueSnackBar } = useSnackBar(); @@ -94,14 +86,6 @@ export const BoardColumnMenu = ({ onClose(); }, [goBackToPreviousHotkeyScope, onClose]); - const handleDelete = useCallback(() => { - setBoardColumns((previousBoardColumns) => - previousBoardColumns.filter((column) => column.id !== stageId), - ); - onDelete?.(stageId); - closeMenu(); - }, [closeMenu, onDelete, setBoardColumns, stageId]); - const setMenu = (menu: Menu) => { if (menu === 'add') { setHotkeyScopeAndMemorizePreviousScope( @@ -157,7 +141,7 @@ export const BoardColumnMenu = ({ setMenu('title')} LeftIcon={IconPencil} - text="Rename" + text="Edit" /> - setMenu('add')} LeftIcon={IconPlus} @@ -187,6 +166,8 @@ export const BoardColumnMenu = ({ onClose={closeMenu} onTitleEdit={onTitleEdit} title={columnDefinition.title} + onDelete={onDelete} + stageId={stageId} /> )} {currentMenu === 'add' && (