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

feat: add board background patterns (dots, grid, gradient) with settings dropdown

Browse Source
This commit is contained in:
Your Name
2026-02-15 20:32:43 +02:00
parent e5e9483a8e
commit fffa565423
2 changed files with 67 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/board/BoardView.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useRef, useEffect, useCallback } from "react";
import React, { useState, useRef, useEffect, useCallback } from "react";
import { Plus } from "lucide-react";
import {
DndContext,
@@ -30,6 +30,30 @@ function findColumnByCardId(board: Board, cardId: string) {
return board.columns.find((col) => col.cardIds.includes(cardId));
}
function getBoardBackground(board: Board): React.CSSProperties {
const bg = board.settings.background;
if (bg === "dots") {
return {
backgroundImage: `radial-gradient(circle, currentColor 1px, transparent 1px)`,
backgroundSize: "20px 20px",
color: "oklch(50% 0 0 / 5%)",
};
}
if (bg === "grid") {
return {
backgroundImage: `linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px)`,
backgroundSize: "24px 24px",
color: "oklch(50% 0 0 / 5%)",
};
}
if (bg === "gradient") {
return {
background: `linear-gradient(135deg, ${board.color}08, ${board.color}03, transparent)`,
};
}
return {};
}
export function BoardView() {
const board = useBoardStore((s) => s.board);
const addColumn = useBoardStore((s) => s.addColumn);
@@ -296,7 +320,7 @@ export function BoardView() {
items={columnIds}
strategy={horizontalListSortingStrategy}
>
<div className="flex h-full overflow-x-auto" style={{ gap: `calc(1.5rem * var(--density-factor))`, padding: `calc(1.5rem * var(--density-factor))` }}>
<div className="flex h-full overflow-x-auto" style={{ gap: `calc(1.5rem * var(--density-factor))`, padding: `calc(1.5rem * var(--density-factor))`, ...getBoardBackground(board) }}>
{board.columns.map((column) => (
<KanbanColumn
key={column.id}

42
src/components/layout/TopBar.tsx
View File

@@ -1,11 +1,20 @@
import { useState, useRef, useEffect, useCallback } from "react";
import { ArrowLeft, Settings, Search, Undo2, Redo2 } from "lucide-react";
import { ArrowLeft, Settings, Search, Undo2, Redo2, SlidersHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useAppStore } from "@/stores/app-store";
import { useBoardStore } from "@/stores/board-store";
@@ -158,6 +167,37 @@ export function TopBar() {
</Tooltip>
</>
)}
{isBoardView && board && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
className="text-pylon-text-secondary hover:text-pylon-text"
>
<SlidersHorizontal className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuSub>
<DropdownMenuSubTrigger>Background</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
{(["none", "dots", "grid", "gradient"] as const).map((bg) => (
<DropdownMenuItem
key={bg}
onClick={() => useBoardStore.getState().updateBoardSettings({ ...board.settings, background: bg })}
>
{bg.charAt(0).toUpperCase() + bg.slice(1)}
{board.settings.background === bg && (
<span className="ml-auto text-pylon-accent">*</span>
)}
</DropdownMenuItem>
))}
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>
)}
{savingStatus && (
<span className="mr-2 font-mono text-xs text-pylon-text-secondary">
{savingStatus}