YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-04-01 03:20:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak user profile

Browse Source
This commit is contained in:
Steven 2024-03-14 00:13:56 +08:00
parent 2516431b20
commit 9ce381abb9
4 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/Navigation.tsx
View File

@ -132,7 +132,7 @@ const Navigation = (props: Props) => {
<NavLink
className={({ isActive }) =>
classNames(
"px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
"px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-400 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
collapsed ? "" : "w-full px-4",
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent",
)
@ -149,7 +149,7 @@ const Navigation = (props: Props) => {
) : (
navLink.icon
)}
{!props.collapsed && <span className="ml-3">{navLink.title}</span>}
{!props.collapsed && <span className="ml-3 truncate">{navLink.title}</span>}
</NavLink>
))}
</div>

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

@ -31,12 +31,12 @@ const UserBanner = (props: Props) => {
<MenuButton disabled={!user} slots={{ root: "div" }}>
<div
className={classNames(
"py-1 my-1 w-auto flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-300",
"py-1 my-1 w-auto flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-400",
collapsed ? "px-1" : "px-3",
)}
>
<UserAvatar className="shadow shrink-0" avatarUrl={avatarUrl} />
{!collapsed && <span className="ml-2 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>}
{!collapsed && <span className="ml-2 text-lg font-medium text-slate-800 dark:text-gray-300 shrink truncate">{title}</span>}
</div>
</MenuButton>
<Menu placement="bottom-start" style={{ zIndex: "9999" }}>

2
web/src/main.tsx
View File

@ -29,7 +29,7 @@ import theme from "./theme";
<CommonContextProvider>
<RouterProvider router={router} />
</CommonContextProvider>
<Toaster position="top-right" />
<Toaster position="top-right" toastOptions={{ className: "dark:bg-zinc-700 dark:text-gray-300" }} />
</CssVarsProvider>
</Provider>,
);

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

@ -1,4 +1,5 @@
import { Button } from "@mui/joy";
import copy from "copy-to-clipboard";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
@ -85,6 +86,15 @@ const UserProfile = () => {
nextPageTokenRef.current = data.nextPageToken;
};
const handleCopyProfileLink = () => {
if (!user) {
return;
}
copy(`${window.location.origin}/u/${encodeURIComponent(user.username)}`);
toast.success(t("message.copied"));
};
return (
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<MobileHeader />
@ -92,17 +102,28 @@ const UserProfile = () => {
{!loadingState.isLoading &&
(user ? (
<>
<div className="relative -mt-6 top-8 w-full flex justify-end items-center">
<div className="my-4 w-full flex justify-end items-center gap-2">
<a className="" href={`/u/${encodeURIComponent(user?.username)}/rss.xml`} target="_blank" rel="noopener noreferrer">
<Button color="neutral" variant="outlined" endDecorator={<Icon.Rss className="w-4 h-auto opacity-60" />}>
RSS
</Button>
</a>
<Button
color="neutral"
variant="outlined"
endDecorator={<Icon.ExternalLink className="w-4 h-auto opacity-60" />}
onClick={handleCopyProfileLink}
>
Share
</Button>
</div>
<div className="w-full flex flex-col justify-start items-center py-8">
<UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
<div className="w-full flex flex-row justify-center items-center">
<p className="text-3xl text-black leading-none opacity-80 dark:text-gray-200">{user?.nickname}</p>
<div className="w-full flex flex-row justify-start items-center pt-4 pb-8 px-4">
<UserAvatar className="!w-16 !h-16 drop-shadow mr-3" avatarUrl={user?.avatarUrl} />
<div className="w-auto max-w-[calc(100%-6rem)] flex flex-col justify-center items-start">
<p className="w-full text-4xl text-black leading-none opacity-80 dark:text-gray-200 truncate">
{user.nickname || user.username}
</p>
<p className="w-full mt-1 text-gray-500 leading-none opacity-80 dark:text-gray-400 truncate">{user.description}</p>
</div>
</div>
<MemoFilter className="px-2 pb-3" />