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 { &__zoom-button {
@include button-reset; @include button-reset;
cursor: zoom-in; cursor: zoom-in;

46
ts/components/Lightbox.tsx
View File

@ -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 = (