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

modal left & right btns

Browse Source
This commit is contained in:
Martti Malmi 2023-12-07 12:54:11 +02:00
parent e861f238f0
commit 6ec5911b7c
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,38 +90,36 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
}; };
return ( return (
<div className="relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}> <div className="select-none 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="absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
<span <span
className="p-2 bg-bg-color rounded-full cursor-pointer opacity-80 hover:opacity-70" className="p-2 bg-bg-color rounded-full cursor-pointer opacity-80 hover:opacity-70"
onClick={props.onClose}> onClick={props.onClose}>
<Icon name="x-close" size={24} /> <Icon name="x-close" size={24} />
</span> </span>
</div> </div>
<div className="select-none absolute flex flex-row items-center gap-4 right-0 top-0 p-4"> <div className="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 && (
<> <>
<Icon <span
className="absolute left-2 top-1/2 rotate-180 cursor-pointer" className="absolute left-0 p-2 top-1/2 rotate-180 cursor-pointer opacity-80 hover:opacity-60"
name="arrowFront"
size={24}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
dec(); dec();
}} }}>
/> <Icon name="arrowFront" size={24} />
<Icon </span>
className="absolute right-2 top-1/2 cursor-pointer" <span
name="arrowFront" className="absolute right-0 p-2 top-1/2 cursor-pointer opacity-80 hover:opacity-60"
size={24}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
inc(); inc();
}} }}>
/> <Icon name="arrowFront" size={24} />
</span>
</> </>
)} )}
</div> </div>