Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Fixed an avatar component bug with multiple users

Browse source
This commit is contained in:
James Morris 2022-07-06 10:02:02 +02:00
parent 73e6e053eb
commit af56ecf5ef
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,22 +6,25 @@ class Avatar extends React.Component {
static contextType = AppContext;
getInitials() {
if (!this.context.member || !this.context.member.name) {
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
if (!commentMember || !commentMember.name) {
return '';
}
return getInitials(this.context.member.name);
return getInitials(commentMember.name);
}
render() {
let dimensionClasses = (this.props.size === 'small' ? 'w-8 h-8' : 'w-10 h-10');
let initialsClasses = (this.props.size === 'small' ? 'text-sm' : 'text-base');
let commentMember = (this.props.comment ? this.props.comment.member : this.context.member);
return (
<figure className={`relative ${dimensionClasses}`}>
<div className={`flex justify-center items-center rounded-full bg-black ${dimensionClasses}`}>
<p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ this.getInitials() }</p>
</div>
<img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={this.context.member.avatar_image} alt="Avatar"/>
<img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>
</figure>
);
}

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

@ -32,7 +32,7 @@ class Comment extends React.Component {
<div className="flex mb-4">
<div>
<div className="flex mb-2 space-x-4 justify-start items-center">
<Avatar />
<Avatar comment={comment} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-xs text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
@ -41,8 +41,10 @@ class Comment extends React.Component {
<div className="ml-14 mb-4 font-sans leading-normal dark:text-neutral-300">
<p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap"></p>
</div>
<button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
<div className="ml-14">
<button onClick={this.toggleContextMenu}><MoreIcon className='gh-comments-icon gh-comments-icon-more' /></button>
{this.state.isContextMenuOpen ? <CommentContextMenu comment={comment} /> : null}
</div>
</div>
</div>
);