From 5c53956e6ea713f32cb597c8096f068e55e81362 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 27 Oct 2022 22:16:33 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/6357

---
 app/appearance/langs/en_US.json    |   1 -
 app/appearance/langs/es_ES.json    |   1 -
 app/appearance/langs/fr_FR.json    |   1 -
 app/appearance/langs/zh_CHT.json   |   1 -
 app/appearance/langs/zh_CN.json    |   1 -
 app/src/config/appearance.ts       | 141 ++++++-----------------------
 app/src/config/util/colorPicker.ts |  72 +++++++++++++++
 app/src/index.ts                   |   3 +
 8 files changed, 104 insertions(+), 117 deletions(-)

diff --git a/app/appearance/langs/en_US.json b/app/appearance/langs/en_US.json
index 77db371c8..3fc90fabb 100644
--- a/app/appearance/langs/en_US.json
+++ b/app/appearance/langs/en_US.json
@@ -510,7 +510,6 @@
   "--b3-protyle-inline-mark-color": "Mark",
   "--b3-protyle-inline-tag-color": "Tag",
   "--b3-protyle-inline-blockref-color": "Block Ref",
-  "open": "Turn on",
   "sync": "Sync",
   "syncNow": "Sync now",
   "cloudBook": "Cloud Notebook",
diff --git a/app/appearance/langs/es_ES.json b/app/appearance/langs/es_ES.json
index 663d01f5e..24d0c4cfe 100644
--- a/app/appearance/langs/es_ES.json
+++ b/app/appearance/langs/es_ES.json
@@ -510,7 +510,6 @@
   "--b3-protyle-inline-mark-color": "Marca",
   "--b3-protyle-inline-tag-color": "Etiqueta",
   "--b3-protyle-inline-blockref-color": "Bloque Ref",
-  "open": "Encender",
   "sync": "Sincronización",
   "syncNow": "Sincronizar ahora",
   "cloudBook": "Cuaderno de notas en la nube",
diff --git a/app/appearance/langs/fr_FR.json b/app/appearance/langs/fr_FR.json
index c828a51b2..7067a54fe 100644
--- a/app/appearance/langs/fr_FR.json
+++ b/app/appearance/langs/fr_FR.json
@@ -510,7 +510,6 @@
   "--b3-protyle-inline-mark-color": "Marqueur",
   "--b3-protyle-inline-tag-color": "Tag",
   "--b3-protyle-inline-blockref-color": "Ref Bloc",
-  "open": "Allumer",
   "sync": "Synchro",
   "syncNow": "Synchro maintenant",
   "cloudBook": "Carnet de notes du Cloud",
diff --git a/app/appearance/langs/zh_CHT.json b/app/appearance/langs/zh_CHT.json
index 07c45d92e..4fcfb3e37 100644
--- a/app/appearance/langs/zh_CHT.json
+++ b/app/appearance/langs/zh_CHT.json
@@ -510,7 +510,6 @@
   "--b3-protyle-inline-mark-color": "標記",
   "--b3-protyle-inline-tag-color": "標籤",
   "--b3-protyle-inline-blockref-color": "引用塊",
-  "open": "開啟",
   "sync": "同步",
   "syncNow": "立即同步",
   "cloudBook": "雲端筆記本",
diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json
index 967eb9e41..85da7395b 100644
--- a/app/appearance/langs/zh_CN.json
+++ b/app/appearance/langs/zh_CN.json
@@ -510,7 +510,6 @@
   "--b3-protyle-inline-mark-color": "标记",
   "--b3-protyle-inline-tag-color": "标签",
   "--b3-protyle-inline-blockref-color": "引用块",
-  "open": "开启",
   "sync": "同步",
   "syncNow": "立即同步",
   "cloudBook": "云端笔记本",
diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts
index 3a2ba4eae..daa72ddcb 100644
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@@ -4,12 +4,12 @@ import * as path from "path";
 /// #endif
 import {Constants} from "../constants";
 import {exportLayout} from "../layout/util";
-import * as Pickr from "@simonwep/pickr";
 import {isBrowser} from "../util/functions";
 import {fetchPost} from "../util/fetch";
 import {loadAssets} from "../util/assets";
 import {genOptions} from "../util/genOptions";
 import {openSnippets} from "./util/snippets";
+import {openColorPicker} from "./util/colorPicker";
 
 export const appearance = {
     element: undefined as Element,
@@ -117,28 +117,31 @@ export const appearance = {
         <svg><use xlink:href="#iconUndo"></use></svg>${window.siyuan.languages.reset}
     </button>
 </label>
-<div class="b3-label">
-    <label class="fn__block fn__flex">
-        <div class="fn__flex-1">
-            ${window.siyuan.languages.theme13} <b id="appearanceCustomName">${window.siyuan.config.appearance.mode === 0 ? window.siyuan.config.appearance.themeLight : window.siyuan.config.appearance.themeDark}</b>
-            <div class="b3-label__text">${window.siyuan.languages.theme14}</div>
-        </div>
-        <span class="fn__space"></span>
-        <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="appearanceCustom">${window.siyuan.config.appearance.customCSS ? window.siyuan.languages.close : window.siyuan.languages.open}</button>
-    </label>
-    <div id="appearanceCustomPanel"></div>
-</div>
-<div class="b3-label">
-    <label class="fn__block fn__flex">
-        <div class="fn__flex-1 fn__flex-center">
-            ${window.siyuan.languages.codeSnippet}
-        </div>
-        <span class="fn__space"></span>
-        <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="codeSnippet">
-            <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
-        </button>
-    </label>
-</div>
+<label class="b3-label fn__flex">
+    <div class="fn__flex-1 fn__flex-center">
+        ${window.siyuan.languages.codeSnippet}
+    </div>
+    <span class="fn__space"></span>
+    <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="codeSnippet">
+        <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
+    </button>
+</label>
+<label class="b3-label fn__flex">
+    <div class="fn__flex-1 fn__flex-center">
+        ${window.siyuan.languages.theme13} 
+    </div>
+    <span class="fn__space"></span>
+    <button class="b3-button b3-button--outline fn__size200" id="appearanceCustomSetting">
+        <svg><use xlink:href="#iconFormat"></use></svg>${window.siyuan.languages.custom}
+    </button> 
+</label>
+<label class="b3-label fn__flex">
+    <div class="fn__flex-1 fn__flex-center">
+        ${window.siyuan.languages.theme14}
+    </div>
+    <span class="fn__space"></span>
+    <input class="b3-switch fn__flex-center" id="appearanceCustom" type="checkbox"${window.siyuan.config.appearance.customCSS ? " checked" : ""}>
+</label>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.appearance14}
@@ -164,63 +167,6 @@ export const appearance = {
     <input class="b3-switch fn__flex-center" id="closeButtonBehavior" type="checkbox"${window.siyuan.config.appearance.closeButtonBehavior === 0 ? "" : " checked"}>
 </label>`;
     },
-    onGetcustomcss: (data: Record<string, Record<string, string>>) => {
-        let customHTML = '<div class="fn__hr"></div>';
-        Object.keys(data).forEach((item) => {
-            customHTML += `<div class="fn__hr"></div><div>${window.siyuan.languages[item]}</div><div class="fn__hr"></div>`;
-            Object.keys(data[item]).forEach(subItem => {
-                customHTML += `<div class="fn__flex">
-    <span class="colorPicker" data-key="${item}" data-subkey="${subItem}" data-value="${data[item][subItem]}"></span>
-    <span class="fn__space"></span>
-    <span class="ft__on-surface fn__flex-center">${window.siyuan.languages[subItem]}</span>
-</div><div class="fn__hr"></div>`;
-            });
-        });
-        appearance.element.querySelector("#appearanceCustomPanel").innerHTML = customHTML;
-        const pickrs: Record<string, Record<string, any>> = {};
-        appearance.element.querySelectorAll("#appearanceCustomPanel .colorPicker").forEach((item: HTMLInputElement) => {
-            // @ts-ignore
-            const pickr = Pickr.create({
-                container: "#appearanceCustomPanel",
-                el: item,
-                theme: "nano",
-                default: item.getAttribute("data-value"),
-                comparison: false,
-                components: {
-                    preview: true,
-                    opacity: true,
-                    hue: true,
-                    interaction: {
-                        input: true,
-                    }
-                }
-            });
-            pickr.on("hide", () => {
-                appearance._sendCustomcss(pickrs);
-            });
-            pickr.on("changestop", () => {
-                appearance._sendCustomcss(pickrs);
-            });
-            const key = item.getAttribute("data-key");
-            if (!pickrs[key]) {
-                pickrs[key] = {};
-            }
-            pickrs[key][item.getAttribute("data-subkey")] = pickr;
-        });
-    },
-    _sendCustomcss: (pickrs: Record<string, Record<string, any>>) => {
-        const css: Record<string, Record<string, string>> = {};
-        Object.keys(pickrs).forEach((item) => {
-            css[item] = {};
-            Object.keys(pickrs[item]).forEach(subItem => {
-                css[item][subItem] = pickrs[item][subItem].getColor().toRGBA().toString(0);
-            });
-        });
-        fetchPost("/api/setting/setCustomCSS", {
-            theme: appearance.element.querySelector("#appearanceCustomName").textContent,
-            css
-        });
-    },
     _send: () => {
         const themeLight = (appearance.element.querySelector("#themeLight") as HTMLSelectElement).value;
         const themeDark = (appearance.element.querySelector("#themeDark") as HTMLSelectElement).value;
@@ -237,7 +183,7 @@ export const appearance = {
             lightThemes: window.siyuan.config.appearance.lightThemes,
             icons: window.siyuan.config.appearance.icons,
             lang: (appearance.element.querySelector("#lang") as HTMLSelectElement).value,
-            customCSS: window.siyuan.config.appearance.customCSS,
+            customCSS: (appearance.element.querySelector("#appearanceCustom") as HTMLInputElement).checked,
             closeButtonBehavior: (appearance.element.querySelector("#closeButtonBehavior") as HTMLInputElement).checked ? 1 : 0,
             nativeEmoji: (appearance.element.querySelector("#nativeEmoji") as HTMLInputElement).checked,
             hideStatusBar: (appearance.element.querySelector("#hideStatusBar") as HTMLInputElement).checked,
@@ -264,32 +210,11 @@ export const appearance = {
         });
     },
     bindEvent: () => {
-        if (window.siyuan.config.appearance.customCSS) {
-            fetchPost("/api/setting/getCustomCSS", {
-                theme: appearance.element.querySelector("#appearanceCustomName").textContent
-            }, response => {
-                appearance.onGetcustomcss(response.data);
-            });
-        }
         appearance.element.querySelector("#codeSnippet").addEventListener("click", () => {
             openSnippets()
         });
-        const appearanceCustomElement = appearance.element.querySelector("#appearanceCustom");
-        appearanceCustomElement.addEventListener("click", () => {
-            if (window.siyuan.config.appearance.customCSS) {
-                window.siyuan.config.appearance.customCSS = false;
-                appearanceCustomElement.textContent = window.siyuan.languages.open;
-                appearance.element.querySelector("#appearanceCustomPanel").innerHTML = "";
-            } else {
-                window.siyuan.config.appearance.customCSS = true;
-                fetchPost("/api/setting/getCustomCSS", {
-                    theme: appearance.element.querySelector("#appearanceCustomName").textContent
-                }, response => {
-                    appearance.onGetcustomcss(response.data);
-                });
-                appearanceCustomElement.textContent = window.siyuan.languages.close;
-            }
-            appearance._send();
+        appearance.element.querySelector("#appearanceCustomSetting").addEventListener("click", () => {
+            openColorPicker()
         });
         appearance.element.querySelector("#resetLayout").addEventListener("click", () => {
             fetchPost("/api/system/setUILayout", {layout: {}}, () => {
@@ -336,7 +261,6 @@ export const appearance = {
                 } else {
                     modeElement.value = data.mode === 0 ? "0" : "1";
                 }
-                appearance.element.querySelector("#appearanceCustomName").textContent = theme;
             }
             const themeLightElement = appearance.element.querySelector("#themeLight") as HTMLSelectElement;
             if (themeLightElement) {
@@ -350,13 +274,6 @@ export const appearance = {
             if (iconElement) {
                 iconElement.innerHTML = genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon);
             }
-            if (data.customCSS) {
-                fetchPost("/api/setting/getCustomCSS", {
-                    theme
-                }, response => {
-                    appearance.onGetcustomcss(response.data);
-                });
-            }
         }
         /// #if !BROWSER
         ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, data.modeOS ? "system" : (data.mode === 1 ? "dark" : "light"));
diff --git a/app/src/config/util/colorPicker.ts b/app/src/config/util/colorPicker.ts
index e69de29bb..e97cbcc14 100644
--- a/app/src/config/util/colorPicker.ts
+++ b/app/src/config/util/colorPicker.ts
@@ -0,0 +1,72 @@
+import {fetchPost} from "../../util/fetch";
+import {Dialog} from "../../dialog";
+import * as Pickr from "@simonwep/pickr";
+
+export const openColorPicker = () => {
+    const theme = window.siyuan.config.appearance.mode === 0 ? window.siyuan.config.appearance.themeLight : window.siyuan.config.appearance.themeDark
+    fetchPost("/api/setting/getCustomCSS", {
+        theme
+    }, response => {
+        let customHTML = '<div class="fn__hr"></div>';
+        Object.keys(response.data).forEach((item) => {
+            customHTML += `<div class="fn__hr"></div><div>${window.siyuan.languages[item]}</div><div class="fn__hr"></div>`;
+            Object.keys(response.data[item]).forEach(subItem => {
+                customHTML += `<div class="fn__flex">
+    <span class="colorPicker" data-key="${item}" data-subkey="${subItem}" data-value="${response.data[item][subItem]}"></span>
+    <span class="fn__space"></span>
+    <span class="ft__on-surface fn__flex-center">${window.siyuan.languages[subItem]}</span>
+</div><div class="fn__hr"></div>`;
+            });
+        });
+        const dialog = new Dialog({
+            width: "70vw",
+            title: `${window.siyuan.languages.theme13}  <b>${theme}</b>`,
+            content: `<div class="b3-dialog__content" style="height: 60vh;overflow: auto" id="appearanceCustomPanel">${customHTML}</div>
+   <div class="b3-dialog__action">
+    <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
+    <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
+</div>`
+        })
+        const pickrs: Record<string, Record<string, any>> = {};
+        dialog.element.querySelectorAll(".colorPicker").forEach((item: HTMLInputElement) => {
+            // @ts-ignore
+            const pickr = Pickr.create({
+                container: "#appearanceCustomPanel",
+                el: item,
+                theme: "nano",
+                default: item.getAttribute("data-value"),
+                comparison: false,
+                components: {
+                    preview: true,
+                    opacity: true,
+                    hue: true,
+                    interaction: {
+                        input: true,
+                    }
+                }
+            });
+            const key = item.getAttribute("data-key");
+            if (!pickrs[key]) {
+                pickrs[key] = {};
+            }
+            pickrs[key][item.getAttribute("data-subkey")] = pickr;
+        });
+        dialog.element.querySelector(".b3-button--cancel").addEventListener("click", () => {
+            dialog.destroy()
+        })
+        dialog.element.querySelector(".b3-button--text").addEventListener("click", () => {
+            const css: Record<string, Record<string, string>> = {};
+            Object.keys(pickrs).forEach((item) => {
+                css[item] = {};
+                Object.keys(pickrs[item]).forEach(subItem => {
+                    css[item][subItem] = pickrs[item][subItem].getColor().toRGBA().toString(0);
+                });
+            });
+            fetchPost("/api/setting/setCustomCSS", {
+                theme,
+                css
+            });
+            dialog.destroy()
+        });
+    });
+}
diff --git a/app/src/index.ts b/app/src/index.ts
index f45cc17ca..849a73bbc 100644
--- a/app/src/index.ts
+++ b/app/src/index.ts
@@ -63,6 +63,9 @@ class App {
                                 document.querySelector("#barSync").setAttribute("aria-label", data.msg);
                                 break;
                             case "refreshtheme":
+                                if (!window.siyuan.config.appearance.customCSS && data.data.theme.indexOf("custom.css") > -1) {
+                                    return;
+                                }
                                 if ((window.siyuan.config.appearance.mode === 1 && window.siyuan.config.appearance.themeDark !== "midnight") || (window.siyuan.config.appearance.mode === 0 && window.siyuan.config.appearance.themeLight !== "daylight")) {
                                     (document.getElementById("themeStyle") as HTMLLinkElement).href = data.data.theme;
                                 } else {