Feat/rename and color picker (#780)

* WIP * Add menu for rename/color select * Add stories * Remove useless code * Fix color name, add icon for selected color * Remove useless comment * Unify color vocabulary * Fix rebase * Rename story * Improve hotkeys and imports
2023-07-20 16:45:43 -07:00
parent a2087da624
commit 9c230f448e
16 changed files with 415 additions and 103 deletions
--- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
+++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
@ -0,0 +1,99 @@
+import { ChangeEvent, useState } from 'react';
+import styled from '@emotion/styled';
+
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
+import { textInputStyle } from '@/ui/themes/effects';
+import { debounce } from '~/utils/debounce';
+
+export const StyledEditTitleContainer = styled.div`
+  --vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  align-items: center;
+
+  display: flex;
+  flex-direction: row;
+  height: calc(36px - 2 * var(--vertical-padding));
+  padding: var(--vertical-padding) 0;
+
+  width: calc(100%);
+`;
+
+const StyledEditModeInput = styled.input`
+  font-size: ${({ theme }) => theme.font.size.sm};
+
+  ${textInputStyle}
+
+  width: 100%;
+`;
+
+type OwnProps = {
+  onClose: () => void;
+  title: string;
+  onTitleEdit: (title: string) => void;
+  onColumnColorEdit: (color: string) => void;
+  color?: string;
+};
+
+const StyledColorSample = styled.div<{ colorName: string }>`
+  background-color: ${({ theme, colorName }) =>
+    theme.tag.background[colorName]};
+  border: 1px solid ${({ theme, colorName }) => theme.color[colorName]};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  height: 12px;
+  width: 12px;
+`;
+
+const COLOR_OPTIONS = [
+  { name: 'Green', id: 'green' },
+  { name: 'Turquoise', id: 'turquoise' },
+  { name: 'Sky', id: 'sky' },
+  { name: 'Blue', id: 'blue' },
+  { name: 'Purple', id: 'purple' },
+  { name: 'Pink', id: 'pink' },
+  { name: 'Red', id: 'red' },
+  { name: 'Orange', id: 'orange' },
+  { name: 'Yellow', id: 'yellow' },
+  { name: 'Gray', id: 'gray' },
+];
+
+export function BoardColumnEditTitleMenu({
+  onClose,
+  onTitleEdit,
+  onColumnColorEdit,
+  title,
+  color,
+}: OwnProps) {
+  const [internalValue, setInternalValue] = useState(title);
+  const debouncedOnUpdate = debounce(onTitleEdit, 200);
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInternalValue(event.target.value);
+    debouncedOnUpdate(event.target.value);
+  };
+  return (
+    <DropdownMenuItemsContainer>
+      <StyledEditTitleContainer>
+        <StyledEditModeInput
+          value={internalValue}
+          onChange={handleChange}
+          autoFocus
+        />
+      </StyledEditTitleContainer>
+      <DropdownMenuSeparator />
+      {COLOR_OPTIONS.map((colorOption) => (
+        <DropdownMenuSelectableItem
+          key={colorOption.name}
+          onClick={() => {
+            onColumnColorEdit(colorOption.id);
+            onClose();
+          }}
+          selected={colorOption.id === color}
+        >
+          <StyledColorSample colorName={colorOption.id} />
+          {colorOption.name}
+        </DropdownMenuSelectableItem>
+      ))}
+    </DropdownMenuItemsContainer>
+  );
+}