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 activity badges not showing when the user doesn't have a profile icon (#21609)

Browse source 
ref https://linear.app/ghost/issue/AP-575/badges-are-not-showing-up-on-placeholder-avatars
This commit is contained in:
Djordje Vlaisavljevic 2024-11-14 11:15:00 +00:00 • committed by GitHub
parent 5e5d5dc5da
commit 2a0ad25edc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/admin-x-activitypub/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@tryghost/admin-x-activitypub",
"version": "0.3.15",
"version": "0.3.16",
"license": "MIT",
"repository": {
"type": "git",

31
apps/admin-x-activitypub/src/components/global/APAvatar.tsx
View file

@ -16,7 +16,7 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
let iconSize = 18;
let containerClass = 'shrink-0 items-center justify-center relative z-10 flex';
let imageClass = 'z-10 rounded w-10 h-10 object-cover';
const badgeClass = `w-6 h-6 z-20 rounded-full absolute -bottom-2 -right-[0.6rem] border-2 border-white content-box flex items-center justify-center `;
const badgeClass = `w-6 h-6 z-20 rounded-full absolute -bottom-2 -right-[0.6rem] border-2 border-white content-box flex items-center justify-center`;
let badgeColor = '';
const [iconUrl, setIconUrl] = useState(author?.icon?.url);
@ -26,13 +26,13 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
switch (badge) {
case 'user-fill':
badgeColor = ' bg-blue-500';
badgeColor = 'bg-blue-500';
break;
case 'heart-fill':
badgeColor = ' bg-red-500';
badgeColor = 'bg-red-500';
break;
case 'comment-fill':
badgeColor = ' bg-purple-500';
badgeColor = 'bg-purple-500';
break;
}
@ -55,7 +55,7 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
imageClass = 'z-10 rounded-xl w-22 h-22 object-cover';
break;
default:
containerClass = clsx('h-10 w-10 rounded', containerClass);
containerClass = clsx('h-10 w-10 rounded', containerClass);
break;
}
@ -63,6 +63,16 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
containerClass = clsx(containerClass, 'bg-grey-100');
}
const BadgeElement = badge && (
<div className={clsx(badgeClass, badgeColor)}>
<Icon
colorClass='text-white'
name={badge}
size='xs'
/>
</div>
);
if (iconUrl) {
return (
<a className={containerClass} href={author?.url} rel='noopener noreferrer' target='_blank'>
@ -71,15 +81,7 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
src={iconUrl}
onError={() => setIconUrl(undefined)}
/>
{badge && (
<div className={`${badgeClass} ${badgeColor}`}>
<Icon
colorClass='text-white'
name={badge}
size='xs'
/>
</div>
)}
{BadgeElement}
</a>
);
}
@ -91,6 +93,7 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
name='user'
size={iconSize}
/>
{BadgeElement}
</div>
);
};