Merge PR #1305 into 12.0

Signed-off-by pedrobaeza

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

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, "

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

web_responsive/static/description/index.html

@@ -418,6 +418,18 @@ See <a class="reference external" href="https://github.com/odoo/odoo/issues/3006
 <li><p class="first">Sticky chatter topbar</p>
 <img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif" />
 </li>
+<li><p class="first">AppMenu waits for action finished to show the view</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/appmenu.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/appmenu.gif" />
+</li>
+<li><p class="first">Sticky header &amp; footer in list view</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/listview.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/listview.gif" />
+</li>
+<li><p class="first">Sticky statusbar in form view</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/formview.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/formview.gif" />
+</li>
+<li><p class="first">Followers and send button is displayed on mobile. Avatar is hidden.</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter.gif" />
+</li>
 </ul>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">

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;
+}

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));
+        },
     });
 
     /**