From 0db1903e4220d7353c24ea43e6073eeb6b4ea412 Mon Sep 17 00:00:00 2001
From: hexxa <hexxa@outlook.com>
Date: Sun, 20 Mar 2022 20:00:23 +0800
Subject: [PATCH] feat(fe/panes): eable background color setting in preferences
 and management pane

---
 src/client/web/src/components/pane_admin.tsx  | 22 ++++++++++-
 .../web/src/components/pane_settings.tsx      | 24 ++++++++++--
 src/client/web/src/components/root_frame.tsx  | 39 +++++++++++--------
 src/client/web/src/i18n/en_US.ts              |  1 +
 src/client/web/src/i18n/zh_CN.ts              |  1 +
 5 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/src/client/web/src/components/pane_admin.tsx b/src/client/web/src/components/pane_admin.tsx
index f051cb8..f5d9c26 100644
--- a/src/client/web/src/components/pane_admin.tsx
+++ b/src/client/web/src/components/pane_admin.tsx
@@ -753,6 +753,13 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
     });
     this.props.update(updater().updateUI);
   };
+  changeBgBgColor = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setClientCfg({
+      ...this.props.ui,
+      bg: { ...this.props.ui.bg, bgColor: ev.target.value },
+    });
+    this.props.update(updater().updateUI);
+  };
 
   constructor(p: BgProps) {
     super(p);
@@ -900,7 +907,7 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
             />
           </div>
 
-          <div className="inline-block">
+          <div className="inline-block margin-r-m">
             <div className="label">
               {this.props.msg.pkg.get("cfg.bg.align")}
             </div>
@@ -912,6 +919,19 @@ export class BgCfg extends React.Component<BgProps, BgState, {}> {
               placeholder={this.props.msg.pkg.get("cfg.bg.align")}
             />
           </div>
+
+          <div className="inline-block">
+            <div className="label">
+              {this.props.msg.pkg.get("cfg.bg.bgColor")}
+            </div>
+            <input
+              name="bg_bgColor"
+              type="text"
+              onChange={this.changeBgBgColor}
+              value={this.props.ui.bg.bgColor}
+              placeholder={this.props.msg.pkg.get("cfg.bg.bgColor")}
+            />
+          </div>
         </div>
       </div>
     );
diff --git a/src/client/web/src/components/pane_settings.tsx b/src/client/web/src/components/pane_settings.tsx
index 5018620..2091895 100644
--- a/src/client/web/src/components/pane_settings.tsx
+++ b/src/client/web/src/components/pane_settings.tsx
@@ -62,6 +62,13 @@ export class PaneSettings extends React.Component<Props, State, {}> {
     });
     this.props.update(updater().updateLogin);
   };
+  changeBgBgColor = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    updater().setPreferences({
+      ...this.props.login.preferences,
+      bg: { ...this.props.login.preferences.bg, bgColor: ev.target.value },
+    });
+    this.props.update(updater().updateLogin);
+  };
   changeCSSURL = (ev: React.ChangeEvent<HTMLInputElement>) => {
     updater().setPreferences({
       ...this.props.login.preferences,
@@ -370,9 +377,7 @@ export class PaneSettings extends React.Component<Props, State, {}> {
         <Container>
           <Flexbox
             children={List([
-              <h5 className="title-m">
-                {this.props.msg.pkg.get("theme")}
-              </h5>,
+              <h5 className="title-m">{this.props.msg.pkg.get("theme")}</h5>,
             ])}
             childrenStyles={List([{}, { justifyContent: "flex-end" }])}
           />
@@ -502,6 +507,19 @@ export class PaneSettings extends React.Component<Props, State, {}> {
                 placeholder={this.props.msg.pkg.get("cfg.bg.align")}
               />
             </div>
+
+            <div className="inline-block margin-r-m">
+              <div className="label">
+                {this.props.msg.pkg.get("cfg.bg.bgColor")}
+              </div>
+              <input
+                name="bg_bgColor"
+                type="text"
+                onChange={this.changeBgBgColor}
+                value={this.props.login.preferences.bg.bgColor}
+                placeholder={this.props.msg.pkg.get("cfg.bg.bgColor")}
+              />
+            </div>
           </div>
         </Container>
 
diff --git a/src/client/web/src/components/root_frame.tsx b/src/client/web/src/components/root_frame.tsx
index ceff4dd..0ac6937 100644
--- a/src/client/web/src/components/root_frame.tsx
+++ b/src/client/web/src/components/root_frame.tsx
@@ -31,30 +31,35 @@ export class RootFrame extends React.Component<Props, State, {}> {
   }
 
   makeBgStyle = (): Object => {
-    if (
-      this.props.login.preferences.bg.url === "" &&
-      this.props.ui.bg.url === ""
-    ) {
-      return {};
-    }
-
-    let bgStyle = undefined;
     if (
       this.props.login.preferences != null &&
       this.props.login.preferences.bg.url !== ""
     ) {
-      bgStyle = {
-        background: `url("${this.props.login.preferences.bg.url}") ${this.props.login.preferences.bg.repeat} ${this.props.login.preferences.bg.position} ${this.props.login.preferences.bg.align}`,
+      const bgConfig = this.props.login.preferences.bg;
+      return {
+        background: `url("${bgConfig.url}") ${bgConfig.repeat} ${bgConfig.position} ${bgConfig.align}`,
       };
-    } else if (this.props.ui.bg.url !== "") {
-      bgStyle = {
-        background: `url("${this.props.ui.bg.url}") ${this.props.ui.bg.repeat} ${this.props.ui.bg.position} ${this.props.ui.bg.align}`,
-      };
-    } else {
-      bgStyle = {};
     }
 
-    return bgStyle;
+    if (this.props.login.preferences.bg.bgColor !== "") {
+      return {
+        backgroundColor: this.props.login.preferences.bg.bgColor,
+      };
+    }
+
+    if (this.props.ui.bg.url !== "") {
+      return {
+        background: `url("${this.props.ui.bg.url}") ${this.props.ui.bg.repeat} ${this.props.ui.bg.position} ${this.props.ui.bg.align}`,
+      };
+    }
+
+    if (this.props.ui.bg.bgColor !== "") {
+      return {
+        backgroundColor: this.props.ui.bg.bgColor,
+      };
+    }
+
+    return {};
   };
 
   render() {
diff --git a/src/client/web/src/i18n/en_US.ts b/src/client/web/src/i18n/en_US.ts
index a455175..7e67683 100644
--- a/src/client/web/src/i18n/en_US.ts
+++ b/src/client/web/src/i18n/en_US.ts
@@ -94,6 +94,7 @@ export const msgs: Map<string, string> = Map({
   "cfg.bg.repeat": "Repeat",
   "cfg.bg.pos": "Position",
   "cfg.bg.align": "Align",
+  "cfg.bg.bgColor": "Background Color",
   reset: "Reset",
   "bg.url.alert": "Image URL is too short or too long",
   "bg.pos.alert": "Position only supports: top, bottom, left, right, center",
diff --git a/src/client/web/src/i18n/zh_CN.ts b/src/client/web/src/i18n/zh_CN.ts
index 1362ab9..cbe5fa8 100644
--- a/src/client/web/src/i18n/zh_CN.ts
+++ b/src/client/web/src/i18n/zh_CN.ts
@@ -92,6 +92,7 @@ export const msgs: Map<string, string> = Map({
   "cfg.bg.repeat": "重复",
   "cfg.bg.pos": "位置",
   "cfg.bg.align": "对齐",
+  "cfg.bg.bgColor": "背景色",
   reset: "重置",
   "bg.url.alert": "图片链接太短或太长",
   "bg.pos.alert": "Position目前仅支持top, bottom, left, right, center",