diff --git a/web_responsive/README.rst b/web_responsive/README.rst index db529968..6eae1ac6 100644 --- a/web_responsive/README.rst +++ b/web_responsive/README.rst @@ -87,6 +87,22 @@ Features for computers: .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif +* AppMenu waits for action finished to show the view + + .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/appmenu.gif + +* Sticky header & footer in list view + + .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/listview.gif + +* Sticky statusbar in form view + + .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/formview.gif + +* Followers and send button is displayed on mobile. Avatar is hidden. + + .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter.gif + **Table of contents** .. contents:: diff --git a/web_responsive/__manifest__.py b/web_responsive/__manifest__.py index 0d5d1564..f190bd60 100644 --- a/web_responsive/__manifest__.py +++ b/web_responsive/__manifest__.py @@ -5,7 +5,7 @@ { "name": "Web Responsive", "summary": "Responsive web client, community-supported", - "version": "12.0.1.1.0", + "version": "12.0.1.1.1", "category": "Website", "website": "https://github.com/OCA/web", "author": "LasLabs, Tecnativa, Alexandre Díaz, " diff --git a/web_responsive/readme/DESCRIPTION.rst b/web_responsive/readme/DESCRIPTION.rst index cf439143..2b73a88a 100644 --- a/web_responsive/readme/DESCRIPTION.rst +++ b/web_responsive/readme/DESCRIPTION.rst @@ -58,4 +58,20 @@ Features for computers: * Sticky chatter topbar - .. image:: ./static/img/chatter_topbar.gif + .. image:: ../static/img/chatter_topbar.gif + +* AppMenu waits for action finished to show the view + + .. image:: ../static/img/appmenu.gif + +* Sticky header & footer in list view + + .. image:: ../static/img/listview.gif + +* Sticky statusbar in form view + + .. image:: ../static/img/formview.gif + +* Followers and send button is displayed on mobile. Avatar is hidden. + + .. image:: ../static/img/chatter.gif diff --git a/web_responsive/static/description/index.html b/web_responsive/static/description/index.html index d38086ea..979f020c 100644 --- a/web_responsive/static/description/index.html +++ b/web_responsive/static/description/index.html @@ -418,6 +418,18 @@ See Sticky chatter topbar

https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif +
  • AppMenu waits for action finished to show the view

    +https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/appmenu.gif +
  • +
  • Sticky header & footer in list view

    +https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/listview.gif +
  • +
  • Sticky statusbar in form view

    +https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/formview.gif +
  • +
  • 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 +
  • Table of contents

    diff --git a/web_responsive/static/img/appmenu.gif b/web_responsive/static/img/appmenu.gif new file mode 100644 index 00000000..411937bc Binary files /dev/null and b/web_responsive/static/img/appmenu.gif differ diff --git a/web_responsive/static/img/chatter.gif b/web_responsive/static/img/chatter.gif new file mode 100644 index 00000000..0a2af93d Binary files /dev/null and b/web_responsive/static/img/chatter.gif differ diff --git a/web_responsive/static/img/formview.gif b/web_responsive/static/img/formview.gif new file mode 100644 index 00000000..688bbc9f Binary files /dev/null and b/web_responsive/static/img/formview.gif differ diff --git a/web_responsive/static/img/listview.gif b/web_responsive/static/img/listview.gif new file mode 100644 index 00000000..ebdcac8a Binary files /dev/null and b/web_responsive/static/img/listview.gif differ diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss index 565d146e..b61c6c2a 100644 --- a/web_responsive/static/src/css/web_responsive.scss +++ b/web_responsive/static/src/css/web_responsive.scss @@ -172,7 +172,6 @@ .o-app-icon { height: auto; max-width: 7rem; - width: 100%; } // Search input for menus @@ -216,6 +215,8 @@ html .o_web_client .o_main .o_main_content { overflow: initial; } } + + max-width: 100%; } // Control panel (breadcrumbs, search box, buttons...) @@ -328,6 +329,30 @@ html .o_web_client .o_main .o_main_content { .o_form_view { .o_form_sheet { max-width: calc(100% - 32px); + overflow-x: scroll; + } + + // Sticky statusbar + .o_form_statusbar { + position: sticky; + top: 0; + z-index: 1; + } + + // Support for long title (with ellipsis) + .oe_title { + width: initial; + + span { + max-width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: initial; + } + span:active { + white-space: normal; + } } @include media-breakpoint-down(sm) { @@ -398,19 +423,53 @@ html .o_web_client .o_main .o_main_content { margin: 0; } } + + .o_chatter { + // Display send button on small screens + .o_thread_composer { + padding-left: $o-mail-thread-avatar-size*0.5; + + .o_composer_button_send { + display: initial !important; // Forced in core + } + .o_chatter_avatar { + display: none; + } + } + + .o_chatter_topbar { + height: auto; + flex-wrap: wrap-reverse; + + > .o_topbar_right_area { + flex: 1 0 auto; + flex-wrap: wrap; + max-width: 100%; + + // Display followers on small screens + .o_followers { + display: initial !important; // Forced in core + + @include media-breakpoint-down(xs) { + padding-bottom: 50px; + } + } + } + } + } } } // Sided chatter, if user wants .o_chatter_position_sided & { - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { .o_form_view:not(.o_form_nosheet) { display: flex; flex-flow: row nowrap; height: 100%; .o_form_sheet_bg { - flex: 1 1 60%; + flex: 1 1 auto; overflow: auto; > .o_form_sheet { @@ -420,9 +479,9 @@ html .o_web_client .o_main .o_main_content { .o_chatter { border-left: 1px solid gray('400'); - flex: 1 1 40%; - max-width: 50%; - min-width: 30%; + flex: 0 0 35%; + max-width: initial; + min-width: initial; overflow: auto; .o_chatter_header_container { @@ -434,6 +493,18 @@ html .o_web_client .o_main .o_main_content { .o_chatter_topbar { margin-top: 0; + flex-wrap: wrap; + height: auto; + button:last-of-type { + flex: 1 0 auto; + text-align: left; + } + + .o_topbar_right_area { + order: -10; + flex: 0 1 100%; + border-bottom-color: transparent; + } } .o_attachments_previews { @@ -446,3 +517,32 @@ html .o_web_client .o_main .o_main_content { } } } + +// Sticky Header & Footer in List View +.table-responsive { + overflow-x: initial; + + .o_list_view { + // th & td are here for compatibility with chrome + thead, thead tr:nth-child(1) th { + position: sticky; + top: 0; + z-index: 1; + } + thead tr:nth-child(1) th { + background-color: $o-list-footer-bg-color; + } + tfoot, tfoot tr:nth-child(1) td { + position: sticky; + bottom: 0; + } + tfoot tr:nth-child(1) td { + background-color: $o-list-footer-bg-color; + } + } +} + +// Waiting Cursor +.oe_wait { + cursor: progress; +} diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index 387bdaf4..f128f2c5 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/web_responsive/static/src/js/web_responsive.js @@ -4,6 +4,7 @@ odoo.define('web_responsive', function (require) { 'use strict'; + var ActionManager = require('web.ActionManager'); var AbstractWebClient = require("web.AbstractWebClient"); var AppsMenu = require("web.AppsMenu"); var config = require("web.config"); @@ -76,6 +77,7 @@ odoo.define('web_responsive', function (require) { "click .o-menu-search-result": "_searchResultChosen", "shown.bs.dropdown": "_searchFocus", "hidden.bs.dropdown": "_searchReset", + "hide.bs.dropdown": "_hideAppsMenu", }, AppsMenu.prototype.events), /** @@ -194,6 +196,7 @@ odoo.define('web_responsive', function (require) { */ _searchResultChosen: function (event) { event.preventDefault(); + event.stopPropagation(); var $result = $(event.currentTarget), text = $result.text().trim(), data = $result.data(), @@ -264,6 +267,13 @@ odoo.define('web_responsive', function (require) { }, }); }, + + /* + * Control if AppDrawer can be closed + */ + _hideAppsMenu: function () { + return $('.oe_wait').length === 0 && !this.$('input').is(':focus'); + }, }); Menu.include({ @@ -273,6 +283,8 @@ odoo.define('web_responsive', function (require) { // Opening any dropdown in the navbar should hide the hamburger "show.bs.dropdown .o_menu_systray, .o_menu_apps": "_hideMobileSubmenus", + // Prevent close section menu + "hide.bs.dropdown .o_menu_sections": "_hideMenuSection", }, Menu.prototype.events), start: function () { @@ -286,12 +298,22 @@ odoo.define('web_responsive', function (require) { _hideMobileSubmenus: function () { if ( this.$menu_toggle.is(":visible") && - this.$section_placeholder.is(":visible") + this.$section_placeholder.is(":visible") && + $('.oe_wait').length === 0 ) { this.$section_placeholder.collapse("hide"); } }, + /** + * Hide Menu Section + * + * @returns {Boolean} + */ + _hideMenuSection: function () { + return $('.oe_wait').length === 0; + }, + /** * No menu brand in mobiles * @@ -358,7 +380,39 @@ odoo.define('web_responsive', function (require) { } else { this._super.apply(this, arguments); } - } + }, + }); + + // Hide AppDrawer or Menu when the action has been completed + ActionManager.include({ + + /** + * Because the menu aren't closed when click, this method + * searchs for the menu with the action executed to close it. + * + * @param {action} action + * The executed action + */ + _hideMenusByAction: function (action) { + var uniq_sel = '[data-action-id='+action.id+']'; + // Need close AppDrawer? + $(_.str.sprintf( + '.o_menu_apps .dropdown:has(.dropdown-menu.show:has(%s)) > a', + uniq_sel)).dropdown('toggle'); + // Need close Sections Menu? + // TODO: Change to 'hide' in modern Bootstrap >4.1 + $(_.str.sprintf( + '.o_menu_sections li.show:has(%s) .dropdown-toggle', uniq_sel)) + .dropdown('toggle'); + // Need close Mobile? + $(_.str.sprintf('.o_menu_sections.show:has(%s)', uniq_sel)) + .collapse('hide'); + }, + + _handleAction: function (action) { + return this._super.apply(this, arguments).always( + $.proxy(this, '_hideMenusByAction', action)); + }, }); /**