diff --git a/web_responsive/static/img/document_viewer.gif b/web_responsive/static/img/document_viewer.gif
new file mode 100644
index 000000000000..70b0cb864be3
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 4432e8d35007..456a67bf8282 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 2261780a4630..6285d128297b 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 000000000000..ea1fe33b23a9
--- /dev/null
+++ b/web_responsive/static/src/xml/document_viewer.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ modal o_modal_fullscreen o_document_viewer o_responsive_document_viewer
+ false
+
+
+
+
+
+
+
+
+
+