Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added backdrop interaction to modals in AdminX

Browse source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-24 16:51:04 +02:00
parent 894850d9e4
commit a4c2c2ebcf
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
View file

@ -41,8 +41,8 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
}); });
} }
let modalStyles = 'z-50 mx-auto flex flex-col justify-between bg-white p-8 shadow-xl w-full'; let modalStyles = 'relative z-50 mx-auto flex flex-col justify-between bg-white p-8 shadow-xl w-full';
let backdropStyles = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll bg-[rgba(0,0,0,0.1)]'; let backdropStyles = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll ';
switch (size) { switch (size) {
case 'sm': case 'sm':
@ -77,8 +77,13 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
backdropStyles += ' p-[2vmin]'; backdropStyles += ' p-[2vmin]';
} }
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
modal.remove();
};
return ( return (
<div className={backdropStyles}> <div className={backdropStyles} id='modal-backdrop'>
<div className='absolute inset-0 z-0 bg-[rgba(0,0,0,0.1)]' onClick={handleBackdropClick}></div>
<section className={modalStyles}> <section className={modalStyles}>
<div> <div>
{title && <Heading level={4}>{title}</Heading>} {title && <Heading level={4}>{title}</Heading>}