aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: adjust memo elements

Browse Source
pull/2311/head
Steven 2 years ago
parent c54febd024
commit fbbfb11916
4 changed files with 92 additions and 50 deletions
Show Stats Download Patch File Download Diff File

62
web/src/components/Memo.tsx
Unescape Escape View File

@ -1,9 +1,9 @@
import { Divider } from "@mui/joy";
import { Divider, Select, Tooltip, Option } from "@mui/joy";
import { memo, useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { UNKNOWN_ID } from "@/helpers/consts";
import { UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
import { getRelativeTimeString } from "@/helpers/datetime";
import useCurrentUser from "@/hooks/useCurrentUser";
import useNavigateTo from "@/hooks/useNavigateTo";
@ -90,6 +90,14 @@ const Memo: React.FC<Props> = (props: Props) => {
return <div className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
}
const handleMemoVisibilityOptionChanged = async (value: string) => {
const visibilityValue = value as Visibility;
await memoStore.patchMemo({
id: memo.id,
visibility: visibilityValue,
});
};
const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
if (event.altKey) {
showChangeMemoCreatedTsDialog(memo.id);
@ -227,15 +235,6 @@ const Memo: React.FC<Props> = (props: Props) => {
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "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">
{creator && (
<>
<Link className="flex flex-row justify-start items-center" to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
<UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator.nickname}</span>
</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>
@ -282,6 +281,47 @@ const Memo: React.FC<Props> = (props: Props) => {
/>
<MemoResourceListView resourceList={memo.resourceList} />
<MemoRelationListView relationList={memo.relationList} />
<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={"The identifier of memo"} 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 className="flex flex-row justify-start items-center" to={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
<UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator.nickname}</span>
</Link>
{props.showVisibility && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={"The visibility of memo"} placement="top">
<Select
className="w-auto text-sm"
variant="plain"
value={memo.visibility}
onChange={(_, visibility) => {
if (visibility) {
handleMemoVisibilityOptionChanged(visibility);
}
}}
>
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
<Option key={item.value} value={item.value} className="whitespace-nowrap">
{item.text}
</Option>
))}
</Select>
</Tooltip>
</>
)}
</>
)}
</div>
</div>
</div>
</>
);

2
web/src/components/Settings/PreferencesSection.tsx
Unescape Escape View File

@ -19,7 +19,7 @@ const PreferencesSection = () => {
const visibilitySelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
return {
value: item.value,
text: t(`memo.visibility.${item.text.toLowerCase() as Lowercase<typeof item.text>}`),
text: t(`memo.visibility.${item.value.toLowerCase() as Lowercase<typeof item.value>}`),
};
});

6
web/src/helpers/consts.ts
Unescape Escape View File

@ -9,9 +9,9 @@ export const ANIMATION_DURATION = 200;
export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
export const VISIBILITY_SELECTOR_ITEMS = [
{ text: "PRIVATE", value: "PRIVATE" },
{ text: "PROTECTED", value: "PROTECTED" },
{ text: "PUBLIC", value: "PUBLIC" },
{ text: "Private", value: "PRIVATE" },
{ text: "Workspace", value: "PROTECTED" },
{ text: "Public", value: "PUBLIC" },
] as const;
// space width for tab action in editor

72
web/src/pages/MemoDetail.tsx
Unescape Escape View File

@ -1,9 +1,8 @@
import { Divider, Select, Tooltip, Option, IconButton } from "@mui/joy";
import copy from "copy-to-clipboard";
import { toLower } from "lodash-es";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
import { Link, useParams } from "react-router-dom";
import FloatingNavButton from "@/components/FloatingNavButton";
import Icon from "@/components/Icon";
import MemoContent from "@/components/MemoContent";
@ -16,7 +15,7 @@ import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
import { getDateTimeString } from "@/helpers/datetime";
import useCurrentUser from "@/hooks/useCurrentUser";
import useNavigateTo from "@/hooks/useNavigateTo";
import { useMemoStore } from "@/store/module";
import { useGlobalStore, useMemoStore } from "@/store/module";
import { useUserV1Store } from "@/store/v1";
import { User } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";
@ -25,10 +24,12 @@ const MemoDetail = () => {
const params = useParams();
const navigateTo = useNavigateTo();
const t = useTranslate();
const globalStore = useGlobalStore();
const memoStore = useMemoStore();
const userV1Store = useUserV1Store();
const currentUser = useCurrentUser();
const [user, setUser] = useState<User>();
const { systemStatus } = globalStore.state;
const memoId = Number(params.memoId);
const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
const allowEdit = memo?.creatorUsername === currentUser?.username;
@ -54,13 +55,6 @@ const MemoDetail = () => {
return null;
}
const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
return {
value: item.value,
text: t(`memo.visibility.${toLower(item.value) as Lowercase<typeof item.value>}`),
};
});
const handleMemoVisibilityOptionChanged = async (value: string) => {
const visibilityValue = value as Visibility;
await memoStore.patchMemo({
@ -85,42 +79,50 @@ const MemoDetail = () => {
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-white dark:bg-zinc-800">
<div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-6">
<div className="w-full flex flex-col justify-start items-center py-8">
<UserAvatar className="!w-20 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
<div>
<p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{user?.nickname}</p>
</div>
<UserAvatar className="!w-20 h-auto mb-2 drop-shadow" avatarUrl={systemStatus.customizedProfile.logoUrl} />
<p className="text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
</div>
<div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
<div className="w-full mb-4 flex flex-row justify-start items-center mr-1">
<span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
</div>
<MemoContent content={memo.content} />
<MemoResourceListView resourceList={memo.resourceList} />
<MemoRelationListView relationList={memo.relationList} />
<Divider className="!my-6" />
<div className="w-full flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
<div className="flex flex-row justify-start items-center">
<span className="text-sm text-gray-500 dark:text-gray-400">{getDateTimeString(memo.displayTs)}</span>
<span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
<Tooltip title={"The identifier of memo"} placement="top">
<span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
</Tooltip>
<span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
<Tooltip title={"The visibility of memo"} placement="top">
<Select
className="w-auto text-sm"
variant="plain"
value={memo.visibility}
onChange={(_, visibility) => {
if (visibility) {
handleMemoVisibilityOptionChanged(visibility);
}
}}
>
{memoVisibilityOptionSelectorItems.map((item) => (
<Option key={item.value} value={item.value} className="whitespace-nowrap">
{item.text}
</Option>
))}
</Select>
</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={`/u/${encodeURIComponent(memo.creatorUsername)}`}>
<UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={user?.avatarUrl} />
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{user?.nickname}</span>
</Link>
{allowEdit && (
<>
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Tooltip title={"The visibility of memo"} placement="top">
<Select
className="w-auto text-sm"
variant="plain"
value={memo.visibility}
onChange={(_, visibility) => {
if (visibility) {
handleMemoVisibilityOptionChanged(visibility);
}
}}
>
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
<Option key={item.value} value={item.value} className="whitespace-nowrap">
{item.text}
</Option>
))}
</Select>
</Tooltip>
</>
)}
</div>
<div className="flex flex-row sm:justify-end items-center">
{allowEdit && (

Write Preview
Loading…
Cancel
Save