aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: add properties to memo detail sidebar

Browse Source
pull/3662/head
Steven 8 months ago
parent 5e3ed201b4
commit 626c972d9c
2 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File

3
web/package.json
Unescape Escape View File

@ -70,6 +70,5 @@
"protobufjs": "^7.3.2", "protobufjs": "^7.3.2",
"typescript": "^5.5.2", "typescript": "^5.5.2",
"vite": "^5.3.1" "vite": "^5.3.1"
}, }
"packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631"
} }

81
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import clsx from "clsx"; import clsx from "clsx";
import { isEqual } from "lodash-es"; import { isEqual } from "lodash-es";
import { Memo } from "@/types/proto/api/v1/memo_service"; import { Memo, MemoProperty } from "@/types/proto/api/v1/memo_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import Icon from "../Icon"; import Icon from "../Icon";
@ -11,10 +11,8 @@ interface Props {
const MemoDetailSidebar = ({ memo, className }: Props) => { const MemoDetailSidebar = ({ memo, className }: Props) => {
const t = useTranslate(); const t = useTranslate();
const property = memo.property as MemoProperty;
if (!memo.property) { const hasSpecialProperty = property.hasLink || property.hasTaskList || property.hasCode || property.hasIncompleteTasks;
return;
}
return ( return (
<aside <aside
@ -28,33 +26,70 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
<p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none"> <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
<span>Created at</span> <span>Created at</span>
</p> </p>
<p className="text-sm dark:text-gray-400">{memo.createTime?.toLocaleString()}</p> <p className="text-sm text-gray-500 dark:text-gray-400">{memo.createTime?.toLocaleString()}</p>
</div> </div>
{!isEqual(memo.createTime, memo.updateTime) && ( {!isEqual(memo.createTime, memo.updateTime) && (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none"> <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
<span>Last updated at</span> <span>Last updated at</span>
</p> </p>
<p className="text-sm dark:text-gray-400">{memo.updateTime?.toLocaleString()}</p> <p className="text-sm text-gray-500 dark:text-gray-400">{memo.updateTime?.toLocaleString()}</p>
</div> </div>
)} )}
<div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none"> {hasSpecialProperty && (
<span>{t("common.tags")}</span> <div className="w-full flex flex-col">
{memo.property.tags.length > 0 && <span className="shrink-0">({memo.property.tags.length})</span>} <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
</div> <span>Properties</span>
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1"> </p>
{memo.property.tags.map((tag) => ( <div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap text-gray-500 dark:text-gray-400">
<div {property.hasLink && (
key={tag} <div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800" <div className="w-auto flex justify-start items-center mr-1">
> <Icon.Link className="w-4 h-auto mr-1" />
<Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" /> <span className="block text-sm">{t("memo.links")}</span>
<div className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}> </div>
<span className="truncate dark:opacity-80">{tag}</span> </div>
</div> )}
{property.hasTaskList && (
<div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
<div className="w-auto flex justify-start items-center mr-1">
<Icon.CheckCircle className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.to-do")}</span>
</div>
</div>
)}
{property.hasCode && (
<div className="w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center">
<div className="w-auto flex justify-start items-center mr-1">
<Icon.Code2 className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.code")}</span>
</div>
</div>
)}
</div> </div>
))} </div>
</div> )}
{property.tags.length > 0 && (
<>
<div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 dark:text-gray-500 select-none">
<span>{t("common.tags")}</span>
<span className="shrink-0">({property.tags.length})</span>
</div>
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
{property.tags.map((tag) => (
<div
key={tag}
className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
>
<Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
<div className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}>
<span className="truncate dark:opacity-80">{tag}</span>
</div>
</div>
))}
</div>
</>
)}
</div> </div>
</aside> </aside>
); );

Write Preview
Loading…
Cancel
Save