usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-24 03:33:52 +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 Icon from "./Icon";
@ -11,13 +11,20 @@ const FloatingNavButton = () => {
<div className="fixed bottom-6 right-6">
<MenuButton
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>
</div>
<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>
</Dropdown>
</>

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

@ -171,7 +171,6 @@ const PreferencesSection = () => {
<Icon.MoreVertical className="w-4 h-auto" />
</MenuButton>
<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)}
@ -201,7 +200,6 @@ const PreferencesSection = () => {
</button>
</>
)}
</>
</Menu>
</Dropdown>
)}

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

@ -23,7 +23,7 @@ const UserBanner = () => {
}, [user]);
const handleMyAccountClick = () => {
navigate("/setting");
navigate(`/u/${user?.username}`);
};
const handleAboutBtnClick = () => {
@ -41,7 +41,7 @@ const UserBanner = () => {
className="w-auto"
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">
<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">
{user != undefined ? username : systemStatus.customizedProfile.name}
</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"
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>
<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"

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

@ -60,14 +60,15 @@
"learn-more": "Learn more",
"beta": "Beta",
"new": "New",
"mark": "Mark",
"profile": "Profile",
"dialog": {
"error": "Error",
"help": "Help",
"info": "Information",
"success": "Success",
"warning": "Warning"
},
"mark": "Mark"
}
},
"router": {
"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 FloatingNavButton from "@/components/FloatingNavButton";
import MemoFilter from "@/components/MemoFilter";
import MemoList from "@/components/MemoList";
import UserAvatar from "@/components/UserAvatar";
import useLoading from "@/hooks/useLoading";
import { useGlobalStore, useUserStore } from "@/store/module";
import { useUserStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
const UserProfile = () => {
const t = useTranslate();
const globalStore = useGlobalStore();
const userStore = useUserStore();
const loadingState = useLoading();
const user = userStore.state.user;
const [user, setUser] = useState<User>();
useEffect(() => {
const currentUsername = userStore.getCurrentUsername();
userStore
.getUserByUsername(currentUsername)
.then(() => {
.then((user) => {
setUser(user);
loadingState.setFinish();
})
.catch((error) => {
@ -28,12 +28,6 @@ const UserProfile = () => {
});
}, [userStore.getCurrentUsername()]);
useEffect(() => {
if (user?.setting.locale) {
globalStore.setLocale(user.setting.locale);
}
}, [user?.setting.locale]);
return (
<>
<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 pathname = window.location.pathname;
const usernameRegex = /^\/u\/(\w+).*/;
@ -109,7 +99,7 @@ export const useUserStore = () => {
const state = useAppSelector((state) => state.user);
const isVisitorMode = () => {
return state.user === undefined || (getUsernameFromPath() && state.user.username !== getUsernameFromPath());
return state.user === undefined || getUsernameFromPath();
};
return {
@ -118,7 +108,6 @@ export const useUserStore = () => {
return store.getState().user;
},
isVisitorMode,
getUserIdFromPath,
getUsernameFromPath,
doSignIn,
doSignOut,