refactor(flat-pages): update preferences modal styles (#1933)

* refactor(flat-pages): update preferences modal styles - move general settings label to first row's center - update theme picker styles * reset index on close preferences modal * update network status popover styles * fix: update avatars styles on edge case
netless-io · May 11, 2023 · e490257 · e490257
1 parent 440a617
commit e490257
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 26 deletions.
diff --git a/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less b/packages/flat-components/src/components/ClassroomPage/NetworkStatus/style.less
@@ -19,6 +19,8 @@
     position: absolute;
     left: 0;
     top: calc(100% + 7px);
+    display: flex;
+    flex-direction: column;
     border-radius: 4px;
     z-index: 9999;
     font-size: 12px;

diff --git a/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less b/packages/flat-components/src/components/ClassroomPage/VideoAvatarAbsent/style.less
@@ -63,6 +63,7 @@
 }
 
 .video-avatar-absent-desc {
+    padding-left: 4px;
     white-space: nowrap;
 }
 

diff --git a/packages/flat-pages/src/BigClassPage/BigClassPage.less b/packages/flat-pages/src/BigClassPage/BigClassPage.less
@@ -51,7 +51,8 @@
     flex-direction: column;
     gap: .5px;
 
-    .video-avatar {
+    .video-avatar,
+    .video-avatar-absent {
         width: 288px;
         height: 216px;
     }

diff --git a/packages/flat-pages/src/OneToOnePage/OneToOnePage.less b/packages/flat-pages/src/OneToOnePage/OneToOnePage.less
@@ -54,7 +54,8 @@
     flex-direction: column;
     gap: .5px;
 
-    .video-avatar {
+    .video-avatar,
+    .video-avatar-absent {
         width: 288px;
         height: 216px;
     }

diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AppearanceSettings.tsx
@@ -0,0 +1,67 @@
+import type { PreferencesButtonProps } from "../index";
+
+import React, { useCallback, useContext } from "react";
+import { observer } from "mobx-react-lite";
+import { Radio } from "antd";
+
+import { useTranslate } from "@netless/flat-i18n";
+import { PreferencesStoreContext } from "../../StoreProvider";
+
+export interface AppearanceSettingsProps extends PreferencesButtonProps {}
+
+export const AppearanceSettings = observer<AppearanceSettingsProps>(function AppearanceSettings() {
+    const t = useTranslate();
+    const preferences = useContext(PreferencesStoreContext);
+
+    const changeAppearance = useCallback(
+        (ev: any) => preferences.updatePrefersColorScheme(ev.target.value),
+        [preferences],
+    );
+
+    return (
+        <>
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="theme">
+                {t("theme")}
+            </label>
+            <Radio.Group
+                className="preferences-modal-section-grid-content"
+                id="theme"
+                name="theme"
+                value={preferences.prefersColorScheme}
+                onChange={changeAppearance}
+            >
+                <Radio className="preferences-modal-section-radio" value="light">
+                    <span className="preferences-modal-section-theme light">
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                    </span>
+                    <span>{t("app-appearance-light")}</span>
+                </Radio>
+                <Radio className="preferences-modal-section-radio" value="dark">
+                    <span className="preferences-modal-section-theme dark">
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                        <span className="preferences-modal-section-theme-front"></span>
+                    </span>
+                    <span>{t("app-appearance-dark")}</span>
+                </Radio>
+                <Radio className="preferences-modal-section-radio" value="auto">
+                    <span className="preferences-modal-section-theme auto">
+                        <span className="preferences-modal-section-theme light">
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                        </span>
+                        <span className="preferences-modal-section-theme dark">
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                            <span className="preferences-modal-section-theme-front"></span>
+                        </span>
+                    </span>
+                    <span>{t("app-appearance-auto")}</span>
+                </Radio>
+            </Radio.Group>
+        </>
+    );
+});
diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/AvatarsSettings.tsx
@@ -17,7 +17,7 @@ export const AvatarsSettings = observer<AvatarsSettingsProps>(function AvatarsSe
 
     return (
         <>
-            <label className="preferences-modal-section-grid-label" htmlFor="avatars">
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="avatars">
                 {t("general-settings-avatars")}
             </label>
             <Radio.Group

diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/BackgroundSettings.tsx
@@ -27,7 +27,7 @@ export const BackgroundSettings = observer<BackgroundSettingsProps>(function Bac
 
     return (
         <>
-            <label className="preferences-modal-section-grid-label" htmlFor="background">
+            <label className="preferences-modal-section-grid-label first-row" htmlFor="background">
                 {t("general-settings-background")}
             </label>
             <Radio.Group
@@ -38,7 +38,11 @@ export const BackgroundSettings = observer<BackgroundSettingsProps>(function Bac
                 onChange={changeBackground}
             >
                 {backgrounds.map(background => (
-                    <Radio className="preferences-modal-section-radio" value={background}>
+                    <Radio
+                        key={background}
+                        className="preferences-modal-section-radio"
+                        value={background}
+                    >
                         <span className={"preferences-modal-section-background " + background}>
                             <img
                                 alt={t("online-interaction-to-synchronize-ideas")}

diff --git a/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx b/packages/flat-pages/src/components/PreferencesButton/GeneralSettings/index.tsx
@@ -1,15 +1,14 @@
 import type { PreferencesButtonProps } from "../index";
 
-import React, { useCallback, useContext } from "react";
+import React from "react";
 import { observer } from "mobx-react-lite";
 
 import { useTranslate } from "@netless/flat-i18n";
 import { RoomType } from "@netless/flat-server-api";
-import { AppearancePicker } from "flat-components";
-import { PreferencesStoreContext } from "../../StoreProvider";
 import { AvatarsSettings } from "./AvatarsSettings";
 import { BackgroundSettings } from "./BackgroundSettings";
 import { LanguageSettings } from "./LanguageSettings";
+import { AppearanceSettings } from "./AppearanceSettings";
 
 export interface GeneralSettingsProps extends PreferencesButtonProps {}
 
@@ -18,12 +17,6 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
 }) {
     const t = useTranslate();
 
-    const preferences = useContext(PreferencesStoreContext);
-    const changeAppearance = useCallback(
-        (ev: any) => preferences.updatePrefersColorScheme(ev.target.value),
-        [preferences],
-    );
-
     const isSmallClass = classroom.roomType === RoomType.SmallClass;
 
     return (
@@ -33,13 +26,7 @@ export const GeneralSettings = observer<GeneralSettingsProps>(function GeneralSe
                 <LanguageSettings classroom={classroom} />
                 {isSmallClass && <AvatarsSettings classroom={classroom} />}
                 <BackgroundSettings classroom={classroom} />
-                <label className="preferences-modal-section-grid-label" htmlFor="theme">
-                    {t("theme")}
-                </label>
-                <AppearancePicker
-                    changeAppearance={changeAppearance}
-                    value={preferences.prefersColorScheme}
-                />
+                <AppearanceSettings classroom={classroom} />
             </div>
         </div>
     );

diff --git a/packages/flat-pages/src/components/PreferencesButton/index.tsx b/packages/flat-pages/src/components/PreferencesButton/index.tsx
@@ -32,9 +32,13 @@ export const PreferencesButton = observer<PreferencesButtonProps>(function Prefe
     const t = useTranslate();
     const [open, setOpen] = useState(false);
     const onToggle = useCallback(() => setOpen(open => !open), []);
-    const onCancel = useCallback(() => setOpen(false), []);
 
     const [index, setIndex] = useState(0);
+    const onCancel = useCallback(() => {
+        setOpen(false);
+        setIndex(0);
+    }, []);
+
     const updateIndex = useCallback((ev: React.MouseEvent) => {
         const el = ev.target as HTMLElement | null;
         const index = el?.dataset?.index;

diff --git a/packages/flat-pages/src/components/PreferencesButton/style.less b/packages/flat-pages/src/components/PreferencesButton/style.less
@@ -152,6 +152,11 @@
 
 .preferences-modal-section-grid-label {
     white-space: pre-wrap;
+
+    &.first-row {
+        align-self: flex-start;
+        transform: translateY(calc(60px - 50%));
+    }
 }
 
 .preferences-modal-section-control {
@@ -244,6 +249,65 @@
     mix-blend-mode: difference;
 }
 
+.preferences-modal-section-theme {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    padding: 20px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    &.light {
+        background: #fff;
+
+        .preferences-modal-section-theme-front {
+            background-color: var(--blue-2);
+        }
+    }
+
+    &.dark {
+        background: var(--grey-9);
+
+        .preferences-modal-section-theme-front {
+            background-color: var(--grey-7);
+        }
+    }
+}
+
+.preferences-modal-section-theme-front {
+    display: inline-block;
+    width: 80px;
+    height: 8px;
+
+    &:first-child {
+        width: 120px;
+    }
+}
+
+.preferences-modal-section-theme.auto {
+    padding: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 0;
+
+    >.preferences-modal-section-theme {
+        position: static;
+        flex: 1;
+
+        >.preferences-modal-section-theme-front {
+            width: 20px;
+
+            &:first-child {
+                width: 40px;
+            }
+        }
+    }
+}
+
 .preferences-modal-section-button {
     position: relative;
     display: flex;
@@ -354,10 +418,6 @@
         &.ant-radio-wrapper-checked::after {
             background-color: var(--grey-9);
         }
-
-        .ant-radio+span>img {
-            filter: brightness(0.8);
-        }
     }
 
     .preferences-modal-hotkey-setting-content {
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,7 @@ @@
     }
     .video-avatar-absent-desc {
+        padding-left: 4px;
         white-space: nowrap;
     }
@@ Expand Down @@