fix(mespapiers): Image keeps same dimensions when rotated

The dimensions displayed on the screen. The actual dimensions of the images are already preserved.
cozy · May 30, 2023 · 9b078c4 · 9b078c4
1 parent 5737ab7
commit 9b078c4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
@@ -6,6 +6,7 @@ import Card from 'cozy-ui/transpiled/react/Card'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
+import styles from './ScanResultCard.styl'
 import ScanResultCardActions from './ScanResultCardActions'
 import { useFormData } from '../../Hooks/useFormData'
 import { getLastFormDataFile, isSameFile } from '../helpers'
@@ -62,27 +63,22 @@ const ScanResultCard = forwardRef(
 
     return (
       <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
-        <Box
-          className="u-flex u-flex-justify-center u-flex-items-center u-h-100"
-          minHeight={imgWrapperMinHeight}
-        >
-          <div className="u-mah-5">
-            {isImageType(currentFile) ? (
-              <RotateImage
-                image={URL.createObjectURL(currentFile)}
-                onLoaded={handleImageLoaded}
-                rotation={rotationImage}
-                a11n={{ 'aria-hidden': true }}
-                ref={ref}
-              />
-            ) : (
-              <>
-                <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
-                <Typography>{currentFile.name}</Typography>
-              </>
-            )}
-          </div>
-        </Box>
+        <div className={styles['image-container']}>
+          {isImageType(currentFile) ? (
+            <RotateImage
+              image={URL.createObjectURL(currentFile)}
+              onLoaded={handleImageLoaded}
+              rotation={rotationImage}
+              a11n={{ 'aria-hidden': true }}
+              ref={ref}
+            />
+          ) : (
+            <>
+              <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+              <Typography>{currentFile.name}</Typography>
+            </>
+          )}
+        </div>
         <Box display="flex" gridGap="1rem" marginTop="1rem">
           <ScanResultCardActions
             onRotate={handleRotate}

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.styl b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.styl
@@ -0,0 +1,16 @@
+.image-container
+  width 100%
+  padding-top 100%
+  position relative
+
+.image-container:before
+  content ""
+  display block
+  margin-top -100%
+
+.image-container > *
+  position absolute
+  top 0
+  left 0
+  width 100%
+  height 100%
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/widgets/RotateImage.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/widgets/RotateImage.jsx
@@ -12,7 +12,7 @@ const RotateImage = forwardRef(
         ref={ref}
         onLoad={onLoaded}
         src={src}
-        style={{ maxWidth: '100%', maxHeight: 'inherit' }}
+        style={{ maxWidth: '100%', objectFit: 'contain' }}
         {...a11n}
         {...props}
       />