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

chore: tweak memo display

Browse source
This commit is contained in:
Steven 2023-12-09 18:57:59 +08:00
parent 9faee68dab
commit 77b75aa6c4
5 changed files with 98 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
web/src/components/Memo.tsx
View file

@ -25,6 +25,7 @@ import "@/less/memo.less";
interface Props { interface Props {
memo: Memo; memo: Memo;
showCreator?: boolean;
showVisibility?: boolean; showVisibility?: boolean;
showPinnedStyle?: boolean; showPinnedStyle?: boolean;
lazyRendering?: boolean; lazyRendering?: boolean;
@ -45,7 +46,6 @@ const Memo: React.FC<Props> = (props: Props) => {
const readonly = memo.creatorUsername !== extractUsernameFromName(user?.name); const readonly = memo.creatorUsername !== extractUsernameFromName(user?.name);
const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername)); const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername));
const referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE"); const referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE");
const commentRelations = memo.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT");
// Prepare memo creator. // Prepare memo creator.
useEffect(() => { useEffect(() => {
@ -222,13 +222,56 @@ const Memo: React.FC<Props> = (props: Props) => {
}; };
return ( return (
<> <div
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`} ref={memoContainerRef}> className={`group memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`}
ref={memoContainerRef}
>
<div className="memo-top-wrapper"> <div className="memo-top-wrapper">
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1"> <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
{props.showCreator && (
<>
<Link to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
<Tooltip title={"Creator"} placement="top">
<span className="flex flex-row justify-start items-center">
<UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator.avatarUrl} />
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
{creator.nickname || extractUsernameFromName(creator.name)}
</span>
</span>
</Tooltip>
</Link>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
</>
)}
<span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}> <span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
{displayTime} {displayTime}
</span> </span>
<div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
<Tooltip title={"Identifier"} placement="top">
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
</Tooltip>
</Link>
{memo.pinned && props.showPinnedStyle && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={"Pinned"} placement="top">
<Icon.Bookmark className="w-4 h-auto text-green-600" />
</Tooltip>
</>
)}
{props.showVisibility && memo.visibility !== "PRIVATE" && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}` as any)} placement="top">
<span>
<VisibilityIcon visibility={memo.visibility} />
</span>
</Tooltip>
</>
)}
</div>
</div> </div>
<div className="btns-container space-x-2"> <div className="btns-container space-x-2">
{!readonly && ( {!readonly && (
@ -240,11 +283,7 @@ const Memo: React.FC<Props> = (props: Props) => {
<div className="more-action-btns-container min-w-[6em]"> <div className="more-action-btns-container min-w-[6em]">
{!memo.parent && ( {!memo.parent && (
<span className="btn" onClick={handleTogglePinMemoBtnClick}> <span className="btn" onClick={handleTogglePinMemoBtnClick}>
{memo.pinned ? ( {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
<Icon.BookmarkMinus className="w-4 h-auto mr-2" />
) : (
<Icon.BookmarkPlus className="w-4 h-auto mr-2" />
)}
{memo.pinned ? t("common.unpin") : t("common.pin")} {memo.pinned ? t("common.unpin") : t("common.pin")}
</span> </span>
)} )}
@ -284,55 +323,7 @@ const Memo: React.FC<Props> = (props: Props) => {
/> />
<MemoResourceListView resourceList={memo.resourceList} /> <MemoResourceListView resourceList={memo.resourceList} />
<MemoRelationListView memo={memo} relationList={referenceRelations} /> <MemoRelationListView memo={memo} relationList={referenceRelations} />
<div className="mt-4 w-full flex flex-row justify-between items-center gap-2">
<div className="flex flex-row justify-start items-center">
{creator && (
<>
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
<Tooltip title={"Identifier"} placement="top">
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
</Tooltip>
</Link>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Link to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
<Tooltip title={"Creator"} placement="top">
<span className="flex flex-row justify-start items-center">
<UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator.avatarUrl} />
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
{creator.nickname || extractUsernameFromName(creator.name)}
</span>
</span>
</Tooltip>
</Link>
{memo.pinned && props.showPinnedStyle && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={"Pinned"} placement="top">
<Icon.Bookmark className="w-4 h-auto text-green-600" />
</Tooltip>
</>
)}
{props.showVisibility && memo.visibility !== "PRIVATE" && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}` as any)} placement="top">
<span>
<VisibilityIcon visibility={memo.visibility} />
</span>
</Tooltip>
</>
)}
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
<Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span>
</Link>
</>
)}
</div> </div>
</div>
</div>
</>
); );
}; };

11
web/src/components/PreviewImageDialog.tsx
View file

@ -1,5 +1,4 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { getDateTimeString } from "@/helpers/datetime";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import Icon from "./Icon"; import Icon from "./Icon";
import "@/less/preview-image-dialog.less"; import "@/less/preview-image-dialog.less";
@ -35,13 +34,6 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
destroy(); destroy();
}; };
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrls[currentIndex];
a.download = `memos-${getDateTimeString(Date.now())}.png`;
a.click();
};
const handleTouchStart = (event: React.TouchEvent) => { const handleTouchStart = (event: React.TouchEvent) => {
if (event.touches.length > 1) { if (event.touches.length > 1) {
// two or more fingers, ignore // two or more fingers, ignore
@ -126,9 +118,6 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
<button className="btn" onClick={handleCloseBtnClick}> <button className="btn" onClick={handleCloseBtnClick}>
<Icon.X className="icon-img" /> <Icon.X className="icon-img" />
</button> </button>
<button className="btn" onClick={handleDownloadBtnClick}>
<Icon.Download className="icon-img" />
</button>
</div> </div>
<div className="img-container" onClick={handleImgContainerClick}> <div className="img-container" onClick={handleImgContainerClick}>
<img <img

2
web/src/less/memo.less
View file

@ -6,7 +6,7 @@
} }
> .memo-top-wrapper { > .memo-top-wrapper {
@apply flex flex-row justify-between items-center w-full h-6 mb-1; @apply flex flex-row justify-between items-center w-full h-6;
> .btns-container { > .btns-container {
@apply flex flex-row justify-end items-center relative shrink-0; @apply flex flex-row justify-end items-center relative shrink-0;

2
web/src/pages/Explore.tsx
View file

@ -83,7 +83,7 @@ const Explore = () => {
<div className="relative w-full h-auto flex flex-col justify-start items-start"> <div className="relative w-full h-auto flex flex-col justify-start items-start">
<MemoFilter /> <MemoFilter />
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<Memo key={memo.id} memo={memo} lazyRendering /> <Memo key={memo.id} memo={memo} lazyRendering showCreator />
))} ))}
{loadingStatus === "fetching" ? ( {loadingStatus === "fetching" ? (

2
web/src/pages/MemoDetail.tsx
View file

@ -210,7 +210,7 @@ const MemoDetail = () => {
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span> <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
</div> </div>
{comments.map((comment) => ( {comments.map((comment) => (
<Memo key={comment.id} memo={comment} /> <Memo key={comment.id} memo={comment} showCreator />
))} ))}
</> </>
)} )}