From 11b85c7c13afd68b0ed00ab74ade6bb32c3ce9d9 Mon Sep 17 00:00:00 2001
From: Dhruv Patel <dhp@odoo.com>
Date: Fri, 2 Apr 2021 10:39:15 +0000
Subject: [PATCH] [FIX] mail: small image attachment preview too small for its
 box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the chatter, the attachment preview image size is fixed with 160*160
but the actual preview area is 200*200px so the image is not filling correctly.
It appears padding around the image, especially visible when hovering it.

So with this commit, We should make sure to use a properly sized image in the
preview. we have to also provide the perfect resolution and preview for
the small images without upscaling incorrectly. For large images, it should be
display based on the aspect ratio.

Task : 2483885

closes odoo/odoo#69755

X-original-commit: 08f152bb9ceb6bd4560aa177b392b0420162e131
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../static/src/components/attachment/attachment.js   | 12 ++++++++++--
 .../static/src/components/attachment/attachment.scss |  3 ++-
 .../src/components/attachment/attachment_tests.js    |  4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/addons/mail/static/src/components/attachment/attachment.js b/addons/mail/static/src/components/attachment/attachment.js
index 7b31d0fbeac..7d1947e5363 100644
--- a/addons/mail/static/src/components/attachment/attachment.js
+++ b/addons/mail/static/src/components/attachment/attachment.js
@@ -91,10 +91,18 @@ class Attachment extends Component {
         if (this.detailsMode === 'card') {
             size = '38x38';
         } else {
-            size = '160x160';
+            // The size of background-image depends on the props.imageSize
+            // to sync with width and height of `.o_Attachment_image`.
+            if (this.props.imageSize === "large") {
+                size = '400x400';
+            } else if (this.props.imageSize === "medium") {
+                size = '200x200';
+            } else if (this.props.imageSize === "small") {
+                size = '100x100';
+            }
         }
         // background-size set to override value from `o_image` which makes small image stretched
-        return `background-image:url(/web/image/${this.attachment.id}/${size}/?crop=true); background-size: auto;`;
+        return `background-image:url(/web/image/${this.attachment.id}/${size}); background-size: auto;`;
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
index 22ff24f3880..583e5703691 100644
--- a/addons/mail/static/src/components/attachment/attachment.scss
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -71,7 +71,8 @@
 
     &.o-details-overlay {
         position: relative;
-
+        // small, medium and large size styles should be sync with
+        // the size of the background-image and `.o_Attachment_image`.
         &.o-small {
             min-width: 100px;
             min-height: 100px;
diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js
index a3d1cd63602..8453ecd6b7f 100644
--- a/addons/mail/static/src/components/attachment/attachment_tests.js
+++ b/addons/mail/static/src/components/attachment/attachment_tests.js
@@ -106,8 +106,8 @@ QUnit.test('simplest layout + deletable', async function (assert) {
         async mockRPC(route, args) {
             if (route.includes('web/image/750')) {
                 assert.ok(
-                    route.includes('/160x160'),
-                    "should fetch image with 160x160 pixels ratio");
+                    route.includes('/200x200'),
+                    "should fetch image with 200x200 pixels ratio");
                 assert.step('fetch_image');
             }
             return this._super(...arguments);