From 7269d9e4f81bda22691b9b20cb5d778eee7a79ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Mon, 14 Mar 2022 13:31:33 +0000
Subject: [PATCH] [IMP] mail: turn 'AttachmentViewer/imageStyle' into field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Task-2793280

closes odoo/odoo#86371

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../attachment_viewer/attachment_viewer.js    | 23 ----------------
 .../attachment_viewer/attachment_viewer.xml   |  2 +-
 .../attachment_viewer/attachment_viewer.js    | 26 +++++++++++++++++++
 3 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
index 6570df37d43..219cb44c481 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
@@ -79,29 +79,6 @@ export class AttachmentViewer extends Component {
         return this.messaging && this.messaging.models['AttachmentViewer'].get(this.props.localId);
     }
 
-    /**
-     * Compute the style of the image (scale + rotation).
-     *
-     * @returns {string}
-     */
-    get imageStyle() {
-        const attachmentViewer = this.attachmentViewer;
-        let style = `transform: ` +
-            `scale3d(${attachmentViewer.scale}, ${attachmentViewer.scale}, 1) ` +
-            `rotate(${attachmentViewer.angle}deg);`;
-
-        if (attachmentViewer.angle % 180 !== 0) {
-            style += `` +
-                `max-height: ${window.innerWidth}px; ` +
-                `max-width: ${window.innerHeight}px;`;
-        } else {
-            style += `` +
-                `max-height: 100%; ` +
-                `max-width: 100%;`;
-        }
-        return style;
-    }
-
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index 09fcd963418..641d6bd64b0 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -43,7 +43,7 @@
                                     <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/>
                                 </div>
                             </t>
-                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
+                            <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.imageUrl" t-att-style="attachmentViewer.imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
                         </div>
                     </t>
                     <t t-if="attachmentViewer.attachment.isPdf">
diff --git a/addons/mail/static/src/models/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/models/attachment_viewer/attachment_viewer.js
index da956f57ca8..ffe17cf8a06 100644
--- a/addons/mail/static/src/models/attachment_viewer/attachment_viewer.js
+++ b/addons/mail/static/src/models/attachment_viewer/attachment_viewer.js
@@ -30,6 +30,26 @@ registerModel({
             const accessToken = this.attachment.accessToken ? `?access_token=${this.attachment.accessToken}` : '';
             return `/web/image/${this.attachment.id}${accessToken}`;
         },
+        /**
+         * @private
+         * @returns {string}
+         */
+        _computeImageStyle() {
+            let style = `transform: ` +
+                `scale3d(${this.scale}, ${this.scale}, 1) ` +
+                `rotate(${this.angle}deg);`;
+
+            if (this.angle % 180 !== 0) {
+                style += `` +
+                    `max-height: ${window.innerWidth}px; ` +
+                    `max-width: ${window.innerHeight}px;`;
+            } else {
+                style += `` +
+                    `max-height: 100%; ` +
+                    `max-width: 100%;`;
+            }
+            return style;
+        },
     },
     fields: {
         /**
@@ -60,6 +80,12 @@ registerModel({
             isCausal: true,
             readonly: true,
         }),
+        /**
+         * Style of the image (scale + rotation).
+         */
+        imageStyle: attr({
+            compute: '_computeImageStyle',
+        }),
         /**
          * Determines the source URL to use for the image.
          */