Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Fixed the avatar icon to only show if there is no image but no name

Browse source 
- This changes the behaviour of the Avatar component to show the icon properly
- This removes a parameter from the Avatar component

refs https://github.com/TryGhost/Team/issues/1746
This commit is contained in:
James Morris 2022-08-05 09:59:05 +01:00
parent 1c878615a8
commit b3a71d8c94
2 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import {ReactComponent as AvatarIcon} from '../images/icons/avatar.svg';
const Avatar = (props) => {
const {member} = useContext(AppContext);
const memberName = member?.name ?? props.comment?.member?.name;
const getHashOfString = (str) => {
let hash = 0;
@ -68,9 +69,13 @@ const Avatar = (props) => {
let avatarEl = (
<>
<div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
{memberName ?
(<div className={`flex justify-center items-center rounded-full ${dimensionClasses}`} style={avatarStyle}>
<p className={`text-white font-sans font-semibold ${initialsClasses}`}>{ commentGetInitials() }</p>
</div>
</div>) :
(<div className={`flex justify-center items-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
</div>)}
{commentMember && <img className={`absolute top-0 left-0 rounded-full ${dimensionClasses}`} src={commentMember.avatar_image} alt="Avatar"/>}
</>
);
@ -82,13 +87,6 @@ const Avatar = (props) => {
<AvatarIcon className="stroke-white dark:stroke-neutral-600" />
</div>
);
// When an avatar has no name
} else if (props.isAnonymous) {
avatarEl = (
<div className={`flex justify-center items-center rounded-full bg-neutral-900 dark:bg-[rgba(255,255,255,0.7)] ${dimensionClasses}`}>
<AvatarIcon className="stroke-white dark:stroke-[rgba(0,0,0,0.6)]" />
</div>
);
}
return (

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

@ -397,7 +397,7 @@ const Form = (props) => {
</div>
<div className='absolute top-1 left-0 flex justify-start items-center h-12'>
<div className="mr-3">
<Avatar comment={comment} saturation={avatarSaturation} isAnonymous={memberName ? false : true} className="pointer-events-none" />
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
</div>
<div>
<Transition