From a74319efe05c227096cc3bcd9925c253c6ec80ce Mon Sep 17 00:00:00 2001 From: OSBotify <76178356+OSBotify@users.noreply.github.com> Date: Mon, 6 Dec 2021 10:12:55 -0800 Subject: [PATCH 1/2] Merge pull request #6595 from Expensify/version-BUILD-d445fdac39aa2339796ea4e82ebad54a452f7bb0 (cherry picked from commit 2b042d5e6591f915e81df79abb5e9022d1235701) --- android/app/build.gradle | 4 ++-- ios/NewExpensify/Info.plist | 2 +- ios/NewExpensifyTests/Info.plist | 2 +- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/android/app/build.gradle b/android/app/build.gradle index 9635b860edc5b..742ce83b9cc2a 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -149,8 +149,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001011706 - versionName "1.1.17-6" + versionCode 1001011707 + versionName "1.1.17-7" } splits { abi { diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index 2d0e376451c75..3fca6a00a8be9 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -31,7 +31,7 @@ CFBundleVersion - 1.1.17.6 + 1.1.17.7 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index ff9514b075087..16f740ce10e7f 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 1.1.17.6 + 1.1.17.7 diff --git a/package-lock.json b/package-lock.json index 5dc3f128f70fe..861cadd0ebc48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.17-6", + "version": "1.1.17-7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6122fef32ced1..da4b33cd12114 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.1.17-6", + "version": "1.1.17-7", "author": "Expensify, Inc.", "homepage": "https://new.expensify.com", "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.", From caf6dc51ef19bd50fe134a3c6184c1881989c2e3 Mon Sep 17 00:00:00 2001 From: Rory Abraham <47436092+roryabraham@users.noreply.github.com> Date: Mon, 6 Dec 2021 10:10:31 -0800 Subject: [PATCH 2/2] Merge pull request #6535 from railway17/han-fix-magnifying-glass (cherry picked from commit d445fdac39aa2339796ea4e82ebad54a452f7bb0) --- src/components/ImageView/index.js | 20 ++++++++++---- src/styles/StyleUtils.js | 46 +++++++++++++++++++++++++------ 2 files changed, 52 insertions(+), 14 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 878adc18c239e..96a191e460a16 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -21,6 +21,7 @@ class ImageView extends PureComponent { this.canUseTouchScreen = canUseTouchScreen(); this.state = { containerHeight: 0, + containerWidth: 0, isZoomed: false, isDragging: false, isMouseDown: false, @@ -85,9 +86,16 @@ class ImageView extends PureComponent { imgRight = imgLeft + (fitRate * width); } - this.setState({ - imgWidth: width, imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom, - }); + const newZoomScale = Math.min(this.state.containerWidth / width, this.state.containerHeight / height); + this.setState(prevState => ({ + imgWidth: width, + zoomScale: prevState.zoomScale === 0 ? newZoomScale : prevState.zoomScale, + imgHeight: height, + imageLeft: imgLeft, + imageTop: imgTop, + imageRight: imgRight, + imageBottom: imgBottom, + })); } /** @@ -169,6 +177,7 @@ class ImageView extends PureComponent { const scale = imageHeight && imageWidth ? Math.min(width / imageWidth, height / imageHeight) : 0; this.setState({ containerHeight: height, + containerWidth: width, zoomScale: scale, }); }} @@ -181,9 +190,10 @@ class ImageView extends PureComponent { > 1 ? styles.pRelative : styles.pAbsolute, ...styles.flex1, }} onPressIn={(e) => { diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 65aced74fe137..e4874f0d546dd 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -88,29 +88,57 @@ function getZoomCursorStyle(isZoomed, isDragging) { * @param {Number} imgHeight * @param {Number} zoomScale * @param {Number} containerHeight + * @param {Number} containerWidth * @return {Object} */ -function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight) { +function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth) { if (imgWidth === 0 || imgHeight === 0) { return { height: isZoomed ? '250%' : '100%', width: isZoomed ? '250%' : '100%', }; } + const top = `${Math.max((containerHeight - imgHeight) / 2, 0)}px`; + const left = `${Math.max((containerWidth - imgWidth) / 2, 0)}px`; + + // Return different size and offset style based on zoomScale and isZoom. if (isZoomed) { + // When both width and height are smaller than container(modal) size, set the height by multiplying zoomScale if it is zoomed in. + if (zoomScale > 1) { + return { + height: `${imgHeight * zoomScale}px`, + width: `${imgWidth * zoomScale}px`, + }; + } + + // If image height and width are bigger than container size, display image with original size because original size is bigger and position absolute. + return { + height: `${imgHeight}px`, + width: `${imgWidth}px`, + top, + left, + }; + } + + // If image is not zoomed in and image size is smaller than container size, display with original size based on offset and position absolute. + if (zoomScale > 1) { return { - height: `${(imgHeight * zoomScale)}px`, - width: `${(imgWidth * zoomScale)}px`, + height: `${imgHeight}px`, + width: `${imgWidth}px`, + top, + left, }; } - const top = `${(containerHeight - imgHeight) / 2}px`; - const left = `calc(50% - ${imgWidth / 2}px)`; + // If image is bigger than container size, display full image in the screen with scaled size (fit by container size) and position absolute. + // top, left offset should be different when displaying long or wide image. + const scaledTop = imgHeight > imgWidth ? 0 : `${Math.max((containerHeight - (imgHeight * zoomScale)) / 2, 0)}px`; + const scaledLeft = imgWidth > imgHeight ? 0 : `${Math.max((containerWidth - (imgWidth * zoomScale)) / 2, 0)}px`; return { - height: `${imgHeight}px`, - width: `${imgWidth}px`, - top, - left, + height: `${imgHeight * zoomScale}px`, + width: `${imgWidth * zoomScale}px`, + top: scaledTop, + left: scaledLeft, }; }