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

Lightbox zoom improvements

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
Show Stats 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%;
object-fit: contain;
outline: none;
padding: 0 40px;
width: auto;
}
&__object--container--fill &__object {
height: 100%;
padding: 0;
width: 100%;
}
&__unsupported {
@include button-reset;
flex-grow: 1;
@ -139,6 +132,7 @@
&__zoom-button {
@include button-reset;
cursor: zoom-in;
margin: 0 40px;
}
&__object--container--zoom,

29
ts/components/Lightbox.tsx
View File

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