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 editor dialog

Browse Source
This commit is contained in:
Steven
2023-10-20 08:19:08 +08:00
parent c87b679f41
commit 952539f817
4 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/CreateMemoRelationDialog.tsx
View File

@ -75,7 +75,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
return ( return (
<> <>
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text">{"Relations"}</p> <p className="title-text">{"Add references"}</p>
<button className="btn close-btn" onClick={() => destroy()}> <button className="btn close-btn" onClick={() => destroy()}>
<Icon.X /> <Icon.X />
</button> </button>
@ -84,24 +84,25 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
<Input <Input
className="mb-2" className="mb-2"
size="md" size="md"
placeholder={"Memo ID. e.g. 286"} placeholder={"Input memo ID. e.g. 26"}
value={memoId} value={memoId}
onChange={handleMemoIdChanged} onChange={handleMemoIdChanged}
onKeyDown={handleMemoIdInputKeyDown} onKeyDown={handleMemoIdInputKeyDown}
fullWidth fullWidth
endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />} endDecorator={<Icon.PlusCircle onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
/> />
{memoList.length > 0 && ( {memoList.length > 0 && (
<> <>
<div className="w-full flex flex-row justify-start items-start flex-wrap gap-x-2 gap-y-1"> <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
{memoList.map((memo) => ( {memoList.map((memo) => (
<div <div
className="max-w-[120px] text-sm mr-2 mt-1 cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through" className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-full cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
key={memo.id} key={memo.id}
onClick={() => handleDeleteMemoRelation(memo)} onClick={() => handleDeleteMemoRelation(memo)}
> >
<span className="font-mono mr-1">#{memo.id}</span> <span className="opacity-60 shrink-0">#{memo.id}</span>
<span className="opacity-80">{memo.content}</span> <span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
<Icon.X className="opacity-80 w-4 h-auto shrink-0 ml-1" />
</div> </div>
))} ))}
</div> </div>

11
web/src/components/MemoEditor/MemoEditorDialog.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useTagStore } from "@/store/module"; import { useGlobalStore, useTagStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import MemoEditor from "."; import MemoEditor from ".";
import { generateDialog } from "../Dialog"; import { generateDialog } from "../Dialog";
import Icon from "../Icon"; import Icon from "../Icon";
@ -11,8 +10,9 @@ interface Props extends DialogProps {
} }
const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Props) => { const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Props) => {
const t = useTranslate(); const globalStore = useGlobalStore();
const tagStore = useTagStore(); const tagStore = useTagStore();
const { systemStatus } = globalStore.state;
useEffect(() => { useEffect(() => {
tagStore.fetchTags(); tagStore.fetchTags();
@ -25,7 +25,10 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Pr
return ( return (
<> <>
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text flex items-center">{t("amount-text.memo")}</p> <div className="flex flex-row justify-start items-center">
<img className="w-5 h-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
<p className="ml-1 text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
</div>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X /> <Icon.X />
</button> </button>

5
web/src/components/MemoEditor/index.tsx
View File

@ -24,6 +24,7 @@ const emptyOlReg = /^(\d+)\. $/;
interface Props { interface Props {
className?: string; className?: string;
editorClassName?: string;
cacheKey?: string; cacheKey?: string;
memoId?: MemoId; memoId?: MemoId;
relationList?: MemoRelation[]; relationList?: MemoRelation[];
@ -39,7 +40,7 @@ interface State {
} }
const MemoEditor = (props: Props) => { const MemoEditor = (props: Props) => {
const { className, cacheKey, memoId, onConfirm } = props; const { className, editorClassName, cacheKey, memoId, onConfirm } = props;
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const t = useTranslate(); const t = useTranslate();
const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${cacheKey}`, ""); const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${cacheKey}`, "");
@ -396,7 +397,7 @@ const MemoEditor = (props: Props) => {
const editorConfig = useMemo( const editorConfig = useMemo(
() => ({ () => ({
className: "", className: editorClassName ?? "",
initialContent: "", initialContent: "",
placeholder: t("editor.placeholder"), placeholder: t("editor.placeholder"),
onContentChange: handleContentChange, onContentChange: handleContentChange,

72
web/src/components/MemoRelationListView.tsx
View File

@ -35,47 +35,43 @@ const MemoRelationListView = (props: Props) => {
return ( return (
<> <>
{referencingMemoList.length > 0 && ( {referencingMemoList.length > 0 && (
<div className="w-full mt-2 flex flex-row justify-start items-start"> <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
<Tooltip title="References" placement="top"> {referencingMemoList.map((memo) => {
<Icon.Link className="w-4 h-auto shrink-0 opacity-70 mt-1.5 mr-1" /> return (
</Tooltip> <div key={memo.id} className="block w-auto max-w-[50%]">
<div className="w-auto max-w-[calc(100%-2rem)] flex flex-row justify-start items-center flex-wrap gap-2"> <Link
{referencingMemoList.map((memo) => { className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
return ( to={`/m/${memo.id}`}
<div key={memo.id} className="block w-auto max-w-[50%]"> >
<Link <Tooltip title="Reference" placement="top">
className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80" <Icon.Link className="w-4 h-auto shrink-0 opacity-70" />
to={`/m/${memo.id}`} </Tooltip>
> <span className="opacity-70 mx-1">#{memo.id}</span>
<span className="opacity-70 mr-1">#{memo.id}</span> <span className="truncate">{memo.content}</span>
<span className="truncate">{memo.content}</span> </Link>
</Link> </div>
</div> );
); })}
})}
</div>
</div> </div>
)} )}
{referencedMemoList.length > 0 && ( {referencedMemoList.length > 0 && (
<div className="w-full mt-2 flex flex-row justify-start items-start"> <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
<Tooltip title="Referenced" placement="top"> {referencedMemoList.map((memo) => {
<Icon.Milestone className="w-4 h-auto shrink-0 opacity-70 mt-1.5 mr-1" /> return (
</Tooltip> <div key={memo.id} className="block w-auto max-w-[50%]">
<div className="grow w-auto max-w-[calc(100%-2rem)] flex flex-row justify-start items-center flex-wrap gap-2"> <Link
{referencedMemoList.map((memo) => { className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
return ( to={`/m/${memo.id}`}
<div key={memo.id} className="block w-auto max-w-[50%]"> >
<Link <Tooltip title="Backlink" placement="top">
className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80" <Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" />
to={`/m/${memo.id}`} </Tooltip>
> <span className="opacity-70 mx-1">#{memo.id}</span>
<span className="opacity-70 mr-1">#{memo.id}</span> <span className="truncate">{memo.content}</span>
<span className="truncate">{memo.content}</span> </Link>
</Link> </div>
</div> );
); })}
})}
</div>
</div> </div>
)} )}
</> </>