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 = ({