Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added toggle sidebar size button to article modal in admin-x-activitypub (#21015)

Browse source 
no refs

Added a button to toggle sidebar size from the article modal in the
admin-x-activitypub app
This commit is contained in:
Michael Barrett 2024-09-16 16:50:22 +01:00 committed by GitHub
parent 12710eaefa
commit 4ace5104a6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
View file

@ -74,6 +74,10 @@ const FeedItemDivider: React.FC = () => (
); );
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments}) => { const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments}) => {
const MODAL_SIZE_SM = 640;
const MODAL_SIZE_LG = 1024;
const [modalSize, setModalSize] = useState<number>(MODAL_SIZE_SM);
const modal = useModal(); const modal = useModal();
// Navigation stack to navigate between comments - This could probably use a // Navigation stack to navigate between comments - This could probably use a
@ -109,6 +113,9 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
allComments: allComments allComments: allComments
}); });
}; };
const toggleModalSize = () => {
setModalSize(modalSize === MODAL_SIZE_SM ? MODAL_SIZE_LG : MODAL_SIZE_SM);
};
return ( return (
<Modal <Modal
@ -118,7 +125,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
height={'full'} height={'full'}
padding={false} padding={false}
size='bleed' size='bleed'
width={640} width={modalSize}
> >
<MainHeader> <MainHeader>
{canNavigateBack && ( {canNavigateBack && (
@ -129,7 +136,8 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
<div className='col-[2/3] flex grow items-center justify-center px-8 text-center'> <div className='col-[2/3] flex grow items-center justify-center px-8 text-center'>
<span className='text-lg font-semibold text-grey-900'>{object.type}</span> <span className='text-lg font-semibold text-grey-900'>{object.type}</span>
</div> </div>
<div className='col-[3/4] flex items-center justify-end px-8'> <div className='col-[3/4] flex items-center justify-end space-x-6 px-8'>
<Button icon='angle-brackets' size='md' unstyled onClick={toggleModalSize}/>
<Button icon='close' size='sm' unstyled onClick={() => modal.remove()}/> <Button icon='close' size='sm' unstyled onClick={() => modal.remove()}/>
</div> </div>
</MainHeader> </MainHeader>