YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-26 23:50:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak embeded memo style

Browse Source
This commit is contained in:
Steven 2024-07-17 22:48:22 +08:00
parent ef7e2151dc
commit 5704aaad08
2 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/HomeSidebar/TagsSection.tsx
View File

@ -60,17 +60,19 @@ const TagsSection = (props: Props) => {
<div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar"> <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
<div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none"> <div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none">
<span>{t("common.tags")}</span> <span>{t("common.tags")}</span>
<Popover> {tagAmounts.length > 0 && (
<PopoverTrigger> <Popover>
<Icon.MoreHorizontal className="w-4 h-auto shrink-0 opacity-60" /> <PopoverTrigger>
</PopoverTrigger> <Icon.MoreVertical className="w-4 h-auto shrink-0 opacity-60" />
<PopoverContent> </PopoverTrigger>
<div className="w-auto flex flex-row justify-between items-center gap-2"> <PopoverContent>
<span className="text-sm shrink-0">Tree mode</span> <div className="w-auto flex flex-row justify-between items-center gap-2">
<Switch size="sm" checked={treeMode} onChange={(event) => setTreeMode(event.target.checked)} /> <span className="text-sm shrink-0">Tree mode</span>
</div> <Switch size="sm" checked={treeMode} onChange={(event) => setTreeMode(event.target.checked)} />
</PopoverContent> </div>
</Popover> </PopoverContent>
</Popover>
)}
</div> </div>
{tagAmounts.length > 0 ? ( {tagAmounts.length > 0 ? (
treeMode ? ( treeMode ? (

38
web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
View File

@ -1,3 +1,4 @@
import clsx from "clsx";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useContext, useEffect } from "react"; import { useContext, useEffect } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@ -43,22 +44,20 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
// Add the memo to the set of embedded memos. This is used to prevent infinite loops when a memo embeds itself. // Add the memo to the set of embedded memos. This is used to prevent infinite loops when a memo embeds itself.
context.embeddedMemos.add(resourceName); context.embeddedMemos.add(resourceName);
const contentNode = useSnippet ? ( const contentNode = useSnippet ? (
<div className={inlineMode ? "" : "line-clamp-3"}>{memo.snippet}</div> <div className={clsx("text-gray-800 dark:text-gray-400", inlineMode ? "" : "line-clamp-3")}>{memo.snippet}</div>
) : ( ) : (
<MemoContent <>
contentClassName={inlineMode ? "" : "line-clamp-3"} <MemoContent
memoName={memo.name} contentClassName={inlineMode ? "" : "line-clamp-3"}
nodes={memo.nodes} memoName={memo.name}
embeddedMemos={context.embeddedMemos} nodes={memo.nodes}
/> embeddedMemos={context.embeddedMemos}
/>
<MemoResourceListView resources={memo.resources} />
</>
); );
if (inlineMode) { if (inlineMode) {
return ( return <div className="w-full">{contentNode}</div>;
<div className="w-full">
{contentNode}
<MemoResourceListView resources={memo.resources} />
</div>
);
} }
const copyMemoUid = (uid: string) => { const copyMemoUid = (uid: string) => {
@ -67,22 +66,21 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
}; };
return ( return (
<div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow"> <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow">
<div className="w-full mb-1 flex flex-row justify-between items-center"> <div className="w-full mb-1 flex flex-row justify-between items-center text-gray-400 dark:text-gray-500">
<div className="text-sm leading-6 text-gray-400 select-none"> <div className="text-sm leading-5 select-none">
<relative-time datetime={memo.displayTime?.toISOString()} format="datetime" tense="past"></relative-time> <relative-time datetime={memo.displayTime?.toISOString()} format="datetime" tense="past"></relative-time>
</div> </div>
<div className="flex justify-end items-center gap-1"> <div className="flex justify-end items-center gap-1">
<span className="text-xs opacity-40 leading-4 cursor-pointer hover:opacity-60" onClick={() => copyMemoUid(memo.uid)}> <span className="text-xs opacity-60 leading-5 cursor-pointer hover:opacity-80" onClick={() => copyMemoUid(memo.uid)}>
{memo.uid.slice(0, 8)} {memo.uid.slice(0, 8)}
</span> </span>
<Link className="hover:opacity-80" to={`/m/${memo.uid}`} unstable_viewTransition> <Link className="opacity-60 hover:opacity-80" to={`/m/${memo.uid}`} unstable_viewTransition>
<Icon.ArrowUpRight className="w-5 h-auto opacity-80 text-gray-400" /> <Icon.ArrowUpRight className="w-5 h-auto" />
</Link> </Link>
</div> </div>
</div> </div>
{contentNode} {contentNode}
<MemoResourceListView resources={memo.resources} />
</div> </div>
); );
}; };