diff --git a/web_responsive/README.rst b/web_responsive/README.rst index 808f7c2d8..e31c56ac0 100644 --- a/web_responsive/README.rst +++ b/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:: diff --git a/web_responsive/__manifest__.py b/web_responsive/__manifest__.py index 6b2539755..06360b4aa 100644 --- a/web_responsive/__manifest__.py +++ b/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", ], } diff --git a/web_responsive/readme/DESCRIPTION.rst b/web_responsive/readme/DESCRIPTION.rst index 2b73a88a3..60b630a3d 100644 --- a/web_responsive/readme/DESCRIPTION.rst +++ b/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 diff --git a/web_responsive/static/description/index.html b/web_responsive/static/description/index.html index cc88bfae7..acf9179bc 100644 --- a/web_responsive/static/description/index.html +++ b/web_responsive/static/description/index.html @@ -430,6 +430,11 @@ See Followers and send button is displayed on mobile. Avatar is hidden.

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.

    +https://raw.githubusercontent.com/OCA/web/13.0/web_responsive/static/img/document_viewer.gif +

    • Table of contents

    diff --git a/web_responsive/static/img/document_viewer.gif b/web_responsive/static/img/document_viewer.gif new file mode 100644 index 000000000..70b0cb864 Binary files /dev/null and b/web_responsive/static/img/document_viewer.gif differ diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss index 4432e8d35..456a67bf8 100644 --- a/web_responsive/static/src/css/web_responsive.scss +++ b/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; + } + } + } +} diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index 2261780a4..6285d1282 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/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'); + }, + }); }); diff --git a/web_responsive/static/src/xml/document_viewer.xml b/web_responsive/static/src/xml/document_viewer.xml new file mode 100644 index 000000000..ea1fe33b2 --- /dev/null +++ b/web_responsive/static/src/xml/document_viewer.xml @@ -0,0 +1,22 @@ + + + +