mirror of
https://github.com/usememos/memos.git
synced 2024-09-20 22:46:16 +08:00
chore: tweak memo display
This commit is contained in:
Steven
parent
9faee68dab
commit
77b75aa6c4
|
|
@ -25,6 +25,7 @@ import "@/less/memo.less";
|
|||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
showCreator?: boolean;
|
||||
showVisibility?: boolean;
|
||||
showPinnedStyle?: boolean;
|
||||
lazyRendering?: boolean;
|
||||
|
|
@ -45,7 +46,6 @@ const Memo: React.FC<Props> = (props: Props) => {
|
|||
const readonly = memo.creatorUsername !== extractUsernameFromName(user?.name);
|
||||
const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername));
|
||||
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.
|
||||
useEffect(() => {
|
||||
|
|
@ -222,117 +222,108 @@ const Memo: React.FC<Props> = (props: Props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`} ref={memoContainerRef}>
|
||||
<div className="memo-top-wrapper">
|
||||
<div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
|
||||
<span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
|
||||
{displayTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className="btns-container space-x-2">
|
||||
{!readonly && (
|
||||
<div
|
||||
className={`group memo-wrapper ${"memos-" + memo.id} ${memo.pinned && props.showPinnedStyle ? "pinned" : ""}`}
|
||||
ref={memoContainerRef}
|
||||
>
|
||||
<div className="memo-top-wrapper">
|
||||
<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}>
|
||||
{displayTime}
|
||||
</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 && (
|
||||
<>
|
||||
<span className="btn more-action-btn">
|
||||
<Icon.MoreVertical className="icon-img" />
|
||||
</span>
|
||||
<div className="more-action-btns-wrapper">
|
||||
<div className="more-action-btns-container min-w-[6em]">
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
|
||||
{memo.pinned ? (
|
||||
<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")}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn" onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto mr-2" />
|
||||
{t("common.edit")}
|
||||
</span>
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleMarkMemoClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-2" />
|
||||
{t("common.mark")}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto mr-2" />
|
||||
{t("common.share")}
|
||||
</span>
|
||||
<Divider className="!my-1" />
|
||||
<span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
|
||||
<Icon.Archive className="w-4 h-auto mr-2" />
|
||||
{t("common.archive")}
|
||||
</span>
|
||||
<span className="btn text-red-600" onClick={handleDeleteMemoClick}>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" />
|
||||
{t("common.delete")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<MemoContent
|
||||
content={memo.content}
|
||||
onMemoContentClick={handleMemoContentClick}
|
||||
onMemoContentDoubleClick={handleMemoContentDoubleClick}
|
||||
/>
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<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>
|
||||
<div className="btns-container space-x-2">
|
||||
{!readonly && (
|
||||
<>
|
||||
<span className="btn more-action-btn">
|
||||
<Icon.MoreVertical className="icon-img" />
|
||||
</span>
|
||||
<div className="more-action-btns-wrapper">
|
||||
<div className="more-action-btns-container min-w-[6em]">
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
|
||||
{memo.pinned ? <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")}
|
||||
</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>
|
||||
)}
|
||||
<span className="btn" onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto mr-2" />
|
||||
{t("common.edit")}
|
||||
</span>
|
||||
{!memo.parent && (
|
||||
<span className="btn" onClick={handleMarkMemoClick}>
|
||||
<Icon.Link className="w-4 h-auto mr-2" />
|
||||
{t("common.mark")}
|
||||
</span>
|
||||
)}
|
||||
<span className="btn" onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto mr-2" />
|
||||
{t("common.share")}
|
||||
</span>
|
||||
<Divider className="!my-1" />
|
||||
<span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
|
||||
<Icon.Archive className="w-4 h-auto mr-2" />
|
||||
{t("common.archive")}
|
||||
</span>
|
||||
<span className="btn text-red-600" onClick={handleDeleteMemoClick}>
|
||||
<Icon.Trash className="w-4 h-auto mr-2" />
|
||||
{t("common.delete")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<MemoContent
|
||||
content={memo.content}
|
||||
onMemoContentClick={handleMemoContentClick}
|
||||
onMemoContentDoubleClick={handleMemoContentDoubleClick}
|
||||
/>
|
||||
<MemoResourceListView resourceList={memo.resourceList} />
|
||||
<MemoRelationListView memo={memo} relationList={referenceRelations} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState } from "react";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import Icon from "./Icon";
|
||||
import "@/less/preview-image-dialog.less";
|
||||
|
|
@ -35,13 +34,6 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
|
|||
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) => {
|
||||
if (event.touches.length > 1) {
|
||||
// two or more fingers, ignore
|
||||
|
|
@ -126,9 +118,6 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
|
|||
<button className="btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X className="icon-img" />
|
||||
</button>
|
||||
<button className="btn" onClick={handleDownloadBtnClick}>
|
||||
<Icon.Download className="icon-img" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="img-container" onClick={handleImgContainerClick}>
|
||||
<img
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
> .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 {
|
||||
@apply flex flex-row justify-end items-center relative shrink-0;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const Explore = () => {
|
|||
<div className="relative w-full h-auto flex flex-col justify-start items-start">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => (
|
||||
<Memo key={memo.id} memo={memo} lazyRendering />
|
||||
<Memo key={memo.id} memo={memo} lazyRendering showCreator />
|
||||
))}
|
||||
|
||||
{loadingStatus === "fetching" ? (
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ const MemoDetail = () => {
|
|||
<span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
|
||||
</div>
|
||||
{comments.map((comment) => (
|
||||
<Memo key={comment.id} memo={comment} />
|
||||
<Memo key={comment.id} memo={comment} showCreator />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue