feat: add new column menu

src/components/ColorPicker/ColorPicker.scss

@@ -0,0 +1,114 @@
+@import "constants/style";
+
+.color-picker {
+  z-index: $menu-item-z-index;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: $spacing--xxs;
+  box-shadow: 0 0 20px rgba($navy--400, 0.12);
+  background-color: $gray--300;
+  list-style: none;
+  padding-left: 0;
+  margin-top: auto;
+  border-radius: $rounded--full;
+
+  &__item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &-button {
+      cursor: pointer;
+      border: none;
+      background: none;
+      padding: 0;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:focus-within {
+        > .column__header-color-option {
+          border: 3px solid var(--accent-color--100);
+        }
+      }
+
+      &:focus-visible {
+        border-radius: $rounded--full;
+        outline: none;
+      }
+    }
+  }
+}
+
+[theme="dark"] {
+  .color-picker {
+    background-color: $navy--600;
+
+    &__item {
+      &__button {
+        &:focus-visible {
+          border-radius: $rounded--full;
+          outline: none;
+        }
+      }
+    }
+  }
+}
+
+.column__header-color-option {
+  width: 24px;
+  height: 24px;
+  border-radius: $rounded--full;
+  background-color: var(--accent-color--400);
+  border: 3px solid $gray--300;
+
+  &--selected {
+    background-color: var(--accent-color--400);
+    border: 3px solid var(--accent-color--200);
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--accent-color--400);
+    border: 3px solid var(--accent-color--100);
+  }
+}
+
+[theme="dark"] {
+  .column__header-color-option {
+    border: 3px solid $navy--600;
+
+    &--selected {
+      border: 3px solid var(--accent-color--200);
+    }
+
+    &:hover,
+    &:focus-visible {
+      border: 3px solid var(--accent-color--100);
+    }
+  }
+}
+
+.fix-focus-lock-placement {
+  margin-top: auto;
+}
+
+@media #{$smartphone} {
+  .color-picker {
+    flex-direction: row-reverse;
+    position: absolute;
+    right: 0;
+    margin: auto;
+    justify-self: center;
+    padding-right: $spacing--xxs;
+  }
+
+  .fix-focus-lock-placement {
+    margin-top: initial;
+    margin-bottom: auto;
+  }
+}

src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,77 @@
+import {useEffect} from "react";
+import {useDispatch} from "react-redux";
+import {uniqueId} from "underscore";
+import ReactFocusLock from "react-focus-lock";
+import {Color, getColorClassName, formatColorName} from "constants/colors";
+import {Actions} from "../../store/action";
+import {Tooltip} from "../Tooltip";
+
+type ColorPickerProps = {
+  id: string;
+  name: string;
+  visible: boolean;
+  index: number;
+  color: Color;
+  onClose?: () => void;
+  colors: Color[];
+  closeColorPicker: () => void;
+};
+
+export const ColorPicker = (props: ColorPickerProps) => {
+  const dispatch = useDispatch();
+  const colorsWithoutSelectedColor = props.colors.filter((curColor) => curColor !== props.color);
+  const primColorAnchor = uniqueId(`color-picker-${props.color.toString()}`);
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        props.closeColorPicker();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress, true); // trigger in capture phase
+    return () => document.removeEventListener("keydown", handleKeyPress, true);
+  }, [props]);
+
+  return (
+    <ReactFocusLock autoFocus={false} className="fix-focus-lock-placement">
+      <ul className="color-picker">
+        <li className={`${getColorClassName(props.color)} color-picker__item`}>
+          <button
+            id={primColorAnchor}
+            aria-label={formatColorName(props.color)}
+            title={formatColorName(props.color)}
+            onClick={() => {
+              props.onClose?.();
+              dispatch(Actions.editColumn(props.id, {name: props.name, color: props.color, index: props.index, visible: props.visible}));
+            }}
+            className="color-picker__item-button"
+          >
+            <div className="column__header-color-option column__header-color-option--selected" />
+          </button>
+          <Tooltip anchorSelect={`#${primColorAnchor}`} content={formatColorName(props.color)} />
+        </li>
+        {colorsWithoutSelectedColor.map((item) => {
+          const anchor = uniqueId(`color-picker-${item.toString()}`);
+          return (
+            <li className={`${getColorClassName(item)} color-picker__item`}>
+              <button
+                id={anchor}
+                aria-label={formatColorName(item)}
+                title={formatColorName(item)}
+                onClick={() => {
+                  props.onClose?.();
+                  dispatch(Actions.editColumn(props.id, {name: props.name, color: item, index: props.index, visible: props.visible}));
+                }}
+                className={`${item.toString()} color-picker__item-button`}
+              >
+                <div className={`column__header-color-option column__header-color-option--${item.toString()}`} />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </ReactFocusLock>
+  );
+};

src/components/Column/Column.tsx

@@ -173,9 +173,9 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
           <Close className="column__header-edit-button-icon" />
         </button>
       )}
-      {!isTemporary && (
+      {!isTemporary && !openedColumnSettings && (
         <button title={t("Column.settings")} className="column__header-edit-button" onClick={() => setOpenedColumnSettings((o) => !o)}>
-          {openedColumnSettings ? <Close className="column__header-edit-button-icon" /> : <ThreeDots className="column__header-edit-button-icon" />}
+          <ThreeDots className="column__header-edit-button-icon" style={{transform: "rotate(90deg)"}} /> {/* inline style to avoid funky rotating behaviour when hovering */}
         </button>
       )}
     </>
@@ -212,7 +212,7 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
                 {notes.length}
               </span>
             )}
-            {isModerator && renderColumnModifiers()}
+            {!openedColumnSettings && isModerator && renderColumnModifiers()}
             {openedColumnSettings && (
               <ColumnSettings
                 id={id}
@@ -222,6 +222,8 @@ export const Column = ({id, name, color, visible, index}: ColumnProps) => {
                 index={index}
                 onClose={() => setOpenedColumnSettings(false)}
                 onNameEdit={() => setColumnNameMode("EDIT")}
+                setOpenColumnSet={setOpenedColumnSettings}
+                closeColumnSettings={() => setOpenedColumnSettings(false)}
               />
             )}
           </div>

src/components/Column/ColumnSettings.scss

@@ -1,108 +1,5 @@
-@import "src/constants/style";
+@import "constants/style";
 
-.column__header-menu-dropdown {
-  position: absolute;
-  right: 0;
-  top: 75%;
-  width: 180px;
-  background-color: $gray--000;
-  border-radius: 8px;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
-  z-index: 150;
-}
-
-.column__header-menu-dropdown > ul {
-  list-style: none;
-  padding: $spacing--xs 0;
-  margin: 0;
-}
-
-.column__header-menu-dropdown > ul > li {
-  height: 32px;
-  padding: 0 $spacing--sm;
-  background-color: $gray--000;
-
-  &:hover {
-    filter: $darken--slightly;
-  }
-
-  &:focus-within {
-    background-color: $gray--200;
-  }
-}
-
-.column__header-menu-dropdown > ul > li > button {
-  cursor: pointer;
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: $text-size--small;
-}
-
-.column__header-menu-dropdown > ul > li > button > svg {
-  height: $icon--large;
-  width: $icon--large;
-}
-
-.column__header-menu-dropdown > ul > li:last-of-type {
-  height: auto;
-  padding: $spacing--xs $spacing--base;
-  display: flex;
-  justify-content: space-between;
-}
-
-.column__header-menu-dropdown > ul > li:last-child > button {
-  height: 18px;
-  width: 18px;
-  border-radius: 4px;
-  background-color: var(--accent-color--light);
-  transition: all 0.08s ease-out;
-
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px $navy--300;
-  }
-}
-
-// Hacky way to not show delete column button if it's the last column
-.column:only-of-type .column__header-menu-dropdown > ul > li:nth-child(5) {
-  display: none;
-}
-
-[theme="dark"] {
-  .column__header-menu-dropdown {
-    background-color: $navy--500;
-  }
-
-  .column__header-menu-dropdown > ul > li {
-    background-color: $navy--500;
-
-    &:hover {
-      filter: $brighten--slightly;
-    }
-
-    &:focus-within {
-      background-color: $navy--400;
-    }
-  }
-
-  .column__header-menu-dropdown > ul > li > button {
-    color: $gray--000;
-  }
-
-  .column__header-menu-dropdown > ul > li:last-child > button:focus-visible {
-    box-shadow: 0 0 0 2px $gray--000;
-  }
+.column-settings {
+  z-index: $menu-z-index;
 }