Creating skelaton for preferences and fixed a bug

raguay · Jun 28, 2024 · 335f0f9 · 335f0f9
1 parent 50e9d8c
commit 335f0f9
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/frontend/src/components/BoardPref.svelte b/frontend/src/components/BoardPref.svelte
@@ -9,7 +9,6 @@
   let colorchange = "";
   let colorID = 0;
   let showPicker = false;
-  let pickerType = "";
   let explanation;
 
   onMount(() => {});
@@ -48,12 +47,10 @@
     <label class="variousPickerLabel2">{prefs.unselectTabColor}</label>
   </div>
   <ColorPicker
-    item={pickerType}
     explainText={explanation}
     color={colorchange}
     id={colorID}
     show={showPicker}
-    theme={prefs}
     on:colorChanged={(event) => {
       setColor(event.detail.data.id, event.detail.data.color);
     }}

diff --git a/frontend/src/components/ColorPicker.svelte b/frontend/src/components/ColorPicker.svelte
@@ -1,13 +1,13 @@
 <script>
   import { createEventDispatcher, afterUpdate } from "svelte";
   import { KellyColorPicker } from "./html5kellycolorpicker.js";
+  import { Kanban } from "../stores/Kanban.js";
+  import { boardCursor } from "../stores/boardCursor.js";
 
   export let color = "";
   export let id = 0;
   export let show = false;
-  export let item = "circle";
   export let explainText = "";
-  export let theme = {};
 
   let canvas;
   let input;
@@ -53,7 +53,11 @@
 {#if show}
   <div
     id="colorPicker"
-    style="background-color: {theme.backgroundcolor}; font-family: {theme.font}; color: {theme.textColor}; font-size: {theme.fontSize};"
+    style="background-color: {$Kanban.boards[$boardCursor].styles
+      .commandbarbgcolor}; font-family: {$Kanban.boards[$boardCursor].styles
+      .font}; color: {$Kanban.boards[$boardCursor].styles
+      .commandbartextcolor}; font-size: {$Kanban.boards[$boardCursor].styles
+      .fontsize};"
   >
     <p>The color for {explainText}:</p>
     <canvas id="picker" bind:this={canvas}></canvas><br />
@@ -69,15 +73,23 @@
       on:click={(event) => {
         saveColor();
       }}
-      style="background-color: {theme.textAreaColor}; font-family: {theme.font}; color: {theme.textColor}; font-size: {theme.fontSize};"
+      style="background-color: {$Kanban.boards[$boardCursor].styles
+        .commandbarbgcolor}; font-family: {$Kanban.boards[$boardCursor].styles
+        .font}; color: {$Kanban.boards[$boardCursor].styles
+        .commandbartextcolor}; font-size: {$Kanban.boards[$boardCursor].styles
+        .fontsize};"
     >
       Select
     </button>
     <button
       on:click={(event) => {
         quitColorPicker();
       }}
-      style="background-color: {theme.textAreaColor}; font-family: {theme.font}; color: {theme.textColor}; font-size: {theme.fontSize};"
+      style="background-color: {$Kanban.boards[$boardCursor].styles
+        .commandbarbgcolor}; font-family: {$Kanban.boards[$boardCursor].styles
+        .font}; color: {$Kanban.boards[$boardCursor].styles
+        .commandbartextcolor}; font-size: {$Kanban.boards[$boardCursor].styles
+        .fontsize};"
     >
       Quit
     </button>

diff --git a/frontend/src/components/Preferences.svelte b/frontend/src/components/Preferences.svelte
@@ -40,6 +40,10 @@
       state = 0;
       original = $Kanban.boards[$boardCursor].styles;
     }
+
+    //
+    // Make a copy for the preferences to use in the dialog.
+    //
     prefs = { ...original };
     return () => {
       //

diff --git a/frontend/src/stores/Kanban.js b/frontend/src/stores/Kanban.js
@@ -75,6 +75,7 @@ const DefaultKanban = {
     //
     // Make sure all the boards, lists, and items have the right styles.
     //
+    /*
     this.boards.forEach((board) => {
       board.styles = this.defaultStyles;
       board.lists.forEach((list) => {
@@ -84,6 +85,7 @@ const DefaultKanban = {
         });
       });
     });
+    */
     this.SaveKanbanBoards();
   },
   addBoard: async function () {