[IMP] web_responsive: Suggested changes

web_responsive/readme/DESCRIPTION.rst

@@ -59,3 +59,7 @@ Features for computers:
 * Sticky chatter topbar
 
   .. image:: ./static/img/chatter_topbar.gif
+
+* AppMenu waits for action finished to show the view
+
+  .. image:: ./static/img/appmenu.gif

web_responsive/static/src/css/web_responsive.scss

@@ -2,26 +2,25 @@
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
 // AppMenu icon waiting indicator anim
-@keyframes o-app-icon-bounce-animation {
-  0% {
-    transform-origin: bottom center;
-  }
-  25% {
-    transform: translateY(-20px);
-  }
-  50% {
-    transform: translateY(0px);
-  }
-  75% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0);
-    transform-origin: bottom center;
-  }
+@keyframes o-app-icon-flash-animation {
+    0% {
+        filter: brightness(1.0);
+    }
+    25% {
+        filter: brightness(2.0);
+    }
+    50% {
+        filter: brightness(1.0);
+    }
+    75% {
+        filter: brightness(2.0);
+    }
+    100% {
+        filter: brightness(1.0);
+    }
 }
-.o-app-icon-waiting {
-  animation: 1.3s infinite cubic-bezier(.65,.05,.36,1) o-app-icon-bounce-animation;
+.o-app-waiting img {
+  animation: 1.3s infinite cubic-bezier(.65,.05,.36,1) o-app-icon-flash-animation;
 }
 
 @mixin full-screen-dropdown {
@@ -349,32 +348,6 @@ html .o_web_client .o_main .o_main_content {
 .o_content, .modal-content {
     max-width: 100%;
 
-    // Sticky Header & Footer in List View
-    >div {
-        >.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;
-                }
-            }
-        }
-    }
-
     // Form views
     .o_form_view {
         .o_form_sheet {
@@ -392,14 +365,14 @@ html .o_web_client .o_main .o_main_content {
         .oe_title {
             width: initial;
 
-            >h1>span {
+            span {
                 max-width: 100%;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 overflow: hidden;
                 width: initial;
             }
-            >h1>span:active {
+            span:active {
                 white-space: normal;
             }
         }
@@ -532,3 +505,27 @@ 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;
+        }
+    }
+}

web_responsive/static/src/js/web_responsive.js

@@ -270,7 +270,12 @@ odoo.define('web_responsive', function (require) {
         _onAppsMenuItemClicked: function (ev) {
             ev.preventDefault();
             ev.stopPropagation();
-            $(ev.currentTarget).find('img').addClass('o-app-icon-waiting');
+            // Prevents anim more app-icon if user click other before action
+            // is fully loaded
+            this.$el.find('.o-app-waiting').removeClass(
+                'o-app-waiting');
+            $(ev.currentTarget).addClass('o-app-waiting');
+            document.body.style.cursor = 'progress';
             this._super.apply(this, arguments);
         },
     });
@@ -372,16 +377,23 @@ odoo.define('web_responsive', function (require) {
 
     // Hide AppMenu & remove waiting anim when loaded action
     ActionManager.include({
-        doAction: function () {
+        doAction: function (action, options) {
             return this._super.apply(this, arguments).then(function () {
                 var $app_menu = $('.o_menu_apps .dropdown');
-                if ($app_menu.length) {
-                    if ($app_menu.hasClass('show')) {
-                        $app_menu.dropdown('toggle');
+                if ($app_menu.length && options &&
+                        'action_menu_id' in options) {
+                    var $app = $app_menu.find('.o_app.active');
+                    var menu_id = $app.data('menuId');
+                    if (menu_id === options.action_menu_id) {
+                        if ($app_menu.hasClass('show')) {
+                            $app_menu.dropdown('toggle');
+                        }
+
+                        document.body.style.cursor = 'default';
+                        $app_menu.find('.o-app-waiting').removeClass(
+                            'o-app-waiting');
                     }
 
-                    $app_menu.find('img.o-app-icon-waiting').removeClass(
-                        'o-app-icon-waiting');
                 }
             });
         },