usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-25 22:51:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: update memo detail styles

Browse source
This commit is contained in:
Steven 2023-10-03 00:25:22 +08:00
parent 078bc164d5
commit 91f7839b31
2 changed files with 14 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/Memo.tsx
View file

@ -311,7 +311,7 @@ const Memo: React.FC<Props> = (props: Props) => {
</> </>
)} )}
<Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" /> <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}#comments`}> <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}`}>
<Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" /> <Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
<span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span> <span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span>
</Link> </Link>

19
web/src/pages/MemoDetail.tsx
View file

@ -1,4 +1,4 @@
import { Select, Tooltip, Option, IconButton, Divider } from "@mui/joy"; import { Select, Tooltip, Option, IconButton } from "@mui/joy";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
@ -108,8 +108,8 @@ const MemoDetail = () => {
return ( return (
<> <>
<section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800"> <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-900">
<div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-900"> <div className="relative w-full h-auto mx-auto flex flex-col justify-start items-center bg-white dark:bg-zinc-800">
<div className="w-full flex flex-col justify-start items-center py-8"> <div className="w-full flex flex-col justify-start items-center py-8">
<UserAvatar className="!w-20 h-auto mb-2 drop-shadow" avatarUrl={systemStatus.customizedProfile.logoUrl} /> <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> <p className="text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
@ -186,16 +186,16 @@ const MemoDetail = () => {
<div className="py-6 w-full border-t dark:border-t-zinc-700"> <div className="py-6 w-full border-t dark:border-t-zinc-700">
<div className="relative mx-auto flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 gap-y-1"> <div className="relative mx-auto flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 gap-y-1">
{comments.length === 0 ? ( {comments.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center py-6"> <div className="w-full flex flex-col justify-center items-center py-6 mb-2">
<Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" /> <Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
<p className="text-gray-400 italic text-sm">No comments</p> <p className="text-gray-400 italic text-sm">No comments</p>
</div> </div>
) : ( ) : (
<> <>
<div className="w-full flex flex-row justify-start items-center mb-2"> <div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
<Icon.MessageCircle strokeWidth={1} className="w-5 h-auto text-gray-400 mr-1" /> <Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
<span className="text-gray-400 text-sm">Comments</span> <span className="text-gray-400 text-sm">Comments</span>
<span className="text-gray-400 text-sm">({comments.length})</span> <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
</div> </div>
{comments.map((comment) => ( {comments.map((comment) => (
<Memo key={comment.id} memo={comment} /> <Memo key={comment.id} memo={comment} />
@ -205,15 +205,12 @@ const MemoDetail = () => {
{/* Only show comment editor when user login */} {/* Only show comment editor when user login */}
{currentUser && ( {currentUser && (
<>
{comments.length === 0 && <Divider className="!my-4" />}
<MemoEditor <MemoEditor
key={memo.id} key={memo.id}
className="border-none" className="!border"
relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]} relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
onConfirm={() => fetchMemoComments()} onConfirm={() => fetchMemoComments()}
/> />
</>
)} )}
</div> </div>
</div> </div>