Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Allow navigation by clicking lightbox image (#1516)

Browse Source
This commit is contained in:
WithoutPants
2021-06-21 14:55:31 +10:00
committed by GitHub
parent 3d1b949f4c
commit df6e06aaf6
3 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
View File

@@ -31,6 +31,7 @@ const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`;
const CLASSNAME_IMAGE = `${CLASSNAME_CAROUSEL}-image`;
const CLASSNAME_NAVBUTTON = `${CLASSNAME}-navbutton`;
const CLASSNAME_NAV = `${CLASSNAME}-nav`;
const CLASSNAME_NAVZONE = `${CLASSNAME}-navzone`;
const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
const CLASSNAME_NAVSELECTED = `${CLASSNAME_NAV}-selected`;
@@ -183,8 +184,8 @@ export const LightboxComponent: React.FC<IProps> = ({
}, [isFullscreen, hide]);
const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
const { nodeName } = e.target as Node;
if (nodeName === "DIV" || nodeName === "PICTURE") close();
const { className } = e.target as Element;
if (className === CLASSNAME_IMAGE) close();
};
const handleLeft = useCallback(
@@ -481,6 +482,18 @@ export const LightboxComponent: React.FC<IProps> = ({
media="(min-width: 800px)"
/>
<img src={image.paths.thumbnail ?? ""} alt="" />
<div>
<div
aria-hidden
className={CLASSNAME_NAVZONE}
onClick={handleLeft}
/>
<div
aria-hidden
className={CLASSNAME_NAVZONE}
onClick={handleRight}
/>
</div>
</picture>
</div>
))}