chore: update memo editor dialog

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

View File

@ -75,7 +75,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
return (
<>
<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()}>
<Icon.X />
</button>
@ -84,24 +84,25 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
<Input
className="mb-2"
size="md"
placeholder={"Memo ID. e.g. 286"}
placeholder={"Input memo ID. e.g. 26"}
value={memoId}
onChange={handleMemoIdChanged}
onKeyDown={handleMemoIdInputKeyDown}
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 && (
<>
<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) => (
<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}
onClick={() => handleDeleteMemoRelation(memo)}
>
<span className="font-mono mr-1">#{memo.id}</span>
<span className="opacity-80">{memo.content}</span>
<span className="opacity-60 shrink-0">#{memo.id}</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>