Merge PR #1467 into 12.0

Signed-off-by pedrobaeza

web_responsive/README.rst

@@ -103,6 +103,12 @@ Features for computers:
 
   .. image:: https://raw.githubusercontent.com/OCA/web/12.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/12.0/web_responsive/static/img/document_viewer.gif
+
 **Table of contents**
 
 .. contents::

web_responsive/__manifest__.py

@@ -25,5 +25,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 @@ See <a class="reference external" href="https://github.com/odoo/odoo/issues/3006
 <li><p class="first">Followers and send button is displayed on mobile. Avatar is hidden.</p>
 <img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter.gif" src="https://raw.githubusercontent.com/OCA/web/12.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/12.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/12.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;
@@ -499,7 +501,7 @@ html .o_web_client .o_main .o_main_content {
 
                 .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;
@@ -576,3 +578,106 @@ html .o_web_client .o_main .o_main_content {
 .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;
+
+                /* Show/Hide control buttons (next, prev, etc..) */
+                &:hover .arrow, &:hover .o_viewer_toolbar {
+                    display: unset;
+                }
+                .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;
+
+            .o_split_pdf_area {
+                padding: 16px;
+                margin-bottom: 0;
+                position: relative;
+                top: -5px;
+
+                label {
+                    margin-bottom: unset;
+                }
+
+                .o_page_number_input {
+                    border: 1px solid white;
+                    border-radius: 3px;
+                }
+            }
+
+            /* Hide 'split pdf' feature on small screens */
+            @include media-breakpoint-down(xs) {
+                .o_split_pdf_area {
+                    display: none;
+                }
+            }
+        }
+
+        // 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;
+            }
+        }
+    }
+
+    .o_viewer_toolbar {
+        width: max-content;
+    }
+}

web_responsive/static/src/js/web_responsive.js

@@ -14,6 +14,7 @@ odoo.define('web_responsive', function (require) {
     var Menu = require("web.Menu");
     var RelationalFields = require('web.relational_fields');
     var Chatter = require('mail.Chatter');
+    var DocumentViewer = require('mail.DocumentViewer');
 
     /*
      * Helper function to know if are waiting
@@ -525,4 +526,25 @@ 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({
+        events: _.extend(DocumentViewer.prototype.events, {
+            'click .o_maximize_btn': '_onClickMaximize',
+            'click .o_minimize_btn': '_onClickMinimize',
+        }),
+
+        start: function () {
+            this.$btnMaximize = this.$('.o_maximize_btn');
+            this.$btnMinimize = this.$('.o_minimize_btn');
+            return this._super.apply(this, arguments);
+        },
+
+        _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>

web_responsive/views/web.xml

@@ -11,8 +11,8 @@
               inherit_id="web.webclient_bootstrap"
               name="App Drawer - Web Client"
               >
-        <xpath expr="//*[hasclass('o_main')]" position="attributes">
+        <xpath expr="//t[@t-set='body_classname']" position="attributes">
-            <attribute name="t-attf-class">o_main o_chatter_position_{{ request.env.user.chatter_position or 'normal' }}</attribute>
+            <attribute name="t-value">'o_web_client o_chatter_position_' + (request.env.user.chatter_position or 'normal')</attribute>
         </xpath>
     </template>