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

Cleaned up the modals iframe being in DOM when not shown

Browse source
This commit is contained in:
Simon Backx 2022-07-21 15:31:26 +02:00
parent 6d19323df2
commit f011de6b5b
1 changed files with 29 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
apps/comments-ui/src/components/modals/GenericDialog.js
View file

@ -4,38 +4,36 @@ import Modal from './Modal';
const GenericDialog = (props) => { const GenericDialog = (props) => {
// The modal will cover the whole screen, so while it is hidden, we need to disable pointer events // The modal will cover the whole screen, so while it is hidden, we need to disable pointer events
const style = props.show ? {} : {
pointerEvents: 'none'
};
return ( return (
<Modal show={props.show} style={style}> <Transition show={props.show}>
<div> <Modal>
<Transition <div>
show={props.show} <Transition.Child
enter="transition duration-200 linear" enter="transition duration-200 linear"
enterFrom="opacity-0" enterFrom="opacity-0"
enterTo="opacity-100" enterTo="opacity-100"
leave="transition duration-200 linear" leave="transition duration-200 linear"
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed top-0 left-0 overflow-hidden w-screen h-screen flex pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={props.cancel}> <div className="fixed top-0 left-0 overflow-hidden w-screen h-screen flex pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={props.cancel}>
<Transition.Child <Transition.Child
enter="transition duration-200 delay-150 linear" enter="transition duration-200 delay-150 linear"
enterFrom="translate-y-4 opacity-0" enterFrom="translate-y-4 opacity-0"
enterTo="translate-y-0 opacity-100" enterTo="translate-y-0 opacity-100"
leave="transition duration-200 linear" leave="transition duration-200 linear"
leaveFrom="translate-y-0 opacity-100" leaveFrom="translate-y-0 opacity-100"
leaveTo="translate-y-4 opacity-0" leaveTo="translate-y-4 opacity-0"
> >
<div className="bg-white w-[500px] p-8 rounded-xl text-center shadow-modal"> <div className="bg-white w-[500px] p-8 rounded-xl text-center shadow-modal">
{props.children} {props.children}
</div> </div>
</Transition.Child> </Transition.Child>
</div> </div>
</Transition> </Transition.Child>
</div> </div>
</Modal> </Modal>
</Transition>
); );
}; };