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.Icon type={getActivityBadge(group)} />
<NotificationItem.Avatars> <NotificationItem.Avatars>
<div className='flex flex-col'> <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 => ( {!openStates[group.id || `${group.type}_${index}`] && group.actors.slice(0, maxAvatars).map(actor => (
<APAvatar <APAvatar
key={actor.id} key={actor.id}
author={actor} author={actor}
size='sm' size='notification'
/> />
))} ))}
{group.actors.length > maxAvatars && (!openStates[group.id || `${group.type}_${index}`]) && ( {group.actors.length > maxAvatars && (!openStates[group.id || `${group.type}_${index}`]) && (
<div <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}`} {`+${group.actors.length - maxAvatars}`}
</div> </div>
@ -301,7 +301,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
{group.actors.length > 1 && ( {group.actors.length > 1 && (
<Button <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}`]} hideLabel={!openStates[group.id || `${group.type}_${index}`]}
icon='chevron-down' icon='chevron-down'
iconColorClass={`w-[12px] h-[12px] ${openStates[group.id || `${group.type}_${index}`] ? 'rotate-180' : ''}`} iconColorClass={`w-[12px] h-[12px] ${openStates[group.id || `${group.type}_${index}`] ? 'rotate-180' : ''}`}
@ -313,7 +313,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
}}/> }}/>
)} )}
</div> </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 && ( {openStates[group.id || `${group.type}_${index}`] && group.actors.length > 1 && (
<div className='flex flex-col gap-2 pt-4'> <div className='flex flex-col gap-2 pt-4'>
{group.actors.map(actor => ( {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) => { const NotificationItem = ({children, onClick, url, className}: NotificationItemProps) => {
return ( return (
<NotificationContext.Provider value={{onClick, url}}> <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} {children}
</button> </button>
</NotificationContext.Provider> </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 {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Icon} from '@tryghost/admin-x-design-system'; 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; export type AvatarBadge = 'user-fill' | 'heart-fill' | 'comment-fill' | undefined;
interface APAvatarProps { interface APAvatarProps {
@ -48,6 +48,11 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
containerClass = clsx('h-6 w-6 rounded-md ', containerClass); containerClass = clsx('h-6 w-6 rounded-md ', containerClass);
imageClass = 'z-10 rounded-md w-6 h-6 object-cover'; imageClass = 'z-10 rounded-md w-6 h-6 object-cover';
break; 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': case 'sm':
containerClass = clsx('h-10 w-10 rounded-md', containerClass); containerClass = clsx('h-10 w-10 rounded-md', containerClass);
break; break;