feat(flat-components): add appearance picker component

netless-io · Feb 16, 2022 · 04e21bf · 04e21bf
1 parent 610780b
commit 04e21bf
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 44 deletions.
diff --git a/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -2,10 +2,12 @@ import "./style.less";
 
 import { Checkbox, Radio } from "antd";
 import type { CheckboxChangeEvent } from "antd/lib/checkbox";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
 import { ipcSyncByApp, ipcAsyncByApp } from "../../../utils/ipc";
 import { useTranslation } from "react-i18next";
+import { AppearancePicker, FlatPrefersColorScheme } from "flat-components";
+import { ConfigStoreContext } from "../../../components/StoreProvider";
 
 enum SelectLanguage {
     Chinese,
@@ -15,6 +17,7 @@ enum SelectLanguage {
 export const GeneralSettingPage = (): React.ReactElement => {
     const { t, i18n } = useTranslation();
     const [openAtLogin, setOpenAtLogin] = useState(false);
+    const configStore = useContext(ConfigStoreContext);
 
     useEffect(() => {
         ipcSyncByApp("get-open-at-login")
@@ -38,6 +41,11 @@ export const GeneralSettingPage = (): React.ReactElement => {
         await i18n.changeLanguage(language === SelectLanguage.Chinese ? "zh-CN" : "en");
     }
 
+    const changeAppearance = (event: CheckboxChangeEvent): void => {
+        const prefersColorScheme: FlatPrefersColorScheme = event.target.value;
+        configStore.updatePrefersColorScheme(prefersColorScheme);
+    };
+
     return (
         <UserSettingLayoutContainer>
             <div className="general-setting-container">
@@ -60,6 +68,13 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         <Radio value={SelectLanguage.English}>English</Radio>
                     </Radio.Group>
                 </div>
+                <div className="general-setting-appearance-picker-container">
+                    <span>{t("flat-appearance-setting")}</span>
+                    <AppearancePicker
+                        changeAppearance={changeAppearance}
+                        defaultValue={configStore.prefersColorScheme}
+                    />
+                </div>
             </div>
         </UserSettingLayoutContainer>
     );

diff --git a/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/style.less b/desktop/renderer-app/src/pages/UserSettingPage/GeneralSettingPage/style.less
@@ -22,3 +22,11 @@
         }
     }
 }
+
+.general-setting-appearance-picker-container{
+    > span {
+        display: block;
+        padding-top: 8px;
+        padding-bottom: 3px;
+    }
+}
diff --git a/...gPage/ThemePicker/ThemePicker.stories.tsx → .../AppearancePicker/ThemePicker.stories.tsx b/...gPage/ThemePicker/ThemePicker.stories.tsx → .../AppearancePicker/ThemePicker.stories.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { ThemePicker, ThemePickerProps } from ".";
+import { AppearancePicker, AppearancePickerProps } from ".";
 
 const storyMeta: Meta = {
-    title: "SettingPage/ThemePicker",
-    component: ThemePicker,
+    title: "SettingPage/AppearancePicker",
+    component: AppearancePicker,
 };
 
 export default storyMeta;
 
-export const Overview: Story<ThemePickerProps> = args => (
+export const Overview: Story<AppearancePickerProps> = args => (
     <Router>
         <div className="vh-75 mw8-ns">
-            <ThemePicker {...args} />
+            <AppearancePicker {...args} />
         </div>
     </Router>
 );

diff --git a/...ts/SettingPage/ThemePicker/icons/auto.svg → ...ttingPage/AppearancePicker/icons/auto.svg b/...ts/SettingPage/ThemePicker/icons/auto.svg → ...ttingPage/AppearancePicker/icons/auto.svg
diff --git a/...ts/SettingPage/ThemePicker/icons/dark.svg → ...ttingPage/AppearancePicker/icons/dark.svg b/...ts/SettingPage/ThemePicker/icons/dark.svg → ...ttingPage/AppearancePicker/icons/dark.svg
diff --git a/...s/SettingPage/ThemePicker/icons/light.svg → ...tingPage/AppearancePicker/icons/light.svg b/...s/SettingPage/ThemePicker/icons/light.svg → ...tingPage/AppearancePicker/icons/light.svg
diff --git a/...ponents/SettingPage/ThemePicker/index.tsx → ...ts/SettingPage/AppearancePicker/index.tsx b/...ponents/SettingPage/ThemePicker/index.tsx → ...ts/SettingPage/AppearancePicker/index.tsx
@@ -9,35 +9,35 @@ import { Radio } from "antd";
 import { FlatPrefersColorScheme } from "../../FlatThemeProvider";
 import { CheckboxChangeEvent } from "antd/lib/checkbox";
 
-export interface ThemePickerProps {
+export interface AppearancePickerProps {
     defaultValue: FlatPrefersColorScheme;
-    changePrefersColorScheme: (event: CheckboxChangeEvent) => void;
+    changeAppearance: (event: CheckboxChangeEvent) => void;
 }
 
-export const ThemePicker: React.FC<ThemePickerProps> = ({
+export const AppearancePicker: React.FC<AppearancePickerProps> = ({
     defaultValue,
-    changePrefersColorScheme,
+    changeAppearance,
 }) => {
     const { t } = useTranslation();
     return (
-        <div className="theme-picker-container">
-            <Radio.Group defaultValue={defaultValue} onChange={changePrefersColorScheme}>
+        <div className="appearance-picker-container">
+            <Radio.Group defaultValue={defaultValue} onChange={changeAppearance}>
                 <Radio value={"light"}>
-                    <div className="theme-picker-option">
+                    <div className="appearance-picker-option">
                         <img src={lightSVG} />
-                        <span>{t("flat-theme-light")}</span>
+                        <span>{t("flat-appearance-light")}</span>
                     </div>
                 </Radio>
                 <Radio value={"dark"}>
-                    <div className="theme-picker-option">
+                    <div className="appearance-picker-option">
                         <img src={darkSVG} />
-                        <span>{t("flat-theme-dark")}</span>
+                        <span>{t("flat-appearance-dark")}</span>
                     </div>
                 </Radio>
                 <Radio value={"auto"}>
-                    <div className="theme-picker-option">
+                    <div className="appearance-picker-option">
                         <img src={autoSVG} />
-                        <span>{t("flat-theme-auto")}</span>
+                        <span>{t("flat-appearance-auto")}</span>
                     </div>
                 </Radio>
             </Radio.Group>

diff --git a/...onents/SettingPage/ThemePicker/style.less → ...s/SettingPage/AppearancePicker/style.less b/...onents/SettingPage/ThemePicker/style.less → ...s/SettingPage/AppearancePicker/style.less
@@ -1,4 +1,4 @@
-.theme-picker-container {  
+.appearance-picker-container {  
     > .ant-radio-group {
         > .ant-radio-wrapper {
         border-radius: 4px;
@@ -38,7 +38,7 @@
     }
 }
 
-.theme-picker-option {
+.appearance-picker-option {
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/packages/flat-components/src/index.ts b/packages/flat-components/src/index.ts
@@ -23,4 +23,4 @@ export * from "./components/DeviceTestPage";
 export * from "./components/ClassroomPage/CloudRecordBtn";
 export * from "./components/ClassroomPage/Timer";
 export * from "./components/FlatIcons";
-export * from "./components/SettingPage/ThemePicker";
+export * from "./components/SettingPage/AppearancePicker";
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -400,7 +400,8 @@
     "hide": "Hide",
     "show": "Show"
   },
-  "flat-theme-light": "Light",
-  "flat-theme-dark": "Dark",
-  "flat-theme-auto": "Auto"
+  "flat-appearance-light": "Light",
+  "flat-appearance-dark": "Dark",
+  "flat-appearance-auto": "Auto",
+  "flat-appearance-setting": "Appearance"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -400,7 +400,8 @@
     "hide": "折叠",
     "show": "展开"
   },
-  "flat-theme-light": "浅色",
-  "flat-theme-dark": "深色",
-  "flat-theme-auto": "自动"
+  "flat-appearance-light": "浅色",
+  "flat-appearance-dark": "深色",
+  "flat-appearance-auto": "自动",
+  "flat-appearance-setting": "外观"
 }
diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.less
@@ -19,24 +19,14 @@
     }
 }
 
-.general-setting-select-theme-picker {
+.general-setting-appearance-picker-container{
     > span {
         display: block;
         padding-top: 8px;
         padding-bottom: 3px;
     }
 }
 
-.select-flat-theme-option {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    > span {
-        padding-top: 8px;
-    }
-}    
-
 .general-setting-device-test-box {
     padding-top: 12px;
 }

diff --git a/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx b/web/flat-web/src/pages/UserSettingPage/GeneralSettingPage/index.tsx
@@ -1,6 +1,6 @@
 import "./index.less";
 
-import { FlatPrefersColorScheme, ThemePicker } from "flat-components";
+import { FlatPrefersColorScheme, AppearancePicker } from "flat-components";
 import { Checkbox, Radio } from "antd";
 import React, { useContext } from "react";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
@@ -24,7 +24,7 @@ export const GeneralSettingPage = (): React.ReactElement => {
         void i18n.changeLanguage(language === SelectLanguage.Chinese ? "zh-CN" : "en");
     }
 
-    const changePrefersColorScheme = (event: CheckboxChangeEvent): void => {
+    const changeAppearance = (event: CheckboxChangeEvent): void => {
         const prefersColorScheme: FlatPrefersColorScheme = event.target.value;
         configStore.updatePrefersColorScheme(prefersColorScheme);
     };
@@ -46,10 +46,10 @@ export const GeneralSettingPage = (): React.ReactElement => {
                         <Radio value={SelectLanguage.English}>English</Radio>
                     </Radio.Group>
                 </div>
-                <div className="general-setting-select-theme-picker">
-                    <span>主题设置</span>
-                    <ThemePicker
-                        changePrefersColorScheme={changePrefersColorScheme}
+                <div className="general-setting-appearance-picker-container">
+                    <span>{t("flat-appearance-setting")}</span>
+                    <AppearancePicker
+                        changeAppearance={changeAppearance}
                         defaultValue={configStore.prefersColorScheme}
                     />
                 </div>