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 header (#1497)

Browse Source 
* chore: update memo header

* chore: update
This commit is contained in:
boojack
2023-04-09 11:05:09 +08:00
committed by GitHub
parent d11083d3b9
commit 91a24ef9ce
20 changed files with 300 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/components/Memo.tsx
View File

@ -5,6 +5,8 @@ import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { Link, useNavigate } from "react-router-dom";
import { useEditorStore, useFilterStore, useMemoStore, useUserStore } from "@/store/module";
import Tooltip from "./kit/Tooltip";
import { showCommonDialog } from "./Dialog/CommonDialog";
import Icon from "./Icon";
import MemoContent from "./MemoContent";
import MemoResources from "./MemoResources";
@ -97,6 +99,18 @@ const Memo: React.FC<Props> = (props: Props) => {
}
};
const handleDeleteMemoClick = async () => {
showCommonDialog({
title: "Delete memo",
content: "Are you sure to delete this memo?",
style: "warning",
dialogName: "delete-memo-dialog",
onConfirm: async () => {
await memoStore.deleteMemoById(memo.id);
},
});
};
const handleGenerateMemoImageBtnClick = () => {
showShareMemo(memo);
};
@ -189,7 +203,6 @@ const Memo: React.FC<Props> = (props: Props) => {
return (
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
{memo.pinned && <div className="corner-container"></div>}
<div className="memo-top-wrapper">
<div className="status-text-container">
<Link className="time-text" to={`/m/${memo.id}`} onClick={handleMemoCreatedTimeClick}>
@ -200,35 +213,45 @@ const Memo: React.FC<Props> = (props: Props) => {
@{memo.creatorName}
</Link>
)}
{memo.visibility !== "PRIVATE" && !isVisitorMode && (
<>
<span className="text-xs mx-1 font-mono text-gray-200 dark:text-gray-600">/</span>
<span className="text-sm text-gray-400 cursor-pointer" onClick={() => handleMemoVisibilityClick(memo.visibility)}>
{t(`memo.visibility.${memo.visibility.toLowerCase()}`)}
</span>
</>
)}
</div>
{!isVisitorMode && (
<div className="btns-container">
<div className="btns-container space-x-2">
{memo.visibility !== "PRIVATE" && (
<Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} side="top">
<div onClick={() => handleMemoVisibilityClick(memo.visibility)}>
{memo.visibility === "PUBLIC" ? (
<Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" />
) : (
<Icon.Users className="w-4 h-auto cursor-pointer rounded text-gray-500 dark:text-gray-400" />
)}
</div>
</Tooltip>
)}
{memo.pinned && <Icon.Bookmark className="w-4 h-auto rounded text-green-600" />}
<span className="btn more-action-btn">
<Icon.MoreHorizontal className="icon-img" />
</span>
<div className="more-action-btns-wrapper">
<div className="more-action-btns-container">
<div className="btns-container">
<div className="btn" onClick={handleTogglePinMemoBtnClick}>
<Icon.Flag className={`icon-img ${memo.pinned ? "text-green-600" : ""}`} />
<span className="tip-text">{memo.pinned ? t("common.unpin") : t("common.pin")}</span>
</div>
<div className="btn" onClick={handleEditMemoClick}>
<Icon.Edit3 className="icon-img" />
<span className="tip-text">{t("common.edit")}</span>
</div>
<div className="btn" onClick={handleGenerateMemoImageBtnClick}>
<Icon.Share className="icon-img" />
<span className="tip-text">{t("common.share")}</span>
</div>
<div className="w-full flex flex-row justify-between px-3 py-2 mb-1 border-b dark:border-zinc-700">
<Tooltip title={memo.pinned ? t("common.unpin") : t("common.pin")} side="top">
<div onClick={handleTogglePinMemoBtnClick}>
{memo.pinned ? (
<Icon.Bookmark className="w-4 h-auto cursor-pointer rounded text-green-600" />
) : (
<Icon.BookmarkPlus className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" />
)}
</div>
</Tooltip>
<Tooltip title={t("common.edit")} side="top">
<Icon.Edit3 className="w-4 h-auto cursor-pointer rounded dark:text-gray-400" onClick={handleEditMemoClick} />
</Tooltip>
<Tooltip title={t("common.share")} side="top">
<Icon.Share
className="w-4 h-auto cursor-pointer rounded dark:text-gray-400"
onClick={handleGenerateMemoImageBtnClick}
/>
</Tooltip>
</div>
<span className="btn" onClick={handleCopyLink}>
{t("memo.copy-link")}
@ -239,9 +262,12 @@ const Memo: React.FC<Props> = (props: Props) => {
<span className="btn" onClick={handleShowEmbedMemoDialog}>
{t("memo.embed")}
</span>
<span className="btn archive-btn" onClick={handleArchiveMemoClick}>
<span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
{t("common.archive")}
</span>
<span className="btn text-red-600" onClick={handleDeleteMemoClick}>
{t("common.delete")}
</span>
</div>
</div>
</div>