Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web-responsive: Document Viewer

pull/1819/head
Alexandre Díaz 2019-12-24 10:42:20 +01:00 committed by Splash
parent 0f4b2a85f9
commit 1651d7c137
8 changed files with 163 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web_responsive/README.rst
View File

@ -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::

3
web_responsive/__manifest__.py
View File

@ -6,7 +6,7 @@
{
"name": "Web Responsive",
"summary": "Responsive web client, community-supported",
"version": "13.0.1.0.2",
"version": "13.0.2.0.0",
"category": "Website",
"website": "https://github.com/OCA/web",
"author": "LasLabs, Tecnativa, " "Odoo Community Association (OCA)",
@ -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",
],
}

6
web_responsive/readme/DESCRIPTION.rst
View File

@ -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

5
web_responsive/static/description/index.html
View File

@ -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/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">

BIN
web_responsive/static/img/document_viewer.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

81
web_responsive/static/src/css/web_responsive.scss
View File

@ -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;
@ -507,7 +509,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;
@ -568,3 +570,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;
}
}
}
}

42
web_responsive/static/src/js/web_responsive.js
View File

@ -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');
},
});
});

22
web_responsive/static/src/xml/document_viewer.xml 100644
View File

@ -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>