From 18aa61a0f88e94d9c79c13bca54b71a7054a6a30 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sat, 19 Mar 2022 17:20:52 +0800
Subject: [PATCH] feat(fe/settings): add theme preference

---
 src/client/web/src/client/index.ts            |  1 +
 src/client/web/src/client/users_mock.ts       |  1 +
 .../components/__test__/pane_login.test.tsx   |  1 +
 .../components/__test__/state_mgr.test.tsx    |  2 +
 .../src/components/__test__/topbar.test.tsx   |  1 +
 src/client/web/src/components/core_state.ts   |  3 +-
 .../web/src/components/pane_settings.tsx      | 45 +++++++++++++++++++
 src/client/web/src/components/root_frame.tsx  |  6 ++-
 .../web/src/components/state_updater.ts       |  5 +++
 src/client/web/src/i18n/en_US.ts              |  9 ++--
 src/client/web/src/i18n/zh_CN.ts              | 11 +++--
 11 files changed, 75 insertions(+), 10 deletions(-)

diff --git a/src/client/web/src/client/index.ts b/src/client/web/src/client/index.ts
index b3d598b..7c1ccce 100644
--- a/src/client/web/src/client/index.ts
+++ b/src/client/web/src/client/index.ts
@@ -27,6 +27,7 @@ export interface Preferences {
   cssURL: string;
   lanPackURL: string;
   lan: string;
+  theme: string;
 }
 
 export interface User {
diff --git a/src/client/web/src/client/users_mock.ts b/src/client/web/src/client/users_mock.ts
index ebc8f5b..dca0cda 100644
--- a/src/client/web/src/client/users_mock.ts
+++ b/src/client/web/src/client/users_mock.ts
@@ -93,6 +93,7 @@ export const resps = {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     },
   },
diff --git a/src/client/web/src/components/__test__/pane_login.test.tsx b/src/client/web/src/components/__test__/pane_login.test.tsx
index 0142e2d..2775a14 100644
--- a/src/client/web/src/components/__test__/pane_login.test.tsx
+++ b/src/client/web/src/components/__test__/pane_login.test.tsx
@@ -97,6 +97,7 @@ describe("Login", () => {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     });
 
diff --git a/src/client/web/src/components/__test__/state_mgr.test.tsx b/src/client/web/src/components/__test__/state_mgr.test.tsx
index ebc7734..996fc8d 100644
--- a/src/client/web/src/components/__test__/state_mgr.test.tsx
+++ b/src/client/web/src/components/__test__/state_mgr.test.tsx
@@ -113,6 +113,7 @@ describe("State Manager", () => {
         cssURL: "cssURL",
         lanPackURL: "lanPackURL",
         lan: "en_US",
+        theme: "light",
       },
     });
 
@@ -329,6 +330,7 @@ describe("State Manager", () => {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     });
 
diff --git a/src/client/web/src/components/__test__/topbar.test.tsx b/src/client/web/src/components/__test__/topbar.test.tsx
index 5db88b5..913477e 100644
--- a/src/client/web/src/components/__test__/topbar.test.tsx
+++ b/src/client/web/src/components/__test__/topbar.test.tsx
@@ -143,6 +143,7 @@ describe("TopBar", () => {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     });
 
diff --git a/src/client/web/src/components/core_state.ts b/src/client/web/src/components/core_state.ts
index d14a393..62a0921 100644
--- a/src/client/web/src/components/core_state.ts
+++ b/src/client/web/src/components/core_state.ts
@@ -55,7 +55,7 @@ export function newState(): ICoreState {
 }
 
 export function initState(): ICoreState {
-  const defaultLanPackage = MsgPackage.get("en_US")
+  const defaultLanPackage = MsgPackage.get("en_US");
   const filesOrderBy = defaultLanPackage.get("item.name");
   const uploadingsOrderBy = defaultLanPackage.get("item.path");
   const sharingsOrderBy = defaultLanPackage.get("item.path");
@@ -107,6 +107,7 @@ export function initState(): ICoreState {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
+        theme: "light",
       },
     },
     msg: {
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index 8e12a93..5018620 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -156,6 +156,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     }
   };
 
+  setTheme = async (theme: string) => {
+    updater().setTheme(theme);
+    try {
+      const status = await updater().syncPreferences();
+      if (status !== "") {
+        alertMsg(this.props.msg.pkg.get("update.fail"));
+      }
+    } finally {
+      alertMsg(this.props.msg.pkg.get("update.ok"));
+      this.props.update(updater().updateUI);
+    }
+  };
+
   truncateErrors = () => {
     if (confirmMsg(this.props.msg.pkg.get("op.confirm"))) {
       ErrorLogger().truncate();
@@ -354,6 +367,38 @@ export class PaneSettings extends React.Component<Props, State, {}> {
           </div>
         </Container>
 
+        <Container>
+          <Flexbox
+            children={List([
+              <h5 className="title-m">
+                {this.props.msg.pkg.get("theme")}
+              </h5>,
+            ])}
+            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          />
+
+          <div className="hr"></div>
+
+          <div>
+            <button
+              onClick={() => {
+                this.setTheme("light");
+              }}
+              className="button-default inline-block margin-r-m"
+            >
+              {this.props.msg.pkg.get("theme.light")}
+            </button>
+            <button
+              onClick={() => {
+                this.setTheme("dark");
+              }}
+              className="button-default inline-block margin-r-m"
+            >
+              {this.props.msg.pkg.get("theme.dark")}
+            </button>
+          </div>
+        </Container>
+
         {/* disabled */}
         {/* <Container>
           <Flexbox
diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx
index 0b40457..a1ddc8b 100644
--- a/src/client/web/src/components/root_frame.tsx
+++ b/src/client/web/src/components/root_frame.tsx
@@ -52,8 +52,10 @@ export class RootFrame extends React.Component<Props, State, {}> {
 
   render() {
     const bgStyle = this.makeBgStyle();
-    const themeDark = "theme-dark";
-    const theme = themeDark;
+    const theme =
+      this.props.login.preferences.theme === "light"
+        ? "theme-default"
+        : "theme-dark";
     const fontSizeClass = "font-m";
 
     const displaying = this.props.ui.control.controls.get(controlName);
diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts
index be46d0c..ce7d4a8 100644
--- a/src/client/web/src/components/state_updater.ts
+++ b/src/client/web/src/components/state_updater.ts
@@ -622,6 +622,7 @@ export class Updater {
       cssURL: "",
       lanPackURL: "",
       lan: "en_US",
+      theme: "light",
     };
   };
 
@@ -781,6 +782,10 @@ export class Updater {
     }
   };
 
+  setTheme = (theme: string) => {
+    this.props.login.preferences.theme = theme;
+  };
+
   setControlOption = (controlName: string, option: string): boolean => {
     const controlExists = this.props.ui.control.controls.has(controlName);
     const optionsExists = this.props.ui.control.options.has(controlName);
diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts
index 62c10d3..a455175 100644
--- a/src/client/web/src/i18n/en_US.ts
+++ b/src/client/web/src/i18n/en_US.ts
@@ -138,7 +138,10 @@ export const msgs: Map<string, string> = Map({
   "endpoints.home": "Home",
   "state.stopped": "Stopped",
   "state.error": "Error",
-  "usedSpace": "Used Space",
-  "resetUsedSpace": "Reset Used Space",
-  "confirm.resetUsedSpace": "The operation may take some time, do you confirm?"
+  usedSpace: "Used Space",
+  resetUsedSpace: "Reset Used Space",
+  "confirm.resetUsedSpace": "The operation may take some time, do you confirm?",
+  theme: "Theme",
+  "theme.light": "Light",
+  "theme.dark": "Dark",
 });
diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts
index faf24f7..1362ab9 100644
--- a/src/client/web/src/i18n/zh_CN.ts
+++ b/src/client/web/src/i18n/zh_CN.ts
@@ -130,12 +130,15 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "取消",
   "term.time": "时间",
   "breadcrumb.loc": "位置",
-  "endpoints": "端点",
+  endpoints: "端点",
   "endpoints.root": "根",
   "endpoints.home": "家",
   "state.stopped": "已停止",
   "state.error": "错误",
-  "usedSpace": "已用空间",
-  "resetUsedSpace": "重置已用空间",
-  "confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?"
+  usedSpace: "已用空间",
+  resetUsedSpace: "重置已用空间",
+  "confirm.resetUsedSpace": "此操作可能会需要一些时间, 确认吗?",
+  theme: "主题",
+  "theme.light": "光白",
+  "theme.dark": "暗黑",
 });