Skip to content

Commit

Permalink
feat: add new column menu (#4428)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jakob Schwehn <[email protected]>
  • Loading branch information
@laila-rin @Schwehn42
laila-rin and Schwehn42 authored Sep 23, 2024
1 parent 23305cc commit 924662e
Show file tree
Hide file tree
Showing 13 changed files with 454 additions and 224 deletions.
114 changes: 114 additions & 0 deletions src/components/ColorPicker/ColorPicker.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
77 changes: 77 additions & 0 deletions src/components/ColorPicker/ColorPicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
8 changes: 5 additions & 3 deletions src/components/Column/Column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
</>
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
109 changes: 3 additions & 106 deletions src/components/Column/ColumnSettings.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 924662e

Please sign in to comment.