[FIX] mail: rotate image in preview

When uploading an image as attachment, the document viewer doesn't
support the EXIF data. Therefore, a picture taken with a non-zero angle
will not appear with the right orientation (preview or full-size image).

Unfortunately, supporting EXIF data is not trivial in Python or
JavaScript without external libraries. Therefore, we add a rotate button
which allows the user to rotate the image by 90°. Moreover, we add the
`image-orientation: from-image` CSS property, which is only supported by
Firefox.

opw-1814407

addons/mail/static/src/js/document_viewer.js

@@ -17,6 +17,7 @@ var DocumentViewer = Widget.extend({
         'click .o_viewer_video': '_onVideoClicked',
         'click .move_next': '_onNext',
         'click .move_previous': '_onPrevious',
+        'click .o_rotate': '_onRotate',
         'click .o_zoom_in': '_onZoomIn',
         'click .o_zoom_out': '_onZoomOut',
         'click .o_close_btn, .o_viewer_img_wrapper': '_onClose',
@@ -103,6 +104,30 @@ var DocumentViewer = Widget.extend({
         this.$('.o_viewer_img').load(_.bind(this._onImageLoaded, this));
         this._reset();
     },
+    /**
+     * Get CSS transform property based on scale and angle
+     *
+     * @private
+     * @param {float} scale
+     * @param {float} angle
+     */
+    _getTransform: function(scale, angle) {
+        return 'scale3d(' + scale + ', ' + scale + ', 1) rotate(' + angle + 'deg)'
+    },
+    /**
+     * Rotate image clockwise by provided angle
+     *
+     * @private
+     * @param {float} angle
+     */
+    _rotate: function (angle) {
+        this._reset();
+        var new_angle = (this.angle || 0) + angle;
+        this.$('.o_viewer_img').css('transform', this._getTransform(this.scale, new_angle));
+        this.$('.o_viewer_img').css('max-width', new_angle % 180 !== 0 ? $(document).height() : '100%');
+        this.$('.o_viewer_img').css('max-height', new_angle % 180 !== 0 ? $(document).width() : '100%');
+        this.angle = new_angle;
+    },
     /**
      * Zoom in/out image by provided scale
      *
@@ -111,7 +136,7 @@ var DocumentViewer = Widget.extend({
      */
     _zoom: function (scale) {
         if (scale > 0.5) {
-            this.$('.o_viewer_img').css('transform', 'scale3d(' + scale + ', ' + scale + ', 1)');
+            this.$('.o_viewer_img').css('transform', this._getTransform(scale, this.angle || 0));
             this.scale = scale;
         }
     },
@@ -280,6 +305,14 @@ var DocumentViewer = Widget.extend({
             videoElement.pause();
         }
     },
+    /**
+     * @private
+     * @param {MouseEvent} e
+     */
+    _onRotate: function (e) {
+        e.preventDefault();
+        this._rotate(90);
+    },
     /**
      * @private
      * @param {MouseEvent} e

addons/mail/static/src/less/composer.less

@@ -269,6 +269,7 @@
         img {
             width: @o-mail-attachment-image-size;
             height: @o-mail-attachment-image-size;
+            image-orientation: from-image; // Only supported in Firefox
         }
         .o_image_overlay{
             display: none;
@@ -370,6 +371,9 @@
                 .o-flex-display();
                 justify-content: center;
                 align-items: center;
+                img {
+                    image-orientation: from-image; // Only supported in Firefox
+                }
                 img, video {
                     max-width: 100%;
                     max-height: 100%;

addons/mail/static/src/xml/thread.xml

@@ -50,6 +50,11 @@
             </div>
             <div t-if="widget.activeAttachment.type == 'image'" class="o_viewer_toolbar">
                 <ul class="list-inline">
+                    <li>
+                        <a class="o_rotate" href="#">
+                            <i class="fa fa-2x fa-repeat"></i>
+                        </a>
+                    </li>
                     <li>
                         <a class="o_zoom_out" href="#">
                             <i class="fa fa-2x fa-search-minus"></i>