mirror of https://github.com/usememos/memos
chore: tweak memo view
Steven
1 year ago
parent
4081a6f5ad
commit
60efd3ac32
@ -0,0 +1,128 @@
|
||||
import { Divider, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
|
||||
import copy from "copy-to-clipboard";
|
||||
import toast from "react-hot-toast";
|
||||
import Icon from "@/components/Icon";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
import { RowStatus } from "@/types/proto/api/v2/common";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import { showCommonDialog } from "./Dialog/CommonDialog";
|
||||
import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
|
||||
import showShareMemoDialog from "./ShareMemoDialog";
|
||||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
showPinned?: boolean;
|
||||
}
|
||||
|
||||
const MemoActionMenu = (props: Props) => {
|
||||
const { memo, showPinned } = props;
|
||||
const t = useTranslate();
|
||||
const memoStore = useMemoStore();
|
||||
|
||||
const handleTogglePinMemoBtnClick = async () => {
|
||||
try {
|
||||
if (memo.pinned) {
|
||||
await memoStore.updateMemo(
|
||||
{
|
||||
id: memo.id,
|
||||
pinned: false,
|
||||
},
|
||||
["pinned"],
|
||||
);
|
||||
} else {
|
||||
await memoStore.updateMemo(
|
||||
{
|
||||
id: memo.id,
|
||||
pinned: true,
|
||||
},
|
||||
["pinned"],
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditMemoClick = () => {
|
||||
showMemoEditorDialog({
|
||||
memoId: memo.id,
|
||||
cacheKey: `${memo.id}-${memo.updateTime}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleArchiveMemoClick = async () => {
|
||||
try {
|
||||
await memoStore.updateMemo(
|
||||
{
|
||||
id: memo.id,
|
||||
rowStatus: RowStatus.ARCHIVED,
|
||||
},
|
||||
["row_status"],
|
||||
);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteMemoClick = async () => {
|
||||
showCommonDialog({
|
||||
title: t("memo.delete-memo"),
|
||||
content: t("memo.delete-confirm"),
|
||||
style: "danger",
|
||||
dialogName: "delete-memo-dialog",
|
||||
onConfirm: async () => {
|
||||
await memoStore.deleteMemo(memo.id);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyMemoId = () => {
|
||||
copy(memo.name);
|
||||
toast.success("Copied to clipboard!");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dropdown>
|
||||
<MenuButton slots={{ root: "div" }}>
|
||||
<span className="h-7 w-7 flex justify-center items-center rounded-full hover:opacity-70">
|
||||
<Icon.MoreHorizontal className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
|
||||
</span>
|
||||
</MenuButton>
|
||||
<Menu className="text-sm" size="sm" placement="bottom-end">
|
||||
{showPinned && (
|
||||
<MenuItem onClick={handleTogglePinMemoBtnClick}>
|
||||
{memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto" /> : <Icon.BookmarkPlus className="w-4 h-auto" />}
|
||||
{memo.pinned ? t("common.unpin") : t("common.pin")}
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem onClick={handleEditMemoClick}>
|
||||
<Icon.Edit3 className="w-4 h-auto" />
|
||||
{t("common.edit")}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => showShareMemoDialog(memo)}>
|
||||
<Icon.Share className="w-4 h-auto" />
|
||||
{t("common.share")}
|
||||
</MenuItem>
|
||||
<Divider className="!my-1" />
|
||||
<MenuItem color="warning" onClick={handleArchiveMemoClick}>
|
||||
<Icon.Archive className="w-4 h-auto" />
|
||||
{t("common.archive")}
|
||||
</MenuItem>
|
||||
<MenuItem color="danger" onClick={handleDeleteMemoClick}>
|
||||
<Icon.Trash className="w-4 h-auto" />
|
||||
{t("common.delete")}
|
||||
</MenuItem>
|
||||
<Divider className="!my-1" />
|
||||
<div className="-mt-0.5 pl-2 pr-2 text-xs text-gray-400">
|
||||
<div className="font-mono max-w-20 cursor-pointer truncate" onClick={handleCopyMemoId}>
|
||||
ID: {memo.name}
|
||||
</div>
|
||||
</div>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoActionMenu;
|
||||
@ -1,68 +0,0 @@
|
||||
.memo-wrapper {
|
||||
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
|
||||
|
||||
&.pinned {
|
||||
@apply border-gray-200 border dark:border-zinc-700;
|
||||
}
|
||||
|
||||
> .memo-top-wrapper {
|
||||
@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;
|
||||
|
||||
> .more-action-btns-wrapper {
|
||||
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
|
||||
|
||||
> .more-action-btns-container {
|
||||
@apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
> .btn {
|
||||
@apply w-full text-sm leading-6 py-1 px-3 rounded justify-start cursor-pointer select-none dark:text-gray-300;
|
||||
|
||||
&.archive-btn {
|
||||
@apply text-orange-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply flex flex-row justify-center items-center leading-6 text-sm rounded hover:bg-gray-200 dark:hover:bg-zinc-600;
|
||||
|
||||
&.more-action-btn {
|
||||
@apply w-auto opacity-50 cursor-default hover:bg-transparent;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-4 h-auto dark:text-gray-300;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& + .more-action-btns-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.final-confirm {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .memo-content-wrapper {
|
||||
@apply mt-1;
|
||||
|
||||
> .memo-content-text {
|
||||
.tag-span {
|
||||
@apply cursor-pointer hover:opacity-80;
|
||||
}
|
||||
|
||||
.img {
|
||||
@apply max-w-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue