bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MediaModal: make clicking the background close the modal

Browse source 
Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1434
This commit is contained in:
Alex Gleason 2023-06-01 12:52:37 -05:00
parent 87b279d8ee
commit 0d8317145d
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/soapbox/features/ui/components/modals/media-modal.tsx
View file

@ -229,6 +229,12 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
} }
} }
const handleClickOutside: React.MouseEventHandler<HTMLElement> = (e) => {
if ((e.target as HTMLElement).tagName === 'DIV') {
onClose();
}
};
return ( return (
<div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'> <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
<div <div
@ -236,6 +242,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
role='presentation' role='presentation'
> >
<Stack <Stack
onClick={handleClickOutside}
className={ className={
clsx('fixed inset-0 h-full grow transition-all', { clsx('fixed inset-0 h-full grow transition-all', {
'xl:pr-96': !isFullScreen, 'xl:pr-96': !isFullScreen,