jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lightbox: Fix clicks outside of zoomable area

This commit is contained in:
Josh Perez 2022-02-01 18:49:36 -05:00 committed by GitHub
parent 04c08a624b
commit b38590a4ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
stylesheets/components/Lightbox.scss
View File

@ -129,6 +129,12 @@
}
}
&__zoomable-container {
align-items: center;
display: flex;
justify-content: center;
}
&__zoom-button {
@include button-reset;
cursor: zoom-in;

46
ts/components/Lightbox.tsx
View File

@ -427,28 +427,30 @@ export function Lightbox({
if (isImageTypeSupported) {
if (objectURL) {
content = (
<button
className="Lightbox__zoom-button"
onClick={zoomButtonHandler}
type="button"
>
<img
alt={i18n('lightboxImageAlt')}
className="Lightbox__object"
onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
// These are the only image types supported by Electron's NativeImage
if (
ev &&
contentType !== IMAGE_PNG &&
!/image\/jpe?g/g.test(contentType)
) {
ev.preventDefault();
}
}}
src={objectURL}
ref={imageRef}
/>
</button>
<div className="Lightbox__zoomable-container">
<button
className="Lightbox__zoom-button"
onClick={zoomButtonHandler}
type="button"
>
<img
alt={i18n('lightboxImageAlt')}
className="Lightbox__object"
onContextMenu={(ev: React.MouseEvent<HTMLImageElement>) => {
// These are the only image types supported by Electron's NativeImage
if (
ev &&
contentType !== IMAGE_PNG &&
!/image\/jpe?g/g.test(contentType)
) {
ev.preventDefault();
}
}}
src={objectURL}
ref={imageRef}
/>
</button>
</div>
);
} else {
content = (