[13.0][IMP] web_responsive: Document Viewer

web_responsive/README.rst

@@ -103,6 +103,12 @@ Features for computers:
 
   .. image:: https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/chatter.gif
 
+* When the chatter is configured on the side part, the document viewer fills that
+  part for side-by-side reading instead of full screen. You can still put it on full
+  width preview clicking on the new maximize button.
+
+  .. image:: https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/document_viewer.gif
+
 **Table of contents**
 
 .. contents::

web_responsive/__manifest__.py

@@ -20,5 +20,6 @@
         "static/src/xml/apps.xml",
         "static/src/xml/form_view.xml",
         "static/src/xml/navbar.xml",
+        "static/src/xml/document_viewer.xml",
     ],
 }

web_responsive/readme/DESCRIPTION.rst

@@ -75,3 +75,9 @@ Features for computers:
 * Followers and send button is displayed on mobile. Avatar is hidden.
 
   .. image:: ../static/img/chatter.gif
+
+* When the chatter is configured on the side part, the document viewer fills that
+  part for side-by-side reading instead of full screen. You can still put it on full
+  width preview clicking on the new maximize button.
+
+  .. image:: ../static/img/document_viewer.gif

web_responsive/static/description/index.html

@@ -430,6 +430,11 @@ <h1 class="title">Web Responsive</h1>
 <li><p class="first">Followers and send button is displayed on mobile. Avatar is hidden.</p>
 <img alt="https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/chatter.gif" src="https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/chatter.gif" />
 </li>
+<li><p class="first">When the chatter is configured on the side part, the document viewer fills that
+part for side-by-side reading instead of full screen. You can still put it on full
+width preview clicking on the new maximize button.</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/document_viewer.gif" />
+</li>
 </ul>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">

web_responsive/static/src/css/web_responsive.scss

@@ -1,6 +1,8 @@
 /* Copyright 2018 Tecnativa - Jairo Llopis
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
+$chatter_zone_width: 35%;
+
 @mixin full-screen-dropdown {
     border: none;
     box-shadow: none;
@@ -505,7 +507,7 @@ html .o_web_client .o_action_manager .o_action {
 
                 .o_chatter {
                     border-left: 1px solid gray('400');
-                    flex: 0 0 35%;
+                    flex: 0 0 $chatter_zone_width;
                     max-width: initial;
                     min-width: initial;
                     overflow: auto;
@@ -567,3 +569,80 @@ html .o_web_client .o_action_manager .o_action {
 .oe_wait {
   cursor: progress;
 }
+
+// Document Viewer
+.o_web_client.o_chatter_position_sided {
+    .o_modal_fullscreen.o_document_viewer {
+        // On-top of navbar
+        z-index: 10;
+
+        &.o_responsive_document_viewer {
+            /* Show sided viewer on large screens */
+            @include media-breakpoint-up(lg) {
+                width: $chatter_zone_width;
+                margin-left: auto;
+                right: 0;
+
+                /* Show/Hide control buttons (next, prev, etc..) */
+                &:hover .arrow, &:hover .o_viewer_toolbar {
+                    display: flex;
+                }
+                .arrow, .o_viewer_toolbar {
+                    display: none;
+                }
+
+                .o_viewer_img_wrapper {
+                    position: relative;
+
+                    .o_viewer_pdf {
+                        width: 95%;
+                    }
+                }
+            }
+
+            .o_minimize_btn {
+                display: none;
+            }
+        }
+        &:not(.o_responsive_document_viewer) {
+            .o_maximize_btn {
+                display: none;
+            }
+        }
+        @include media-breakpoint-down(lg) {
+            .o_minimize_btn, .o_maximize_btn {
+                display: none;
+            }
+        }
+    }
+}
+/* Max/Min buttons only are usefull in sided mode */
+.o_web_client:not(.o_chatter_position_sided) {
+    .o_minimize_btn, .o_maximize_btn {
+        display: none;
+    }
+}
+// Apply improvements for Document Viewer on all modes
+.o_modal_fullscreen .o_viewer_content {
+    .o_viewer-header {
+        .o_image_caption {
+            display: contents;
+        }
+
+        // Now uses a container to have more buttons
+        .o_buttons {
+            min-width: 35px;
+            text-align: right;
+
+            // Now close button ('X') it's a fa-icon
+            > .o_close_btn {
+                top: unset;
+                left: unset;
+                bottom: unset;
+                right: unset;
+                font-size: unset;
+                font-weight: unset;
+            }
+        }
+    }
+}

web_responsive/static/src/js/web_responsive.js

@@ -15,6 +15,7 @@ odoo.define('web_responsive', function (require) {
     const RelationalFields = require('web.relational_fields');
     const Chatter = require('mail.Chatter');
     const ListRenderer = require('web.ListRenderer');
+    const DocumentViewer = require('mail.DocumentViewer');
 
     /*
      * Helper function to know if are waiting
@@ -551,4 +552,45 @@ odoo.define('web_responsive', function (require) {
     // Include the SHIFT+ALT mixin wherever
     // `KeyboardNavigationMixin` is used upstream
     AbstractWebClient.include(KeyboardNavigationShiftAltMixin);
+
+    // DocumentViewer: Add support to maximize/minimize
+    DocumentViewer.include({
+        // Widget 'keydown' and 'keyup' events are only dispatched when
+        // this.$el is active, but now the modal have buttons that can obtain
+        // the focus. For this reason we now listen core events, that are
+        // dispatched every time.
+        events: _.extend(_.omit(DocumentViewer.prototype.events, [
+            'keydown',
+            'keyup',
+        ]), {
+            'click .o_maximize_btn': '_onClickMaximize',
+            'click .o_minimize_btn': '_onClickMinimize',
+            'shown.bs.modal': '_onShownModal',
+        }),
+
+        start: function () {
+            core.bus.on('keydown', this, this._onKeydown);
+            core.bus.on('keyup', this, this._onKeyUp);
+            return this._super.apply(this, arguments);
+        },
+
+        destroy: function () {
+            core.bus.off('keydown', this, this._onKeydown);
+            core.bus.off('keyup', this, this._onKeyUp);
+            this._super.apply(this, arguments);
+        },
+
+        _onShownModal: function () {
+            // Disable auto-focus to allow to use controls in edit mode.
+            // This only affects the active modal.
+            // More info: https://stackoverflow.com/a/14795256
+            $(document).off('focusin.modal');
+        },
+        _onClickMaximize: function () {
+            this.$el.removeClass('o_responsive_document_viewer');
+        },
+        _onClickMinimize: function () {
+            this.$el.addClass('o_responsive_document_viewer');
+        },
+    });
 });

web_responsive/static/src/xml/document_viewer.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Copyright 2019 Tecnativa - Alexandre Díaz
+     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+
+<template>
+    <t t-extend="DocumentViewer">
+        <t t-jquery=".o_modal_fullscreen" t-operation="attributes">
+            <attribute name="class">modal o_modal_fullscreen o_document_viewer o_responsive_document_viewer</attribute>
+            <attribute name="data-backdrop">false</attribute>
+        </t>
+    </t>
+
+    <t t-extend="DocumentViewer.Content">
+        <t t-jquery=".o_close_btn" t-operation="replace">
+            <div class="o_buttons float-right mr8">
+                <a role="button" class="mr8 o_maximize_btn" tabindex="0" aria-label="Maximize" title="Maximize"><i class="fa fa-window-maximize"></i></a>
+                <a role="button" class="mr8 o_minimize_btn" tabindex="0" aria-label="Minimize" title="Minimize"><i class="fa fa-window-minimize"></i></a>
+                <a role="button" class="o_close_btn" tabindex="0" aria-label="Close" title="Close"><i class="fa fa-close"></i></a>
+            </div>
+        </t>
+    </t>
+</template>