From 14f9f2934824c3fe74d69a20a0560c4c9b1a64ae Mon Sep 17 00:00:00 2001 From: boojack Date: Fri, 2 Dec 2022 20:00:34 +0800 Subject: [PATCH] chore: update user setting appearance (#654) --- api/user_setting.go | 23 +++++- web/src/App.tsx | 19 ++++- web/src/components/AppearanceSelect.tsx | 12 ++-- web/src/components/DailyReviewDialog.tsx | 1 - .../Settings/PreferencesSection.tsx | 71 ++++++++++++++----- web/src/components/ShareMemoImageDialog.tsx | 5 +- web/src/helpers/storage.ts | 2 + web/src/helpers/utils.ts | 8 +++ web/src/hooks/useAppearance.ts | 65 ----------------- web/src/hooks/useMediaQuery.ts | 21 ------ web/src/hooks/useQuery.ts | 13 ---- web/src/less/daily-review-dialog.less | 4 +- web/src/less/share-memo-image-dialog.less | 22 ++---- web/src/services/globalService.ts | 7 +- web/src/services/userService.ts | 16 +++-- web/src/store/modules/global.ts | 2 +- web/src/types/modules/setting.d.ts | 2 +- 17 files changed, 134 insertions(+), 159 deletions(-) delete mode 100644 web/src/hooks/useAppearance.ts delete mode 100644 web/src/hooks/useMediaQuery.ts delete mode 100644 web/src/hooks/useQuery.ts diff --git a/api/user_setting.go b/api/user_setting.go index eb0ddfca..cd02e077 100644 --- a/api/user_setting.go +++ b/api/user_setting.go @@ -10,6 +10,8 @@ type UserSettingKey string const ( // UserSettingLocaleKey is the key type for user locale. UserSettingLocaleKey UserSettingKey = "locale" + // UserSettingAppearanceKey is the key type for user appearance. + UserSettingAppearanceKey UserSettingKey = "appearance" // UserSettingMemoVisibilityKey is the key type for user preference memo default visibility. UserSettingMemoVisibilityKey UserSettingKey = "memoVisibility" // UserSettingMemoDisplayTsOptionKey is the key type for memo display ts option. @@ -21,6 +23,8 @@ func (key UserSettingKey) String() string { switch key { case UserSettingLocaleKey: return "locale" + case UserSettingAppearanceKey: + return "appearance" case UserSettingMemoVisibilityKey: return "memoVisibility" case UserSettingMemoDisplayTsOptionKey: @@ -31,8 +35,8 @@ func (key UserSettingKey) String() string { var ( UserSettingLocaleValue = []string{"en", "zh", "vi", "fr"} + UserSettingAppearanceValue = []string{"light", "dark"} UserSettingMemoVisibilityValue = []Visibility{Private, Protected, Public} - UserSettingEditorFontStyleValue = []string{"normal", "mono"} UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"} ) @@ -67,6 +71,23 @@ func (upsert UserSettingUpsert) Validate() error { if invalid { return fmt.Errorf("invalid user setting locale value") } + } else if upsert.Key == UserSettingAppearanceKey { + appearanceValue := "light" + err := json.Unmarshal([]byte(upsert.Value), &appearanceValue) + if err != nil { + return fmt.Errorf("failed to unmarshal user setting appearance value") + } + + invalid := true + for _, value := range UserSettingAppearanceValue { + if appearanceValue == value { + invalid = false + break + } + } + if invalid { + return fmt.Errorf("invalid user setting appearance value") + } } else if upsert.Key == UserSettingMemoVisibilityKey { memoVisibilityValue := Private err := json.Unmarshal([]byte(upsert.Value), &memoVisibilityValue) diff --git a/web/src/App.tsx b/web/src/App.tsx index a99b88b2..ec36bf0a 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -6,12 +6,12 @@ import { useAppSelector } from "./store"; import Loading from "./pages/Loading"; import router from "./router"; import * as storage from "./helpers/storage"; -import useAppearance from "./hooks/useAppearance"; +import { useColorScheme } from "@mui/joy"; function App() { const { i18n } = useTranslation(); - const { locale, systemStatus } = useAppSelector((state) => state.global); - useAppearance(); + const { appearance, locale, systemStatus } = useAppSelector((state) => state.global); + const { setMode } = useColorScheme(); useEffect(() => { locationService.updateStateWithLocation(); @@ -42,6 +42,19 @@ function App() { }); }, [locale]); + useEffect(() => { + const root = document.documentElement; + if (appearance === "light") { + root.classList.remove("dark"); + } else if (appearance === "dark") { + root.classList.add("dark"); + } + setMode(appearance); + storage.set({ + appearance: appearance, + }); + }, [appearance]); + return ( }> diff --git a/web/src/components/AppearanceSelect.tsx b/web/src/components/AppearanceSelect.tsx index e6210bef..371e18e5 100644 --- a/web/src/components/AppearanceSelect.tsx +++ b/web/src/components/AppearanceSelect.tsx @@ -1,12 +1,13 @@ import { Option, Select } from "@mui/joy"; import { useTranslation } from "react-i18next"; -import { globalService } from "../services"; +import { globalService, userService } from "../services"; import { useAppSelector } from "../store"; import Icon from "./Icon"; -const appearanceList = ["system", "light", "dark"]; +const appearanceList = ["light", "dark"]; const AppearanceSelect = () => { + const user = useAppSelector((state) => state.user.user); const appearance = useAppSelector((state) => state.global.appearance); const { t } = useTranslation(); @@ -16,12 +17,13 @@ const AppearanceSelect = () => { return ; } else if (apperance === "dark") { return ; - } else { - return ; } }; - const handleSelectChange = (appearance: Appearance) => { + const handleSelectChange = async (appearance: Appearance) => { + if (user) { + await userService.upsertUserSetting("appearance", appearance); + } globalService.setAppearance(appearance); }; diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx index d938fea5..4ae45860 100644 --- a/web/src/components/DailyReviewDialog.tsx +++ b/web/src/components/DailyReviewDialog.tsx @@ -43,7 +43,6 @@ const DailyReviewDialog: React.FC = (props: Props) => { toggleShowDatePicker(false); toImage(memosElRef.current, { - backgroundColor: "#ffffff", pixelRatio: window.devicePixelRatio * 2, }) .then((url) => { diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx index 1f3285ce..fa2cace5 100644 --- a/web/src/components/Settings/PreferencesSection.tsx +++ b/web/src/components/Settings/PreferencesSection.tsx @@ -1,9 +1,9 @@ +import { Select, Switch, Option } from "@mui/joy"; import { useTranslation } from "react-i18next"; -import Switch from "@mui/joy/Switch"; import { globalService, userService } from "../../services"; import { useAppSelector } from "../../store"; import { VISIBILITY_SELECTOR_ITEMS, MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS } from "../../helpers/consts"; -import Selector from "../common/Selector"; +import Icon from "../Icon"; import AppearanceSelect from "../AppearanceSelect"; import "../../less/settings/preferences-section.less"; @@ -63,32 +63,65 @@ const PreferencesSection = () => { return (

{t("common.basic")}

-