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

Improved spacing and alignment in notifications (#21820)

Browse source 
ref https://linear.app/ghost/issue/AP-625/implement-notification-grouping-for-follows-and-likes

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
This commit is contained in:
Djordje Vlaisavljevic 2024-12-06 13:14:41 +00:00 • committed by GitHub
parent e7a9b2a720
commit becfc5013c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
apps/admin-x-activitypub/src/components/Activities.tsx
View file

@ -283,17 +283,17 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
<NotificationItem.Icon type={getActivityBadge(group)} />
<NotificationItem.Avatars>
<div className='flex flex-col'>
<div className='flex gap-2'>
<div className='mt-0.5 flex items-center gap-1.5'>
{!openStates[group.id || `${group.type}_${index}`] && group.actors.slice(0, maxAvatars).map(actor => (
<APAvatar
key={actor.id}
author={actor}
size='sm'
size='notification'
/>
))}
{group.actors.length > maxAvatars && (!openStates[group.id || `${group.type}_${index}`]) && (
<div
className='flex h-10 w-5 items-center justify-center text-sm text-grey-700'
className='flex h-9 w-5 items-center justify-center text-sm text-grey-700'
>
{`+${group.actors.length - maxAvatars}`}
</div>
@ -301,7 +301,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
{group.actors.length > 1 && (
<Button
className={`transition-color flex h-10 items-center rounded-full bg-transparent text-grey-700 ${openStates[group.id || `${group.type}_${index}`] ? 'w-full justify-start pl-0' : 'w-10 justify-center'}`}
className={`transition-color flex h-9 items-center rounded-full bg-transparent text-grey-700 ${openStates[group.id || `${group.type}_${index}`] ? 'w-full justify-start pl-1' : '-ml-2 w-9 justify-center'}`}
hideLabel={!openStates[group.id || `${group.type}_${index}`]}
icon='chevron-down'
iconColorClass={`w-[12px] h-[12px] ${openStates[group.id || `${group.type}_${index}`] ? 'rotate-180' : ''}`}
@ -313,7 +313,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
}}/>
)}
</div>
<div className={`overflow-hidden transition-all duration-300 ease-in-out ${openStates[group.id || `${group.type}_${index}`] ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}>
<div className={`overflow-hidden transition-all duration-300 ease-in-out ${openStates[group.id || `${group.type}_${index}`] ? 'mb-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}>
{openStates[group.id || `${group.type}_${index}`] && group.actors.length > 1 && (
<div className='flex flex-col gap-2 pt-4'>
{group.actors.map(actor => (

2
apps/admin-x-activitypub/src/components/activities/NotificationItem.tsx
View file

@ -20,7 +20,7 @@ interface NotificationItemProps {
const NotificationItem = ({children, onClick, url, className}: NotificationItemProps) => {
return (
<NotificationContext.Provider value={{onClick, url}}>
<button className={`relative -mx-4 -my-px grid grid-cols-[auto_1fr] gap-3 rounded-lg p-4 text-left hover:bg-grey-75 ${className}`} type='button' onClick={onClick}>
<button className={`relative -mx-4 -my-px grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 rounded-lg p-4 text-left hover:bg-grey-75 ${className}`} type='button' onClick={onClick}>
{children}
</button>
</NotificationContext.Provider>

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

@ -4,7 +4,7 @@ import getUsername from '../../utils/get-username';
import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Icon} from '@tryghost/admin-x-design-system';
type AvatarSize = '2xs' | 'xs' | 'sm' | 'lg';
type AvatarSize = '2xs' | 'xs' | 'sm' | 'lg' | 'notification';
export type AvatarBadge = 'user-fill' | 'heart-fill' | 'comment-fill' | undefined;
interface APAvatarProps {
@ -48,6 +48,11 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
containerClass = clsx('h-6 w-6 rounded-md ', containerClass);
imageClass = 'z-10 rounded-md w-6 h-6 object-cover';
break;
case 'notification':
iconSize = 12;
containerClass = clsx('h-9 w-9 rounded-md', containerClass);
imageClass = 'z-10 rounded-xl w-9 h-9 object-cover';
break;
case 'sm':
containerClass = clsx('h-10 w-10 rounded-md', containerClass);
break;