mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Lightbox zoom improvements

Browse source
This commit is contained in:
Josh Perez 2022-01-19 15:21:12 -05:00 • committed by GitHub
parent c1e3e87b99
commit 3eddd06e5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
stylesheets/components/Lightbox.scss
View file

@ -99,16 +99,9 @@
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
outline: none; outline: none;
padding: 0 40px;
width: auto; width: auto;
} }
&__object--container--fill &__object {
height: 100%;
padding: 0;
width: 100%;
}
&__unsupported { &__unsupported {
@include button-reset; @include button-reset;
flex-grow: 1; flex-grow: 1;
@ -139,6 +132,7 @@
&__zoom-button { &__zoom-button {
@include button-reset; @include button-reset;
cursor: zoom-in; cursor: zoom-in;
margin: 0 40px;
} }
&__object--container--zoom, &__object--container--zoom,

29
ts/components/Lightbox.tsx
View file

@ -281,7 +281,10 @@ export function Lightbox({
return; return;
} }
const { screenWidth, screenHeight } = zoomCache; const { maxX, maxY, screenWidth, screenHeight } = zoomCache;
const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
const offsetX = screenWidth / 2 - ev.clientX; const offsetX = screenWidth / 2 - ev.clientX;
const offsetY = screenHeight / 2 - ev.clientY; const offsetY = screenHeight / 2 - ev.clientY;
@ -291,8 +294,8 @@ export function Lightbox({
springApi.start({ springApi.start({
scale: ZOOM_SCALE, scale: ZOOM_SCALE,
translateX: x, translateX: shouldTranslateX ? x : undefined,
translateY: y, translateY: shouldTranslateY ? y : undefined,
}); });
}, },
[maxBoundsLimiter, springApi] [maxBoundsLimiter, springApi]
@ -349,13 +352,21 @@ export function Lightbox({
} }
if (!isZoomed) { if (!isZoomed) {
const maxX = imageNode.offsetWidth;
const maxY = imageNode.offsetHeight;
const screenHeight = window.innerHeight;
const screenWidth = window.innerWidth;
zoomCacheRef.current = { zoomCacheRef.current = {
maxX: imageNode.offsetWidth, maxX,
maxY: imageNode.offsetHeight, maxY,
screenHeight: window.innerHeight, screenHeight,
screenWidth: window.innerWidth, screenWidth,
}; };
const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
const { height, left, top, width } = const { height, left, top, width } =
animateNode.getBoundingClientRect(); animateNode.getBoundingClientRect();
@ -367,8 +378,8 @@ export function Lightbox({
springApi.start({ springApi.start({
scale: ZOOM_SCALE, scale: ZOOM_SCALE,
translateX: x, translateX: shouldTranslateX ? x : undefined,
translateY: y, translateY: shouldTranslateY ? y : undefined,
}); });
setIsZoomed(true); setIsZoomed(true);