TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Fixed modal footer bug in AdminX

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3432
This commit is contained in:
Peter Zimon 2023-06-13 12:16:19 +02:00
parent 58f51a1838
commit 09b404acd2
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin-x-settings/src/admin-x-ds/global/ConfirmationModal.tsx
View File

@ -25,7 +25,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
okColor = 'black',
onCancel,
onOk,
customFooter = false
customFooter
}) => {
const modal = useModal();
const [taskState, setTaskState] = useState<'running' | ''>('');

53
ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
View File

@ -138,10 +138,6 @@ const Modal: React.FC<ModalProps> = ({
((size === 'full' || size === 'bleed') && 'grow')
);
if (!footer) {
contentClasses += ' pb-0 ';
}
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget && backDropClick) {
modal.remove();
@ -152,31 +148,36 @@ const Modal: React.FC<ModalProps> = ({
width: size + 'px'
} : {};
const footerContent = (
<div className={footerClasses}>
<div>
{leftButtonLabel &&
<Button label={leftButtonLabel} link={true} />
}
let footerContent;
if (footer) {
footerContent = footer;
} else if (footer === false) {
contentClasses += ' pb-0 ';
} else {
footerContent = (
<div className={footerClasses}>
<div>
{leftButtonLabel &&
<Button label={leftButtonLabel} link={true} />
}
</div>
<div className='flex gap-3'>
<ButtonGroup buttons={buttons}/>
</div>
</div>
<div className='flex gap-3'>
<ButtonGroup buttons={buttons}/>
</div>
</div>
);
if (footer === undefined) {
footer = (stickyFooter ?
<StickyFooter height={84}>
{footerContent}
</StickyFooter>
:
<>
{footerContent}
</>
);
}
footerContent = (stickyFooter ?
<StickyFooter height={84}>
{footerContent}
</StickyFooter>
:
<>
{footerContent}
</>
);
return (
<div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
<div className={clsx(
@ -190,7 +191,7 @@ const Modal: React.FC<ModalProps> = ({
{children}
</div>
</div>
{footer}
{footerContent}
</section>
</div>
);