lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: add column color picker submenu with 10 preset colors

Browse Source
This commit is contained in:
Your Name
2026-02-15 20:29:18 +02:00
parent 1556529307
commit 0ef77bc470
1 changed files with 48 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/board/ColumnHeader.tsx
View File

@@ -20,6 +20,19 @@ interface ColumnHeaderProps {
boardColor?: string;
}
const COLOR_PRESETS = [
{ hue: "160", label: "Teal" },
{ hue: "240", label: "Blue" },
{ hue: "300", label: "Purple" },
{ hue: "350", label: "Pink" },
{ hue: "25", label: "Red" },
{ hue: "55", label: "Orange" },
{ hue: "85", label: "Yellow" },
{ hue: "130", label: "Lime" },
{ hue: "200", label: "Cyan" },
{ hue: "0", label: "Slate" },
];
export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProps) {
const [editing, setEditing] = useState(false);
const [editValue, setEditValue] = useState(column.title);
@@ -28,6 +41,7 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
const updateColumnTitle = useBoardStore((s) => s.updateColumnTitle);
const deleteColumn = useBoardStore((s) => s.deleteColumn);
const setColumnWidth = useBoardStore((s) => s.setColumnWidth);
const setColumnColor = useBoardStore((s) => s.setColumnColor);
useEffect(() => {
if (editing && inputRef.current) {
@@ -60,7 +74,13 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
}
return (
<div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3" style={{ borderTop: boardColor ? `3px solid ${boardColor}30` : undefined }}>
<div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3" style={{
borderTop: column.color
? `3px solid oklch(55% 0.12 ${column.color})`
: boardColor
? `3px solid ${boardColor}30`
: undefined
}}>
<div className="flex items-center gap-2 overflow-hidden">
{editing ? (
<input
@@ -129,6 +149,33 @@ export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProp
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Color</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem onClick={() => setColumnColor(column.id, null)}>
None
{column.color == null && (
<span className="ml-auto text-pylon-accent">*</span>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<div className="flex flex-wrap gap-1.5 px-2 py-1.5">
{COLOR_PRESETS.map(({ hue, label }) => (
<button
key={hue}
onClick={() => setColumnColor(column.id, hue)}
className="size-5 rounded-full transition-transform hover:scale-110"
style={{
backgroundColor: `oklch(55% 0.12 ${hue})`,
outline: column.color === hue ? "2px solid currentColor" : "none",
outlineOffset: "1px",
}}
title={label}
/>
))}
</div>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem
variant="destructive"