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 memo relation style

Browse Source
This commit is contained in:
Steven
2024-01-21 11:22:25 +08:00
parent c38404b5d5
commit fae0b4e900
4 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/CreateMemoRelationDialog.tsx
View File

@ -96,13 +96,12 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1"> <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
{memoList.map((memo) => ( {memoList.map((memo) => (
<div <div
className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through" className="max-w-[50%] text-sm px-2 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:opacity-60 hover:line-through"
key={memo.id} key={memo.name}
onClick={() => handleDeleteMemoRelation(memo)} onClick={() => handleDeleteMemoRelation(memo)}
> >
<span className="opacity-60 shrink-0">#{memo.id}</span> <span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span> <Icon.X className="opacity-60 w-4 h-auto shrink-0 ml-1" />
<Icon.X className="opacity-80 w-4 h-auto shrink-0 ml-1" />
</div> </div>
))} ))}
</div> </div>

5
web/src/components/MemoEditor/RelationListView.tsx
View File

@ -37,13 +37,12 @@ const RelationListView = (props: Props) => {
{referencingMemoList.map((memo) => { {referencingMemoList.map((memo) => {
return ( return (
<div <div
key={memo.id} key={memo.name}
className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through" className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through"
onClick={() => handleDeleteRelation(memo)} onClick={() => handleDeleteRelation(memo)}
> >
<Icon.Link className="w-4 h-auto shrink-0 opacity-80" /> <Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
<span className="px-1 shrink-0 opacity-80">#{memo.id}</span> <span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" /> <Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
</div> </div>
); );

12
web/src/components/MemoRelationListView.tsx
View File

@ -40,7 +40,7 @@ const MemoRelationListView = (props: Props) => {
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2"> <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
{referencingMemoList.map((memo) => { {referencingMemoList.map((memo) => {
return ( return (
<div key={memo.id} className="block w-auto max-w-[50%]"> <div key={memo.name} className="block w-auto max-w-[50%]">
<Link <Link
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80" className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
to={`/m/${memo.name}`} to={`/m/${memo.name}`}
@ -49,8 +49,7 @@ const MemoRelationListView = (props: Props) => {
<Tooltip title="Reference" placement="top"> <Tooltip title="Reference" placement="top">
<Icon.Link className="w-4 h-auto shrink-0 opacity-70" /> <Icon.Link className="w-4 h-auto shrink-0 opacity-70" />
</Tooltip> </Tooltip>
<span className="opacity-70 mx-1">#{memo.id}</span> <span className="truncate ml-1">{memo.content}</span>
<span className="truncate">{memo.content}</span>
</Link> </Link>
</div> </div>
); );
@ -61,17 +60,16 @@ const MemoRelationListView = (props: Props) => {
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2"> <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
{referencedMemoList.map((memo) => { {referencedMemoList.map((memo) => {
return ( return (
<div key={memo.id} className="block w-auto max-w-[50%]"> <div key={memo.name} className="block w-auto max-w-[50%]">
<Link <Link
className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80" className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
to={`/m/${memo.name}`} to={`/m/${memo.name}`}
unstable_viewTransition unstable_viewTransition
> >
<Tooltip title="Backlink" placement="top"> <Tooltip title="Backlink" placement="top">
<Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" /> <Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" />
</Tooltip> </Tooltip>
<span className="opacity-70 mx-1">#{memo.id}</span> <span className="truncate ml-1">{memo.content}</span>
<span className="truncate">{memo.content}</span>
</Link> </Link>
</div> </div>
); );

10
web/src/components/MemoView.tsx
View File

@ -150,7 +150,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
}; };
const handleCopyMemoId = () => { const handleCopyMemoId = () => {
copy(String(memo.id)); copy(memo.name);
toast.success("Copied to clipboard!"); toast.success("Copied to clipboard!");
}; };
@ -246,10 +246,10 @@ const MemoView: React.FC<Props> = (props: Props) => {
{t("common.delete")} {t("common.delete")}
</span> </span>
<Divider className="!my-1" /> <Divider className="!my-1" />
<div className="w-full px-3 text-xs text-gray-400"> <div className="w-full pl-3 pr-2 text-xs text-gray-400">
<span className="cursor-pointer" onClick={handleCopyMemoId}> <div className="font-mono max-w-20 cursor-pointer truncate" onClick={handleCopyMemoId}>
ID: <span className="font-mono">{memo.id}</span> ID: {memo.name}
</span> </div>
</div> </div>
</div> </div>
</div> </div>