YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update inbox messages style

Browse Source
This commit is contained in:
johnnyjoy
2024-10-19 21:01:02 +08:00
parent 435bd5c44f
commit 199d5680e6
2 changed files with 51 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/components/Inbox/MemoCommentMessage.tsx
View File

@ -1,9 +1,10 @@
import { Tooltip } from "@mui/joy"; import { Tooltip } from "@mui/joy";
import clsx from "clsx"; import clsx from "clsx";
import { InboxIcon, MessageCircleIcon } from "lucide-react"; import { InboxIcon, LoaderIcon, MessageCircleIcon } from "lucide-react";
import { useEffect, useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { activityServiceClient } from "@/grpcweb"; import { activityServiceClient } from "@/grpcweb";
import useAsyncEffect from "@/hooks/useAsyncEffect";
import useNavigateTo from "@/hooks/useNavigateTo"; import useNavigateTo from "@/hooks/useNavigateTo";
import { activityNamePrefix, memoNamePrefix, useInboxStore, useMemoStore, useUserStore } from "@/store/v1"; import { activityNamePrefix, memoNamePrefix, useInboxStore, useMemoStore, useUserStore } from "@/store/v1";
import { Inbox, Inbox_Status } from "@/types/proto/api/v1/inbox_service"; import { Inbox, Inbox_Status } from "@/types/proto/api/v1/inbox_service";
@ -23,13 +24,13 @@ const MemoCommentMessage = ({ inbox }: Props) => {
const userStore = useUserStore(); const userStore = useUserStore();
const [relatedMemo, setRelatedMemo] = useState<Memo | undefined>(undefined); const [relatedMemo, setRelatedMemo] = useState<Memo | undefined>(undefined);
const [sender, setSender] = useState<User | undefined>(undefined); const [sender, setSender] = useState<User | undefined>(undefined);
const [initialized, setInitialized] = useState<boolean>(false);
useEffect(() => { useAsyncEffect(async () => {
if (!inbox.activityId) { if (!inbox.activityId) {
return; return;
} }
(async () => {
const activity = await activityServiceClient.getActivity({ const activity = await activityServiceClient.getActivity({
name: `${activityNamePrefix}${inbox.activityId}`, name: `${activityNamePrefix}${inbox.activityId}`,
}); });
@ -42,8 +43,8 @@ const MemoCommentMessage = ({ inbox }: Props) => {
setRelatedMemo(memo); setRelatedMemo(memo);
const sender = await userStore.getOrFetchUserByName(inbox.sender); const sender = await userStore.getOrFetchUserByName(inbox.sender);
setSender(sender); setSender(sender);
setInitialized(true);
} }
})();
}, [inbox.activityId]); }, [inbox.activityId]);
const handleNavigateToMemo = async () => { const handleNavigateToMemo = async () => {
@ -86,16 +87,21 @@ const MemoCommentMessage = ({ inbox }: Props) => {
</div> </div>
<div <div
className={clsx( className={clsx(
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700", "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
inbox.status !== Inbox_Status.UNREAD && "opacity-60", inbox.status !== Inbox_Status.UNREAD && "opacity-60",
)} )}
> >
{initialized ? (
<>
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<span className="text-xs text-gray-500">{inbox.createTime?.toLocaleString()}</span> <span className="text-sm text-gray-500">{inbox.createTime?.toLocaleString()}</span>
<div> <div>
{inbox.status === Inbox_Status.UNREAD && ( {inbox.status === Inbox_Status.UNREAD && (
<Tooltip title={t("common.archive")} placement="top"> <Tooltip title={t("common.archive")} placement="top">
<InboxIcon className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600" onClick={() => handleArchiveMessage()} /> <InboxIcon
className="w-4 h-auto cursor-pointer text-gray-400 hover:text-blue-600"
onClick={() => handleArchiveMessage()}
/>
</Tooltip> </Tooltip>
)} )}
</div> </div>
@ -110,6 +116,12 @@ const MemoCommentMessage = ({ inbox }: Props) => {
interpolation: { escapeValue: false }, interpolation: { escapeValue: false },
})} })}
</p> </p>
</>
) : (
<div className="w-full flex flex-row justify-center items-center my-2">
<LoaderIcon className="animate-spin text-zinc-500" />
</div>
)}
</div> </div>
</div> </div>
); );

4
web/src/components/Inbox/VersionUpdateMessage.tsx
View File

@ -71,12 +71,12 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
</div> </div>
<div <div
className={clsx( className={clsx(
"border w-full p-3 px-4 rounded-lg flex flex-col justify-start items-start gap-2 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700", "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 dark:border-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-700",
inbox.status !== Inbox_Status.UNREAD && "opacity-60", inbox.status !== Inbox_Status.UNREAD && "opacity-60",
)} )}
> >
<div className="w-full flex flex-row justify-between items-center"> <div className="w-full flex flex-row justify-between items-center">
<span className="text-xs text-gray-500">{inbox.createTime?.toLocaleString()}</span> <span className="text-sm text-gray-500">{inbox.createTime?.toLocaleString()}</span>
<div> <div>
{inbox.status === Inbox_Status.UNREAD && ( {inbox.status === Inbox_Status.UNREAD && (
<Tooltip title={t("common.archive")} placement="top"> <Tooltip title={t("common.archive")} placement="top">