usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-09-17 14:57:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add comments icon

Browse Source
This commit is contained in:
Steven 2024-03-02 11:29:21 +08:00
parent 7e23ceb242
commit 9a8a1d017e
3 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/MemoActionMenu.tsx
View File

@ -1,4 +1,5 @@
import { Divider, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
import classNames from "classnames";
import copy from "copy-to-clipboard";
import toast from "react-hot-toast";
import Icon from "@/components/Icon";
@ -12,6 +13,7 @@ import showShareMemoDialog from "./ShareMemoDialog";
interface Props {
memo: Memo;
className?: string;
hiddenActions?: ("edit" | "archive" | "delete" | "share" | "pin")[];
onArchived?: () => void;
onDeleted?: () => void;
@ -94,7 +96,7 @@ const MemoActionMenu = (props: Props) => {
return (
<Dropdown>
<MenuButton slots={{ root: "div" }}>
<span className="h-7 w-7 flex justify-center items-center rounded-full hover:opacity-70">
<span className={classNames("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
<Icon.MoreVertical className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
</span>
</MenuButton>

20
web/src/components/MemoView.tsx
View File

@ -42,7 +42,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
const memoContainerRef = useRef<HTMLDivElement>(null);
const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
const commentAmount = memo.relations.filter((relation) => relation.type === MemoRelation_Type.COMMENT).length;
const readonly = memo.creator !== user?.name;
useEffect(() => {
@ -124,8 +125,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
</>
)}
</div>
<div className="flex flex-row justify-end items-center select-none">
<div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center">
<div className="flex flex-row justify-end items-center select-none gap-1">
<div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center gap-1">
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
<Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
<span className="h-7 w-7 flex justify-center items-center hover:opacity-70">
@ -135,6 +136,17 @@ const MemoView: React.FC<Props> = (props: Props) => {
)}
{currentUser && <ReactionSelector className="border-none" memo={memo} />}
</div>
<Link
className={classNames(
"flex flex-row justify-start items-center hover:opacity-70",
commentAmount === 0 && "invisible group-hover:visible",
)}
to={`/m/${memo.name}`}
unstable_viewTransition
>
<Icon.MessageCircleMore className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
{commentAmount > 0 && <span className="text-xs text-gray-500 dark:text-gray-400">{commentAmount}</span>}
</Link>
{!readonly && <MemoActionMenu memo={memo} hiddenActions={props.showPinned ? [] : ["pin"]} />}
</div>
</div>
@ -146,7 +158,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
onClick={handleMemoContentClick}
/>
<MemoResourceListView resources={memo.resources} />
<MemoRelationListView memo={memo} relations={referenceRelations} />
<MemoRelationListView memo={memo} relations={referencedMemos} />
<MemoReactionistView memo={memo} reactions={memo.reactions} />
</div>
);

3
web/src/pages/MemoDetail.tsx
View File

@ -155,7 +155,7 @@ const MemoDetail = () => {
<MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} readonly={readonly} />
<MemoResourceListView resources={memo.resources} />
<MemoRelationListView memo={memo} relations={referenceRelations} />
<div className="w-full mt-3 flex flex-row justify-between items-center gap-2">
<div className="w-full mt-3 select-none flex flex-row justify-between items-center gap-2">
<div className="flex flex-row justify-start items-center">
{!readonly && (
<Select
@ -197,6 +197,7 @@ const MemoDetail = () => {
</Tooltip>
{!readonly && (
<MemoActionMenu
className="ml-1"
memo={memo}
hiddenActions={["pin", "edit", "share"]}
onArchived={handleMemoArchived}