Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Updated comment list layouts

Browse source
This commit is contained in:
Peter Zimon 2022-07-07 14:28:13 +02:00
parent c542918dae
commit 09e2efe8fd
6 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/Avatar.js
View file

@ -53,8 +53,8 @@ class Avatar extends React.Component {
}
render() {
let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-12 h-12');
let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-base');
let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-lg');
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
const bgColor = this.HSLtoString(this.generateHSL());

16
apps/comments-ui/src/components/Comment.js
View file

@ -36,21 +36,21 @@ const Comment = (props) => {
} else {
return (
<>
<div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-10'}`}>
<div className={`flex flex-col ${hasReplies ? 'mb-4' : 'mb-12'}`}>
<div>
<div className="flex mb-3 justify-start items-center">
<div className="flex justify-start items-center">
<Avatar comment={comment} saturation={props.avatarSaturation} />
<div className="ml-[14px]">
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
<div className="ml-3">
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
</div>
</div>
<div className={`mb-3 pr-4 font-sans leading-normal ${isNotPublished && 'text-neutral-500'} dark:text-neutral-300`}>
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
<div className={`ml-14 mb-4 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-neutral-300`}>
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap text-[16.5px] leading-normal"></p>
</div>
<div className="flex gap-6">
<div className="ml-14 flex gap-5 items-center">
<Like comment={comment} />
{isNotPublished || !props.parent && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
<h6 className="text-sm text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
<More comment={comment} toggleEdit={toggleEditMode} />
</div>
</div>

4
apps/comments-ui/src/components/Like.js
View file

@ -14,8 +14,8 @@ function Like(props) {
};
return (
<button className="flex font-sans items-center dark:text-white" onClick={toggleLike}>
<LikeIcon className={`mr-[6px] stroke-black dark:stroke-white ${props.comment.liked ? 'fill-black dark:fill-white' : ''}`} />
<button className={`flex font-sans items-center text-sm dark:text-white ${props.comment.liked ? 'text-neutral-900' : 'text-neutral-400'}`} onClick={toggleLike}>
<LikeIcon className={`mr-[6px] stroke-neutral-400 ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : ''}`} />
{props.comment.likes_count}
</button>
);

2
apps/comments-ui/src/components/More.js
View file

@ -21,7 +21,7 @@ const More = (props) => {
return (
<div className="relative">
{show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more dark:fill-white' /></button> : null}
{show ? <button onClick={toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more fill-neutral-400 dark:fill-white' /></button> : null}
{isContextMenuOpen ? <CommentContextMenu comment={comment} close={toggleContextMenu} toggleEdit={props.toggleEdit} /> : null}
</div>
);

4
apps/comments-ui/src/components/Reply.js
View file

@ -6,8 +6,8 @@ function Reply(props) {
const {member} = useContext(AppContext);
return member ?
(<button className="flex font-sans items-center dark:text-white" onClick={props.toggleReply}>
<ReplyIcon className={`mr-[6px] stroke-dark dark:stroke-white ${props.isReplying ? 'fill-black dark:fill-white' : ''}`} />Reply
(<button className={`flex font-sans items-center text-sm dark:text-white ${props.isReplying ? 'text-neutral-900' : 'text-neutral-400'}`} onClick={props.toggleReply}>
<ReplyIcon className={`mr-[6px] stroke-neutral-400 dark:stroke-white ${props.isReplying ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : ''}`} />Reply
</button>) : null;
}

9
apps/comments-ui/tailwind.config.js
View file

@ -91,6 +91,15 @@ module.exports = {
'7xl': ['7.2rem', '1'],
'8xl': ['9.6rem', '1'],
'9xl': ['12.8rem', '1']
},
letterSpacing: {
tightest: '-.075em',
tighter: '-.05em',
tight: '-.018em',
normal: '0',
wide: '.018em',
wider: '.05em',
widest: '.1em'
}
},
content: [