Lightbox: Fix clicks outside of zoomable area
This commit is contained in:
parent
04c08a624b
commit
b38590a4ac
2 changed files with 30 additions and 22 deletions
|
@ -129,6 +129,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__zoomable-container {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
&__zoom-button {
|
&__zoom-button {
|
||||||
@include button-reset;
|
@include button-reset;
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
|
|
|
@ -427,28 +427,30 @@ export function Lightbox({
|
||||||
if (isImageTypeSupported) {
|
if (isImageTypeSupported) {
|
||||||
if (objectURL) {
|
if (objectURL) {
|
||||||
content = (
|
content = (
|
||||||
<button
|
<div className="Lightbox__zoomable-container">
|
||||||
className="Lightbox__zoom-button"
|
<button
|
||||||
onClick={zoomButtonHandler}
|
className="Lightbox__zoom-button"
|
||||||
type="button"
|
onClick={zoomButtonHandler}
|
||||||
>
|
type="button"
|
||||||
<img
|
>
|
||||||
alt={i18n('lightboxImageAlt')}
|
<img
|
||||||
className="Lightbox__object"
|
alt={i18n('lightboxImageAlt')}
|
||||||
onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
|
className="Lightbox__object"
|
||||||
// These are the only image types supported by Electron's NativeImage
|
onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
|
||||||
if (
|
// These are the only image types supported by Electron's NativeImage
|
||||||
ev &&
|
if (
|
||||||
contentType !== IMAGE_PNG &&
|
ev &&
|
||||||
!/image\/jpe?g/g.test(contentType)
|
contentType !== IMAGE_PNG &&
|
||||||
) {
|
!/image\/jpe?g/g.test(contentType)
|
||||||
ev.preventDefault();
|
) {
|
||||||
}
|
ev.preventDefault();
|
||||||
}}
|
}
|
||||||
src={objectURL}
|
}}
|
||||||
ref={imageRef}
|
src={objectURL}
|
||||||
/>
|
ref={imageRef}
|
||||||
</button>
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
content = (
|
content = (
|
||||||
|
|
Loading…
Reference in a new issue