usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-10 01:10:52 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: add properties to memo detail sidebar

Browse source
This commit is contained in:
Steven 2024-07-08 23:14:00 +08:00
parent 5e3ed201b4
commit 626c972d9c
2 changed files with 59 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/package.json
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"
} }

53
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
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,22 +26,57 @@ 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>
)} )}
{hasSpecialProperty && (
<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">
<span>Properties</span>
</p>
<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">
{property.hasLink && (
<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.Link className="w-4 h-auto mr-1" />
<span className="block text-sm">{t("memo.links")}</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>
)}
{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"> <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>{t("common.tags")}</span>
{memo.property.tags.length > 0 && <span className="shrink-0">({memo.property.tags.length})</span>} <span className="shrink-0">({property.tags.length})</span>
</div> </div>
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1"> <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
{memo.property.tags.map((tag) => ( {property.tags.map((tag) => (
<div <div
key={tag} 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" 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"
@ -55,6 +88,8 @@ const MemoDetailSidebar = ({ memo, className }: Props) => {
</div> </div>
))} ))}
</div> </div>
</>
)}
</div> </div>
</aside> </aside>
); );