aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: settings page improvements (#3034)

Browse Source 
* Don't allow to select text on buttons in settings + refactoring

* Remove redundant useMemo

* Update web/src/pages/Setting.tsx

Co-authored-by: boojack <stevenlgtm@gmail.com>

* Rename other constants too

* Rename AdminSection to ADMIN_SECTIONS

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>
pull/3042/head
Dubzer 1 year ago committed by GitHub
parent ec206104e5
commit 6cbfbe9c07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File

24
web/src/components/Settings/SectionMenuItem.tsx
Unescape Escape View File

@ -0,0 +1,24 @@
import { LucideIcon } from "lucide-react";
import React from "react";
interface SettingMenuItemProps {
text: string;
icon: LucideIcon;
isSelected: boolean;
onClick: () => void;
}
const SectionMenuItem: React.FC<SettingMenuItemProps> = ({ text, icon: IconComponent, isSelected, onClick }) => {
return (
<span
onClick={onClick}
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg select-none hover:opacity-80 ${
isSelected ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
>
<IconComponent className="w-4 h-auto mr-2 opacity-80" /> {text}
</span>
);
};
export default SectionMenuItem;

109
web/src/pages/Setting.tsx
Unescape Escape View File

@ -1,11 +1,13 @@
import { Option, Select } from "@mui/joy";
import { useState } from "react";
import { LucideIcon } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import Icon from "@/components/Icon";
import MobileHeader from "@/components/MobileHeader";
import MemberSection from "@/components/Settings/MemberSection";
import MyAccountSection from "@/components/Settings/MyAccountSection";
import PreferencesSection from "@/components/Settings/PreferencesSection";
import SSOSection from "@/components/Settings/SSOSection";
import SectionMenuItem from "@/components/Settings/SectionMenuItem";
import StorageSection from "@/components/Settings/StorageSection";
import SystemSection from "@/components/Settings/SystemSection";
import useCurrentUser from "@/hooks/useCurrentUser";
@ -19,6 +21,18 @@ interface State {
selectedSection: SettingSection;
}
const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference"];
const ADMIN_SECTIONS: SettingSection[] = ["member", "system", "storage", "sso"];
const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
"my-account": Icon.User,
preference: Icon.Cog,
member: Icon.Users,
system: Icon.Settings2,
storage: Icon.Database,
sso: Icon.Key,
};
const Setting = () => {
const t = useTranslate();
const user = useCurrentUser();
@ -26,21 +40,22 @@ const Setting = () => {
const [state, setState] = useState<State>({
selectedSection: "my-account",
});
const isHost = user.role === User_Role.HOST;
const handleSectionSelectorItemClick = (settingSection: SettingSection) => {
setState({
selectedSection: settingSection,
});
};
const isHost = user.role === User_Role.HOST;
const getSettingSectionList = () => {
let settingList: SettingSection[] = ["my-account", "preference"];
const settingsSectionList = useMemo(() => {
let settingList = [...BASIC_SECTIONS];
if (isHost) {
settingList = settingList.concat(["member", "system", "storage", "sso"]);
settingList = settingList.concat(ADMIN_SECTIONS);
}
return settingList;
};
}, [isHost]);
const handleSectionSelectorItemClick = useCallback((settingSection: SettingSection) => {
setState({
selectedSection: settingSection,
});
}, []);
return (
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
@ -48,61 +63,31 @@ const Setting = () => {
<div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">
<div className="hidden sm:flex flex-col justify-start items-start w-40 h-auto shrink-0 py-2">
<span className="text-sm mt-0.5 pl-3 font-mono text-gray-400 dark:text-gray-500">{t("common.basic")}</span>
<span className="text-sm mt-0.5 pl-3 font-mono select-none text-gray-400 dark:text-gray-500">{t("common.basic")}</span>
<div className="w-full flex flex-col justify-start items-start mt-1">
<span
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "my-account" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
onClick={() => handleSectionSelectorItemClick("my-account")}
>
<Icon.User className="w-4 h-auto mr-2 opacity-80" /> {t("setting.my-account")}
</span>
<span
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "preference" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
onClick={() => handleSectionSelectorItemClick("preference")}
>
<Icon.Cog className="w-4 h-auto mr-2 opacity-80" /> {t("setting.preference")}
</span>
{BASIC_SECTIONS.map((item) => (
<SectionMenuItem
key={item}
text={t(`setting.${item}`)}
icon={SECTION_ICON_MAP[item]}
isSelected={state.selectedSection === item}
onClick={() => handleSectionSelectorItemClick(item)}
/>
))}
</div>
{isHost ? (
<>
<span className="text-sm mt-4 pl-3 font-mono text-gray-400 dark:text-gray-500">{t("common.admin")}</span>
<span className="text-sm mt-4 pl-3 font-mono select-none text-gray-400 dark:text-gray-500">{t("common.admin")}</span>
<div className="w-full flex flex-col justify-start items-start mt-1">
<span
onClick={() => handleSectionSelectorItemClick("member")}
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "member" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
>
<Icon.Users className="w-4 h-auto mr-2 opacity-80" /> {t("setting.member")}
</span>
<span
onClick={() => handleSectionSelectorItemClick("system")}
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "system" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
>
<Icon.Settings2 className="w-4 h-auto mr-2 opacity-80" /> {t("setting.system")}
</span>
<span
onClick={() => handleSectionSelectorItemClick("storage")}
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "storage" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
>
<Icon.Database className="w-4 h-auto mr-2 opacity-80" /> {t("setting.storage")}
</span>
<span
onClick={() => handleSectionSelectorItemClick("sso")}
className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg hover:opacity-80 ${
state.selectedSection === "sso" ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
}`}
>
<Icon.Key className="w-4 h-auto mr-2 opacity-80" /> {t("setting.sso")}
</span>
{ADMIN_SECTIONS.map((item) => (
<SectionMenuItem
key={item}
text={t(`setting.${item}`)}
icon={SECTION_ICON_MAP[item]}
isSelected={state.selectedSection === item}
onClick={() => handleSectionSelectorItemClick(item)}
/>
))}
<span className="px-3 mt-2 opacity-70 text-sm">Version: v{globalStore.state.systemStatus.profile.version}</span>
</div>
</>
@ -111,7 +96,7 @@ const Setting = () => {
<div className="w-full grow sm:pl-4 overflow-x-auto">
<div className="w-auto inline-block my-2 sm:hidden">
<Select value={state.selectedSection} onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}>
{getSettingSectionList().map((settingSection) => (
{settingsSectionList.map((settingSection) => (
<Option key={settingSection} value={settingSection}>
{t(`setting.${settingSection}`)}
</Option>

Write Preview
Loading…
Cancel
Save