diff --git a/web_responsive/README.rst b/web_responsive/README.rst index 5e10996e9..00e8bf51f 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/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:: diff --git a/web_responsive/__manifest__.py b/web_responsive/__manifest__.py index 517ee968d..3e6ff55b2 100644 --- a/web_responsive/__manifest__.py +++ b/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', ], } 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 192db9bdb..b341a508f 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/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.

    +https://raw.githubusercontent.com/OCA/web/12.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 244c2818a..1fe766e8d 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; @@ -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; + } +} diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index 4febf0434..5586d2f7c 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/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'); + }, + }); }); 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 @@ + + + + diff --git a/web_responsive/views/web.xml b/web_responsive/views/web.xml index 6e7967f45..624915f8f 100644 --- a/web_responsive/views/web.xml +++ b/web_responsive/views/web.xml @@ -11,8 +11,8 @@ inherit_id="web.webclient_bootstrap" name="App Drawer - Web Client" > - - o_main o_chatter_position_{{ request.env.user.chatter_position or 'normal' }} + + 'o_web_client o_chatter_position_' + (request.env.user.chatter_position or 'normal')