usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-25 12:23:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update user menu items (#2179)

Browse Source
This commit is contained in:
boojack 2023-08-26 23:11:45 +08:00 committed by GitHub
parent 18fb02a1ec
commit c67a69629e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/FloatingNavButton.tsx
View File

@ -1,4 +1,4 @@
import { Dropdown, IconButton, Menu, MenuButton, MenuItem } from "@mui/joy"; import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Icon from "./Icon"; import Icon from "./Icon";
@ -11,13 +11,20 @@ const FloatingNavButton = () => {
<div className="fixed bottom-6 right-6"> <div className="fixed bottom-6 right-6">
<MenuButton <MenuButton
slots={{ root: IconButton }} slots={{ root: IconButton }}
slotProps={{ root: { className: "!bg-white dark:!bg-zinc-900 drop-shadow", variant: "outlined", color: "neutral" } }} slotProps={{
root: { className: "!bg-white dark:!bg-zinc-900 drop-shadow", size: "sm", variant: "outlined", color: "neutral" },
}}
> >
<Icon.MoreVertical className="w-5 h-auto" /> <Icon.MoreVertical className="w-4 h-auto" />
</MenuButton> </MenuButton>
</div> </div>
<Menu placement="top-end"> <Menu placement="top-end">
<MenuItem onClick={() => navigate("/")}>Back to home</MenuItem> <button
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => navigate("/")}
>
Back to home
</button>
</Menu> </Menu>
</Dropdown> </Dropdown>
</> </>

46
web/src/components/Settings/MemberSection.tsx
View File

@ -171,37 +171,35 @@ const PreferencesSection = () => {
<Icon.MoreVertical className="w-4 h-auto" /> <Icon.MoreVertical className="w-4 h-auto" />
</MenuButton> </MenuButton>
<Menu> <Menu>
<> <button
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleChangePasswordClick(user)}
>
{t("setting.account-section.change-password")}
</button>
{user.rowStatus === "NORMAL" ? (
<button <button
className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600" className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleChangePasswordClick(user)} onClick={() => handleArchiveUserClick(user)}
> >
{t("setting.account-section.change-password")} {t("setting.member-section.archive-member")}
</button> </button>
{user.rowStatus === "NORMAL" ? ( ) : (
<>
<button <button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600" className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleArchiveUserClick(user)} onClick={() => handleRestoreUserClick(user)}
> >
{t("setting.member-section.archive-member")} {t("common.restore")}
</button> </button>
) : ( <button
<> className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
<button onClick={() => handleDeleteUserClick(user)}
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600" >
onClick={() => handleRestoreUserClick(user)} {t("setting.member-section.delete-member")}
> </button>
{t("common.restore")} </>
</button> )}
<button
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
onClick={() => handleDeleteUserClick(user)}
>
{t("setting.member-section.delete-member")}
</button>
</>
)}
</>
</Menu> </Menu>
</Dropdown> </Dropdown>
)} )}

6
web/src/components/UserBanner.tsx
View File

@ -23,7 +23,7 @@ const UserBanner = () => {
}, [user]); }, [user]);
const handleMyAccountClick = () => { const handleMyAccountClick = () => {
navigate("/setting"); navigate(`/u/${user?.username}`);
}; };
const handleAboutBtnClick = () => { const handleAboutBtnClick = () => {
@ -41,7 +41,7 @@ const UserBanner = () => {
className="w-auto" className="w-auto"
trigger={ trigger={
<div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700"> <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-lg hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<UserAvatar avatarUrl={user?.avatarUrl} /> <UserAvatar className="shadow" avatarUrl={user?.avatarUrl} />
<span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate"> <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">
{user != undefined ? username : systemStatus.customizedProfile.name} {user != undefined ? username : systemStatus.customizedProfile.name}
</span> </span>
@ -60,7 +60,7 @@ const UserBanner = () => {
className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800" className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
onClick={handleMyAccountClick} onClick={handleMyAccountClick}
> >
<Icon.User className="w-5 h-auto mr-2 opacity-80" /> {t("setting.my-account")} <Icon.User className="w-5 h-auto mr-2 opacity-80" /> {t("common.profile")}
</button> </button>
<a <a
className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800" className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"

5
web/src/locales/en.json
View File

@ -60,14 +60,15 @@
"learn-more": "Learn more", "learn-more": "Learn more",
"beta": "Beta", "beta": "Beta",
"new": "New", "new": "New",
"mark": "Mark",
"profile": "Profile",
"dialog": { "dialog": {
"error": "Error", "error": "Error",
"help": "Help", "help": "Help",
"info": "Information", "info": "Information",
"success": "Success", "success": "Success",
"warning": "Warning" "warning": "Warning"
}, }
"mark": "Mark"
}, },
"router": { "router": {
"back-to-home": "Back to Home" "back-to-home": "Back to Home"

16
web/src/pages/UserProfile.tsx
View File

@ -1,25 +1,25 @@
import { useEffect } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import FloatingNavButton from "@/components/FloatingNavButton"; import FloatingNavButton from "@/components/FloatingNavButton";
import MemoFilter from "@/components/MemoFilter"; import MemoFilter from "@/components/MemoFilter";
import MemoList from "@/components/MemoList"; import MemoList from "@/components/MemoList";
import UserAvatar from "@/components/UserAvatar"; import UserAvatar from "@/components/UserAvatar";
import useLoading from "@/hooks/useLoading"; import useLoading from "@/hooks/useLoading";
import { useGlobalStore, useUserStore } from "@/store/module"; import { useUserStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
const UserProfile = () => { const UserProfile = () => {
const t = useTranslate(); const t = useTranslate();
const globalStore = useGlobalStore();
const userStore = useUserStore(); const userStore = useUserStore();
const loadingState = useLoading(); const loadingState = useLoading();
const user = userStore.state.user; const [user, setUser] = useState<User>();
useEffect(() => { useEffect(() => {
const currentUsername = userStore.getCurrentUsername(); const currentUsername = userStore.getCurrentUsername();
userStore userStore
.getUserByUsername(currentUsername) .getUserByUsername(currentUsername)
.then(() => { .then((user) => {
setUser(user);
loadingState.setFinish(); loadingState.setFinish();
}) })
.catch((error) => { .catch((error) => {
@ -28,12 +28,6 @@ const UserProfile = () => {
}); });
}, [userStore.getCurrentUsername()]); }, [userStore.getCurrentUsername()]);
useEffect(() => {
if (user?.setting.locale) {
globalStore.setLocale(user.setting.locale);
}
}, [user?.setting.locale]);
return ( return (
<> <>
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800"> <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">

13
web/src/store/module/user.ts
View File

@ -71,16 +71,6 @@ export const initialUserState = async () => {
} }
}; };
const getUserIdFromPath = () => {
const pathname = window.location.pathname;
const userIdRegex = /^\/u\/(\d+).*/;
const result = pathname.match(userIdRegex);
if (result && result.length === 2) {
return Number(result[1]);
}
return undefined;
};
const getUsernameFromPath = () => { const getUsernameFromPath = () => {
const pathname = window.location.pathname; const pathname = window.location.pathname;
const usernameRegex = /^\/u\/(\w+).*/; const usernameRegex = /^\/u\/(\w+).*/;
@ -109,7 +99,7 @@ export const useUserStore = () => {
const state = useAppSelector((state) => state.user); const state = useAppSelector((state) => state.user);
const isVisitorMode = () => { const isVisitorMode = () => {
return state.user === undefined || (getUsernameFromPath() && state.user.username !== getUsernameFromPath()); return state.user === undefined || getUsernameFromPath();
}; };
return { return {
@ -118,7 +108,6 @@ export const useUserStore = () => {
return store.getState().user; return store.getState().user;
}, },
isVisitorMode, isVisitorMode,
getUserIdFromPath,
getUsernameFromPath, getUsernameFromPath,
doSignIn, doSignIn,
doSignOut, doSignOut,