refactor(kanban): set board bg

mdSilo · Mar 1, 2024 · 2d29dc2 · 2d29dc2
1 parent aba4673
commit 2d29dc2
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ Then you can find the app in `./src-tauri/target/release` folder.
 - Markdown and extensions: Diagram, Table, Math/Chemical, Code block(Highlight)...   
 - Slash commands, Hovering toolbar, hotkeys and more toolkits...   
 - Chronicle view, Graph view, Task view... 
+- Kanban to make personal knowledge base a serious project;  
 - Full-text search;  
 - Dark and Light Mode;  
 - Available for Windows, macOS, Linux;   
@@ -48,7 +49,7 @@ Then you can find the app in `./src-tauri/target/release` folder.
 
 - Editor Framework: [ProseMirror](https://prosemirror.net/)      
 - Frontend Framework: [React](https://reactjs.org/)  
-- Cross-platform: [Tauri](https://tauri.studio/) 
+- Cross-platform: [Tauri](https://tauri.app/) 
 
 ## Road map 
 
@@ -96,6 +97,7 @@ Then you can find the app in `./src-tauri/target/release` folder.
 
 - Organize writings
   - [X] Folder management 
+  - [X] Kanban board  
   - [X] Hashtag 
   - [X] Backlinks 
   - [X] Recent history 

diff --git a/src/components/kanban/Board.tsx b/src/components/kanban/Board.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   DndContext,
   DragEndEvent,
@@ -14,8 +14,10 @@ import {
 import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
 import { IconCircle, IconCircleX } from "@tabler/icons-react";
+import { convertFileSrc } from "@tauri-apps/api/tauri";
 import { genId } from "utils/helper";
-import { openFilePath } from "file/open";
+import { imageExtensions } from "utils/file-extensions";
+import { openFileDilog, openFilePath } from "file/open";
 import { BaseModal } from "components/settings/BaseModal";
 import { useCurrentViewContext } from "context/useCurrentView";
 import { Column, Id, Card, KanbanData } from "./types";
@@ -24,14 +26,16 @@ import TaskCard from "./Card";
 
 interface Props {
   initData: KanbanData, 
-  onKanbanChange: (columns: Column[], cards: Card[]) => void;
+  onKanbanChange: (columns: Column[], cards: Card[], color?: string, img?: string) => void;
 }
 
 export default function KanbanBoard({initData, onKanbanChange}: Props) {
   const [columns, setColumns] = useState<Column[]>(initData.columns);
   const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
 
   const [tasks, setTasks] = useState<Card[]>(initData.cards);
+  const [bgColor, setBgColor] = useState(initData.bgColor);
+  const [bgImg, setBgImg] = useState(initData.bgImg);
 
   const [activeColumn, setActiveColumn] = useState<Column | null>(null);
   const [activeTask, setActiveTask] = useState<Card | null>(null);
@@ -288,8 +292,35 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
     onKanbanChange(columns, newTasks);
   }
 
+  function setBoardBgColor(color?: string) {
+    setBgColor(color);
+    onKanbanChange(columns, tasks, color, bgImg);
+  }
+
+  const setBoardBgImg = useCallback(
+    async () => {
+      const ext = imageExtensions;
+      const filePath = await openFileDilog(ext, false);
+      const img = filePath && typeof filePath === 'string'
+        ? convertFileSrc(filePath)
+        : "";
+      setBgImg(img);
+      onKanbanChange(columns, tasks, bgColor, img);
+    },
+    [bgColor, columns, onKanbanChange, tasks]
+  );
+
   return (
-    <div className="flex h-full w-full items-center overflow-x-auto overflow-y-hidden px-4">
+    <div 
+      className="flex h-full min-h-[calc(100vh-5rem)] w-full items-center overflow-x-auto overflow-y-hidden px-4"
+      style={{
+        backgroundColor: bgColor, 
+        backgroundImage: `url(${bgImg})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center',
+      }}
+    >
       <DndContext
         sensors={sensors}
         onDragStart={onDragStart}
@@ -315,12 +346,23 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
               ))}
             </SortableContext>
           </div>
-          <button 
-            className="flex-none btn h-8 min-w-24 flex items-center mt-[4rem]" 
-            onClick={createNewColumn}
-          >
-            + Add Column
-          </button>
+          <div className="flex flex-col items-start justify-start mt-[4rem]">
+            <button 
+              className="flex-none pop-btn h-8 min-w-24" 
+              onClick={createNewColumn}
+            >
+              + Add Column
+            </button>
+            <button className="mt-2 flex-none pop-btn h-8 min-w-24" onClick={setBoardBgImg}>
+              + Board Image
+            </button>
+            <input 
+              type="color" 
+              className="mt-2 border-none outline-none rounded" 
+              style={{width: '7em'}}
+              onChange={e => {setBoardBgColor(e.target.value);}} 
+            />
+          </div>
         </div>
 
         {createPortal(
@@ -348,21 +390,23 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
         )}
       </DndContext>
       <BaseModal 
-        title={`Column: ${colSetting?.title || ""}`} 
+        title="Column"
         isOpen={isColSetting} 
         handleClose={() => setIsColSetting(false)}
       >
-        <div className="flex-1 p-2 bg-gray-100">
+        <div className="flex-1 p-1 bg-gray-100">
+          <div className="bg-gray-200 text-black rounded mb-2">{colSetting?.title || ""}</div>
           <div className="font-bold text-center">Set Color</div>
           <SetColor id={colSetting?.id || ""} setColor={setColumnColor} />
         </div>
       </BaseModal>
       <BaseModal 
-        title={`Card: ${cardSetting?.content.substring(0, 24) || ""}`} 
+        title="Card"
         isOpen={isCardSetting} 
         handleClose={() => setIsCardSetting(false)}
       >
-        <div className="flex-1 p-2 bg-gray-100 flex flex-col">
+        <div className="flex-1 p-1 bg-gray-100 flex flex-col">
+          <div className="bg-gray-200 text-black rounded">{cardSetting?.content || ""}</div>
           <div className="flex flex-col items-start justify-start mb-4">
             {cardSetting?.items?.map(itm => (
               <div key={itm.uri} className="flex items-center justify-start w-full py-1">

diff --git a/src/components/kanban/Card.tsx b/src/components/kanban/Card.tsx
@@ -59,7 +59,7 @@ export default function TaskCard({ task, updateTask, openSetCard }: Props) {
       <div
         ref={setNodeRef}
         style={style}
-        className="p-2.5 h-[100px] items-center flex text-left rounded-xl border-2 border-green-500 cursor-grab relative"
+        className="p-2 h-[100px] flex text-left border-2 border-green-500 cursor-grab relative"
       />
     );
   }
@@ -71,7 +71,7 @@ export default function TaskCard({ task, updateTask, openSetCard }: Props) {
         style={style}
         {...attributes}
         {...listeners}
-        className="p-2.5 h-[100px] min-h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-green-500 cursor-grab relative"
+        className="p-2 h-[100px] items-center flex text-left hover:ring-2 hover:ring-inset hover:ring-purple-500 relative"
       >
         <textarea
           className="h-[90%] w-full resize-none border-none rounded bg-transparent text-white focus:outline-none"
@@ -95,7 +95,7 @@ export default function TaskCard({ task, updateTask, openSetCard }: Props) {
       {...attributes}
       {...listeners}
       onClick={toggleEditMode}
-      className="p-2 h-[100px] items-center flex text-left rounded-xl hover:ring-2 hover:ring-inset hover:ring-green-500 cursor-grab relative rounded-xl"
+      className="p-2 h-[100px] items-center flex text-left rounded hover:ring-2 hover:ring-inset hover:ring-green-500 cursor-grab relative"
       onMouseEnter={() => {setMouseIsOver(true);}}
       onMouseLeave={() => {setMouseIsOver(false);}}
     >

diff --git a/src/components/kanban/Column.tsx b/src/components/kanban/Column.tsx
@@ -62,7 +62,7 @@ export default function ColumnContainer({
       <div
         ref={setNodeRef}
         style={style}
-        className="bg-active opacity-40 border-2 border-pink-500 w-[350px] h-[500px] rounded-md flex flex-col"
+        className="opacity-40 border-2 border-pink-500 w-[350px] h-[500px] flex flex-col"
       ></div>
     );
   }
@@ -71,7 +71,7 @@ export default function ColumnContainer({
     <div
       ref={setNodeRef}
       style={style}
-      className="w-[350px] h-full h-[calc(100vh-5rem)] pb-4 my-6 rounded-md flex flex-col"
+      className="w-[350px] max-h-[calc(100vh-5rem)] pb-4 my-6 rounded-md flex flex-col"
     >
       {/* Column title */}
       <div
@@ -80,7 +80,7 @@ export default function ColumnContainer({
         onClick={() => {setEditMode(true);}}
         onMouseEnter={() => {setMouseIsOver(true);}}
         onMouseLeave={() => {setMouseIsOver(false);}}
-        className="p-2 mb-2 text-lg h-[60px] cursor-grab rounded-md font-bold flex items-center justify-between" 
+        className="p-2 mb-2 text-xl h-[60px] cursor-grab rounded-md rounded-b-none font-bold flex items-center justify-between" 
         style={{color: column.ftColor || "white", backgroundColor: column.hdColor || "#40A3BF"}}
       >
         <div className="flex gap-2 flex-1">

diff --git a/src/components/kanban/types.ts b/src/components/kanban/types.ts
@@ -26,6 +26,8 @@ export type CardItem = {
 export type KanbanData = {
   columns: Column[];
   cards: Card[];
+  bgColor?: string;
+  bgImg?: string;
 };
 
-export type Kanbans = Record<string, KanbanData>;
+export type Kanbans = Record<string, KanbanData>; // {name: data}
diff --git a/src/components/sidebar/SidebarHeader.tsx b/src/components/sidebar/SidebarHeader.tsx
@@ -74,7 +74,7 @@ export default function SidebarHeader() {
             }}
           >
             <IconCurrentLocation size={18} className="mr-1" />
-            <span>Open Local mdsilo</span>
+            <span>Local mdsilo</span>
           </DropdownItem>
         </Menu.Items>
       </Menu>

diff --git a/src/components/sidebar/SidebarTab.tsx b/src/components/sidebar/SidebarTab.tsx
@@ -16,7 +16,7 @@ const SidebarTab = (
   return (
     <button
       ref={forwardedRef}
-      className={`flex justify-center flex-1 py-1 px-4 rounded-t hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-600 border-b-2  dark:border-gray-700 ${
+      className={`flex justify-center flex-1 py-1.5 px-4 rounded-t hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-600 border-b-2  dark:border-gray-700 ${
         isActive ? 'border-b-green-700 dark:border-b-green-600' : ''
       } ${className}`}
       onClick={setActive}

diff --git a/src/components/view/MainView.tsx b/src/components/view/MainView.tsx
@@ -61,7 +61,7 @@ A lightweight, local-first personal Wiki and knowledge base for storing ideas, t
   - 📝 Markdown and extensions: Math/Chemical Equation, Diagram, Hashtag...   
   - 🗄️ Build personal wiki with bidirectional wiki links 
   - ⌨️ Slash commands, Hotkeys and Hovering toolbar...  
-  - 📋 Kanban board to make the knowledge growing a project   
+  - 📋 Kanban board to manage the process of knowledge growing   
   - 🕸️ Graph view to visualize the networked writing  
   - 📅 Chronicle view and Daily activities graph  
   - ✔️ Task view to track todo/doing/done  

diff --git a/src/components/view/kanban.tsx b/src/components/view/kanban.tsx
@@ -28,10 +28,16 @@ export default function Kanban() {
   }, [initDir]);
 
   const onKanbanChange = useCallback(
-    async (columns: Column[], cards: Card[]) => {
+    async (columns: Column[], cards: Card[], bgColor?: string, bgImg?: string) => {
       const saveFile = new FileAPI('kanban.json', initDir);
-      const newData = {columns, cards};
       const name = currentKanban || "default";
+      const oldData = kanbans[name];
+      const newData = {
+        columns, 
+        cards, 
+        bgColor: bgColor || oldData.bgColor,
+        bgImg: bgImg || oldData.bgImg,
+      };
       kanbans[name] = newData;
       await saveFile.writeFile(JSON.stringify(kanbans));
     },