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}