mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: update memo editor
This commit is contained in:
Steven
@ -106,77 +106,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
)}
|
||||
ref={memoContainerRef}
|
||||
>
|
||||
<div className="w-full flex flex-row justify-between items-center gap-2">
|
||||
<div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
|
||||
{props.showCreator && creator ? (
|
||||
<div className="w-full flex flex-row justify-start items-center">
|
||||
<Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
|
||||
<UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
|
||||
</Link>
|
||||
<div className="w-full flex flex-col justify-center items-start">
|
||||
<Link
|
||||
className="w-full block leading-tight hover:opacity-80 truncate text-gray-600 dark:text-gray-400"
|
||||
to={`/u/${encodeURIComponent(creator.username)}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
{creator.nickname || creator.username}
|
||||
</Link>
|
||||
<div
|
||||
className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
|
||||
onClick={handleGotoMemoDetailPage}
|
||||
>
|
||||
{displayTime}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
|
||||
{displayTime}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!showEditor && (
|
||||
<div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
|
||||
<div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center gap-2">
|
||||
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
|
||||
<Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
|
||||
<span className="flex justify-center items-center hover:opacity-70">
|
||||
<VisibilityIcon visibility={memo.visibility} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{currentUser && <ReactionSelector className="border-none w-auto h-auto" memo={memo} />}
|
||||
</div>
|
||||
{!isInMemoDetailPage && (
|
||||
<Link
|
||||
className={clsx(
|
||||
"flex flex-row justify-start items-center hover:opacity-70",
|
||||
commentAmount === 0 && "invisible group-hover:visible",
|
||||
)}
|
||||
to={`/m/${memo.uid}#comments`}
|
||||
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>
|
||||
)}
|
||||
{props.showPinned && memo.pinned && (
|
||||
<Tooltip title={t("common.pinned")} placement="top">
|
||||
<Icon.Bookmark className="w-4 h-auto text-amber-500" />
|
||||
</Tooltip>
|
||||
)}
|
||||
{!readonly && (
|
||||
<MemoActionMenu
|
||||
className="-ml-1"
|
||||
memo={memo}
|
||||
hiddenActions={props.showPinned ? [] : ["pin"]}
|
||||
onEdit={() => setShowEditor(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showEditor ? (
|
||||
<MemoEditor
|
||||
autoFocus
|
||||
@ -188,6 +117,77 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full flex flex-row justify-between items-center gap-2">
|
||||
<div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
|
||||
{props.showCreator && creator ? (
|
||||
<div className="w-full flex flex-row justify-start items-center">
|
||||
<Link className="w-auto hover:opacity-80" to={`/u/${encodeURIComponent(creator.username)}`} unstable_viewTransition>
|
||||
<UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
|
||||
</Link>
|
||||
<div className="w-full flex flex-col justify-center items-start">
|
||||
<Link
|
||||
className="w-full block leading-tight hover:opacity-80 truncate text-gray-600 dark:text-gray-400"
|
||||
to={`/u/${encodeURIComponent(creator.username)}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
{creator.nickname || creator.username}
|
||||
</Link>
|
||||
<div
|
||||
className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
|
||||
onClick={handleGotoMemoDetailPage}
|
||||
>
|
||||
{displayTime}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none"
|
||||
onClick={handleGotoMemoDetailPage}
|
||||
>
|
||||
{displayTime}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
|
||||
<div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center gap-2">
|
||||
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
|
||||
<Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
|
||||
<span className="flex justify-center items-center hover:opacity-70">
|
||||
<VisibilityIcon visibility={memo.visibility} />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{currentUser && <ReactionSelector className="border-none w-auto h-auto" memo={memo} />}
|
||||
</div>
|
||||
{!isInMemoDetailPage && (
|
||||
<Link
|
||||
className={clsx(
|
||||
"flex flex-row justify-start items-center hover:opacity-70",
|
||||
commentAmount === 0 && "invisible group-hover:visible",
|
||||
)}
|
||||
to={`/m/${memo.uid}#comments`}
|
||||
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>
|
||||
)}
|
||||
{props.showPinned && memo.pinned && (
|
||||
<Tooltip title={t("common.pinned")} placement="top">
|
||||
<Icon.Bookmark className="w-4 h-auto text-amber-500" />
|
||||
</Tooltip>
|
||||
)}
|
||||
{!readonly && (
|
||||
<MemoActionMenu
|
||||
className="-ml-1"
|
||||
memo={memo}
|
||||
hiddenActions={props.showPinned ? [] : ["pin"]}
|
||||
onEdit={() => setShowEditor(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<MemoContent
|
||||
key={`${memo.name}-${memo.updateTime}`}
|
||||
memoName={memo.name}
|
||||
|
||||
Reference in New Issue
Block a user