Merge pull request #83 from sakihet/add-bg-color-to-board

add bg color feature
sakihet · Dec 21, 2023 · 0f9037e · 0f9037e
2 parents 38855de + 576bca5
commit 0f9037e
Show file tree

Hide file tree

Showing 14 changed files with 135 additions and 22 deletions.
diff --git a/src/applications/applicationService.ts b/src/applications/applicationService.ts
@@ -5,6 +5,7 @@ import { List } from "../types/list"
 import { State } from "../types/state"
 import { Card } from '../types/card'
 import { Pos } from '../types/pos'
+import { BgColor } from '../types/bgColor'
 
 const migrateState = (state: State): State => {
   const boardsUpdaetd = state.boards.map(b => {
@@ -24,6 +25,9 @@ const migrateState = (state: State): State => {
       })
       return { ...l, cards: cardsUpdated }
     })
+    if (!b.bgColor) {
+      b.bgColor = null
+    }
     return { ...b, lists: listsUpdated }
   })
   return { boards: boardsUpdaetd }
@@ -55,7 +59,7 @@ export class ApplicationService {
     return updated
   }
   // Board
-  createBoard(state: State, name: string, listNames: string[]): State {
+  createBoard(state: State, name: string, listNames: string[], bgColor: BgColor | null): State {
     const lists: List[] = listNames.map((listName) => {
       return {
         id: uuidv4(),
@@ -66,7 +70,8 @@ export class ApplicationService {
     const board: Board = {
       id: uuidv4(),
       name: name,
-      lists: lists
+      lists: lists,
+      bgColor: bgColor
     }
     const updated = { boards: [board, ...state.boards] }
     this.repository.set(updated)

diff --git a/src/components/BoardFormDialog.tsx b/src/components/BoardFormDialog.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "preact/hooks"
 import { JSX } from "preact/jsx-runtime"
+import { BgColor } from "../types/bgColor"
 
 type ListsType = 'None' | 'Preset'
 
@@ -11,12 +12,21 @@ export function BoardFormDialog(
   }: {
     open: boolean,
     handleClickMask: () => void,
-    addBoard: (name: string, listNames: string[]) => void
+    addBoard: (name: string, listNames: string[], bgColor: BgColor | null) => void
   }
 ) {
   const refName = useRef<HTMLInputElement>(null)
+  const [bgColor, setBgColor] = useState<BgColor | null>(null)
   const [listsType, setListsType] = useState<ListsType>("None")
 
+  const handleChangeBgColor = (e: JSX.TargetedMouseEvent<HTMLInputElement>) => {
+    if (e.currentTarget.value !== 'none') {
+      setBgColor(e.currentTarget.value as BgColor)
+    } else {
+      setBgColor(null)
+    }
+  }
+
   const handleChageLists = (e: JSX.TargetedEvent<HTMLInputElement>) => {
     setListsType(e.currentTarget.value as ListsType)
   }
@@ -26,7 +36,7 @@ export function BoardFormDialog(
     if (refName.current) {
       if (refName.current.value !== '') {
         const listNames = (listsType === "None") ? [] : ["Todo", "Doing", "Done"]
-        addBoard(refName.current.value, listNames)
+        addBoard(refName.current.value, listNames, bgColor)
         refName.current.value = ''
         handleClickMask()
       }
@@ -67,26 +77,61 @@ export function BoardFormDialog(
             </label>
             <div class="layout-stack-2">
               <div class="text-secondary text-small">Default lists</div>
-              <div class="flex-column border-none text-secondary text-small layout-stack-1">
+              <div class="flex-column border-none text-secondary text-small layout-stack-1 pl-2">
                 <label>
                   <input
                     type="radio"
                     value="None"
                     name="lists"
-                    class="w-6"
+                    class=""
                     checked={listsType === 'None'}
                     onClick={handleChageLists}
-                  />None
+                  />
+                  <span class="px-1">None</span>
                 </label>
                 <label>
                   <input
                     type="radio"
                     value="Preset"
                     name="lists"
-                    class="w-6"
+                    class=""
                     checked={listsType === 'Preset'}
                     onClick={handleChageLists}
-                  />Todo, Doing, Done
+                  />
+                  <span class="px-1">Todo, Doing, Done</span>
+                </label>
+              </div>
+            </div>
+            <div class="layout-stack-2">
+              <div class="text-secondary text-small">Color</div>
+              <div class="text-secondary text-small">
+                <label class="px-2 py-1">
+                  <input type="radio" name="bgColor" value="none" checked={!bgColor} onClick={handleChangeBgColor} />
+                  <span class="">None</span>
+                </label>
+                <label class="px-2 py-1 bg-red">
+                  <input type="radio" name="bgColor" value="red" checked={bgColor === 'red'} onClick={handleChangeBgColor} />
+                  <span class="">Red</span>
+                </label>
+                <label class="px-2 py-1 bg-yellow">
+                  <input type="radio" name="bgColor" value="yellow" checked={bgColor === 'yellow'} onClick={handleChangeBgColor} />
+                  <span class="">Yellow</span>
+                </label>
+                <label class="px-2 py-1 bg-green">
+                  <input type="radio" name="bgColor" value="green" checked={bgColor === 'green'} onClick={handleChangeBgColor} />
+                  <span class="">Green</span>
+                </label>
+                <label class="px-2 py-1 bg-blue">
+                  <input type="radio" name="bgColor" value="blue" checked={bgColor === 'blue'} onClick={handleChangeBgColor} />
+                  <span class="">Blue</span>
+                </label>
+                <label class="px-2 py-1 bg-cyan">
+                  <input type="radio" name="bgColor" value="cyan" checked={bgColor === 'cyan'} onClick={handleChangeBgColor} />
+                  <span class="">Cyan</span>
+                </label>
+                <label class="px-2 py-1 bg-magenta">
+                  <input type="radio" name="bgColor" value="magenta" checked={bgColor === 'magenta'} onClick={handleChangeBgColor} />
+                  <span class="">Magenta</span>
                 </label>
               </div>
             </div>

diff --git a/src/components/BoardHeader.tsx b/src/components/BoardHeader.tsx
@@ -63,7 +63,7 @@ export default function BoardHeader(
           : <div>{name}</div>
         }
       </h2>
-      <div class="w-6 h-6">
+      <div class="w-6 h-6 bg-primary">
         <details class="pattern-dropdown">
           <summary class="w-6 h-6 border-solid border-1 border-color-primary flex-column cursor-pointer">
             <div class="m-auto text-secondary">...</div>

diff --git a/src/components/BoardItem.tsx b/src/components/BoardItem.tsx
@@ -24,7 +24,7 @@ export default function BoardItem(
 ) {
   return (
     <div
-      class="flex-column h-20 bg-primary parent-hiding-child border-solid border-2 border-color-primary hover-bg-board-item"
+      class={`flex-column h-20 bg-primary parent-hiding-child border-solid border-2 border-color-primary hover-bg-board-item bg-${board.bgColor ? board.bgColor : 'primary'}`}
       draggable
       onDragEnd={handleDragEnd}
       onDragOver={handleDragOver}

diff --git a/src/components/PageBoard.tsx b/src/components/PageBoard.tsx
@@ -248,7 +248,7 @@ export default function PageBoard(
   })
 
   return (
-    <div class="flex-column h-full">
+    <div class={`flex-column h-full bg-${found?.bgColor ? found.bgColor : 'primary'}`}>
       {found &&
         <div class="px-3">
           <BoardHeader

diff --git a/src/components/PageComponents.tsx b/src/components/PageComponents.tsx
@@ -18,17 +18,20 @@ export default function PageComponents() {
   const board1: Board = {
     id: uuidv4(),
     name: 'Board 1',
-    lists: []
+    lists: [],
+    bgColor: null
   }
   const board2: Board = {
     id: uuidv4(),
     name: 'Board 2',
-    lists: []
+    lists: [],
+    bgColor: null
   }
   const board3: Board = {
     id: uuidv4(),
     name: 'Board 3',
-    lists: []
+    lists: [],
+    bgColor: null
   }
   const boards: Board[] = [
     board1, board2, board3

diff --git a/src/components/PageDebug.tsx b/src/components/PageDebug.tsx
@@ -49,7 +49,8 @@ export default function PageDebug({ appState }: { appState: Signal<State> }) {
               name: 'List 4',
               cards: createCards(46, 52)
             },
-          ]
+          ],
+          bgColor: null
         }
       ]
     }

diff --git a/src/components/PageIndex.tsx b/src/components/PageIndex.tsx
@@ -8,6 +8,7 @@ import { State } from '../types/state'
 import BoardList from './BoardList'
 import { Board } from '../types/board'
 import { BoardFormDialog } from './BoardFormDialog'
+import { BgColor } from '../types/bgColor'
 
 export default function PageIndex({ appState }: { appState: Signal<State> }) {
   const [draggingBoardId, setDraggingBoardId] = useState<string | undefined>(undefined)
@@ -17,8 +18,8 @@ export default function PageIndex({ appState }: { appState: Signal<State> }) {
   const service = new ApplicationService(repository)
   const inputFileElement = useRef<HTMLInputElement>(null)
 
-  const addBoard = (name: string, listNames: string[]) => {
-    appState.value = service.createBoard(appState.value, name, listNames)
+  const addBoard = (name: string, listNames: string[], bgColor: BgColor | null) => {
+    appState.value = service.createBoard(appState.value, name, listNames, bgColor)
   }
 
   const handleChangeImport = () => {

diff --git a/src/css/layout.css b/src/css/layout.css
@@ -22,6 +22,10 @@
   margin-top: 1rem;
 }
 
+.layout-stack-6>*+* {
+  margin-top: 1.5rem;
+}
+
 .layout-stack-8>*+* {
   margin-top: 2rem;
 }

diff --git a/src/css/token.css b/src/css/token.css
@@ -10,6 +10,14 @@
   --color-gray-700: #616161;
   --color-gray-800: #424242;
   --color-gray-900: #212121;
+  --color-red-light: rgba(255, 59, 48, 50%);
+  --color-red-dark: rgba(255, 69, 58, 50%);
+  --color-yellow-light: rgba(255, 204, 0, 50%);
+  --color-yellow-dark: rgba(255, 214, 10, 50%);
+  --color-green-light: rgba(40, 205, 65, 50%);
+  --color-green-dark: rgba(50, 215, 75, 50%);
+  --color-blue-light: rgba(0, 122, 255, 50%);
+  --color-blue-dark: rgba(10, 132, 255, 50%);
   --color-blue-50: #e3f2fd;
   --color-blue-100: #bbdefb;
   --color-blue-200: #90caf9;
@@ -20,6 +28,10 @@
   --color-blue-700: #1976d2;
   --color-blue-800: #1565c0;
   --color-blue-900: #0d47a1;
+  --color-cyan-light: rgba(85, 190, 240, 50%);
+  --color-cyan-dark: rgba(90, 200, 245, 50%);
+  --color-magenta-light: rgba(175, 82, 222, 50%);
+  --color-magenta-dark: rgba(191, 90, 242, 50%);
 }
 
 /* light */
@@ -28,7 +40,12 @@ body {
   --color-bg-link: var(--color-gray-100);
   --color-bg-primary: var(--color-white);
   --color-bg-secondary: var(--color-gray-100);
-  --color-bg-blue: var(--color-blue-200);
+  --color-bg-red: var(--color-red-light);
+  --color-bg-yellow: var(--color-yellow-light);
+  --color-bg-green: var(--color-green-light);
+  --color-bg-blue: var(--color-blue-light);
+  --color-bg-cyan: var(--color-cyan-light);
+  --color-bg-magenta: var(--color-magenta-light);
   --color-border-primary: var(--color-gray-300);
   --color-bg-scrollbar: var(--color-gray-300);
   --color-bg-scrollbar-thumb: var(--color-gray-500);
@@ -48,7 +65,12 @@ body {
   --color-bg-link: var(--color-gray-700);
   --color-bg-primary: var(--color-gray-800);
   --color-bg-secondary: var(--color-gray-900);
-  --color-bg-blue: var(--color-blue-700);
+  --color-bg-red: var(--color-red-dark);
+  --color-bg-yellow: var(--color-yellow-dark);
+  --color-bg-green: var(--color-green-dark);
+  --color-bg-blue: var(--color-blue-dark);
+  --color-bg-cyan: var(--color-cyan-dark);
+  --color-bg-magenta: var(--color-magenta-dark);
   --color-border-primary: var(--color-gray-600);
   --color-bg-scrollbar: var(--color-gray-700);
   --color-bg-scrollbar-thumb: var(--color-gray-500);

diff --git a/src/css/utility.css b/src/css/utility.css
@@ -234,6 +234,14 @@
   padding: 0;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-4 {
   padding-left: 1rem;
 }
@@ -416,10 +424,30 @@
   background-color: transparent;
 }
 
+.bg-red {
+  background-color: var(--color-bg-red);
+}
+
+.bg-yellow {
+  background-color: var(--color-bg-yellow);
+}
+
+.bg-green {
+  background-color: var(--color-bg-green);
+}
+
 .bg-blue {
   background-color: var(--color-bg-blue);
 }
 
+.bg-cyan {
+  background-color: var(--color-bg-cyan);
+}
+
+.bg-magenta {
+  background-color: var(--color-bg-magenta);
+}
+
 /* cursor */
 .cursor-grab {
   cursor: grab;

diff --git a/src/types/bgColor.ts b/src/types/bgColor.ts
@@ -0,0 +1 @@
+export type BgColor = "red" | "yellow" | "green" | "blue" | "cyan" | "magenta"
diff --git a/src/types/board.ts b/src/types/board.ts
@@ -1,7 +1,9 @@
+import { BgColor } from "./bgColor"
 import { List } from "./list"
 
 export type Board = {
   id: string
   name: string
   lists: List[]
+  bgColor: BgColor | null
 }
diff --git a/tests/applications/applicationService.test.ts b/tests/applications/applicationService.test.ts
@@ -48,7 +48,8 @@ describe('ApplicationService', () => {
               }
             ]
           }
-        ]
+        ],
+        bgColor: null
       }
     ]
   }
@@ -58,7 +59,7 @@ describe('ApplicationService', () => {
     service = new ApplicationService(repository)
   })
   it('createBoard', () => {
-    const updated = service.createBoard(state, 'board2', [])
+    const updated = service.createBoard(state, 'board2', [], null)
     expect(updated.boards.length).toEqual(2)
   })
   it('deleteBoard', () => {
-Original file line number
+Diff line change
@@ Expand Up @@
                   name: 'List 4',
                   cards: createCards(46, 52)
                 },
-              ]
+              ],
+              bgColor: null
             }
           ]
         }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type BgColor = "red" \| "yellow" \| "green" \| "blue" \| "cyan" \| "magenta"