Kieran/snort
5
14
Fork 14
Code Issues 36 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

spotlight layout
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Martti Malmi 2023-12-07 11:59:05 +02:00
parent 80d711f75f
commit e861f238f0
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/Element/Modal.tsx
View File

@ -61,14 +61,13 @@ export default function Modal(props: ModalProps) {
return createPortal( return createPortal(
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}> <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
<div className={props.bodyClassName || "modal-body"} onClick={props.onClose}> <div
<div className={props.bodyClassName || "modal-body"}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
props.onClick?.(e); props.onClick?.(e);
}}> }}>
{props.children} {props.children}
</div>
</div> </div>
</div>, </div>,
document.body, document.body,

12
packages/app/src/Element/Spotlight/SpotlightMedia.tsx
View File

@ -83,8 +83,14 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
} }
}, [image, isVideo]); }, [image, isVideo]);
const onClickBg = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
props.onClose();
}
};
return ( return (
<> <div className="relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}>
{mediaEl} {mediaEl}
<div className="select-none absolute flex flex-row items-center gap-4 left-0 top-0 p-4"> <div className="select-none absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
<span <span
@ -92,6 +98,8 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
onClick={props.onClose}> onClick={props.onClose}>
<Icon name="x-close" size={24} /> <Icon name="x-close" size={24} />
</span> </span>
</div>
<div className="select-none absolute flex flex-row items-center gap-4 right-0 top-0 p-4">
{props.images.length > 1 && `${idx + 1}/${props.images.length}`} {props.images.length > 1 && `${idx + 1}/${props.images.length}`}
</div> </div>
{props.images.length > 1 && ( {props.images.length > 1 && (
@ -116,7 +124,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
/> />
</> </>
)} )}
</> </div>
); );
} }