From 61bb46c82ba8113dddc0a95bd86cb029fbbf110e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 10 Jan 2018 13:03:22 +0100
Subject: [PATCH] [FIX] website, *: auto-fold menu review

* portal

Review https://github.com/odoo/odoo/commit/392c91cda3133b921e9aca9a7b1c511231027438

- Some elements should not be folded in the "+" dropdown, like the login
  button and related stuff
- Using pull-right instead of navbar-right (https://github.com/odoo/odoo/blob/392c91cda3133b921e9aca9a7b1c511231027438/addons/portal/views/portal_templates.xml#L37)
  broke the mobile version of the menu
- Folded menu <li/> seemed too small (but it was only an illusion)
- On Chrome, the menu was sometimes not folded when it should have been.
  This was because of rounded width calculations.

For the first point, the code has been made so that everything that
follows a divider is considered unfoldable.
---
 addons/portal/static/src/less/portal.less    |  5 ++++
 addons/website/static/src/js/content/menu.js | 26 +++++++++++++-------
 addons/website/static/src/less/website.less  |  5 ----
 addons/website_sale/views/templates.xml      |  1 +
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/addons/portal/static/src/less/portal.less b/addons/portal/static/src/less/portal.less
index e05df190b91..e17b51b98ef 100644
--- a/addons/portal/static/src/less/portal.less
+++ b/addons/portal/static/src/less/portal.less
@@ -49,6 +49,11 @@ header {
             visibility: hidden;
         }
     }
+    .nav.navbar-nav.pull-right {
+        @media (max-width: @screen-xs-max) {
+            float: none!important;
+        }
+    }
 }
 ul.nav-stacked > li > a {
     padding: 2px 15px;
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 034a1e41b64..52e4e2c5319 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -87,8 +87,9 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
      * @override
      */
     start: function () {
-        this.$topMenu = this.$('#top_menu');
-        this.$items = this.$topMenu.children();
+        var $allItems = this.$('#top_menu').children();
+        this.$unfoldableItems = $allItems.filter('.divider, .divider ~ li');
+        this.$items = $allItems.not(this.$unfoldableItems);
 
         $(window).on('resize', _.debounce(this._adapt.bind(this), 500));
         this._adapt();
@@ -117,13 +118,14 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
         }
 
         this.maxWidth = this.$el.width();
-        this.maxWidth -= _.reduce(this.$el.children().not('.navbar-collapse'), function (sum, el) {
-            return sum + $(el).outerWidth(true);
+        var $unfoldable = this.$unfoldableItems.add(this.$el.children().not('.navbar-collapse'));
+        this.maxWidth -= _.reduce($unfoldable, function (sum, el) {
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         var nbItems = this.$items.length;
         var menuItemsWidth = _.reduce(this.$items, function (sum, el) {
-            return sum + $(el).outerWidth(true);
+            return sum + computeFloatOuterWidthWithMargins(el);
         }, 0);
 
         if (menuItemsWidth > this.maxWidth) {
@@ -131,24 +133,30 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
             this.$extraItemsToggle.append($('<a/>', {href: '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown'})
                 .append($('<i/>', {class: 'fa fa-plus'})));
             this.$extraItemsToggle.append($('<ul/>', {class: 'dropdown-menu'}));
-            this.$extraItemsToggle.appendTo(this.$topMenu);
+            this.$extraItemsToggle.insertAfter(this.$items.last());
 
-            menuItemsWidth += this.$extraItemsToggle.outerWidth(true);
+            menuItemsWidth += computeFloatOuterWidthWithMargins(this.$extraItemsToggle[0]);
             do {
-                menuItemsWidth -= this.$items.eq(--nbItems).outerWidth(true);
+                menuItemsWidth -= computeFloatOuterWidthWithMargins(this.$items.eq(--nbItems)[0]);
             } while (menuItemsWidth > this.maxWidth);
 
             var $extraItems = this.$items.slice(nbItems).detach();
             this.$extraItemsToggle.children('ul').append($extraItems);
             this.$extraItemsToggle.toggleClass('active', $extraItems.hasClass('active'));
         }
+
+        function computeFloatOuterWidthWithMargins(el) {
+            var rect = el.getBoundingClientRect();
+            var style = window.getComputedStyle(el);
+            return rect.right - rect.left + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        }
     },
     /**
      * @private
      */
     _restore: function () {
         if (this.$extraItemsToggle) {
-            this.$extraItemsToggle.find("> ul > *").appendTo(this.$topMenu);
+            this.$extraItemsToggle.find("> ul > *").insertBefore(this.$extraItemsToggle);
             this.$extraItemsToggle.remove();
             delete this.$extraItemsToggle;
         }
diff --git a/addons/website/static/src/less/website.less b/addons/website/static/src/less/website.less
index c6121d59135..4fdbb8db726 100644
--- a/addons/website/static/src/less/website.less
+++ b/addons/website/static/src/less/website.less
@@ -519,12 +519,7 @@ div.carousel {
 }
 
 .navbar .o_extra_menu_items.open > ul {
-    padding: 0;
-
     > li {
-        &.divider {
-            display: none;
-        }
         + li {
             border-top: 1px solid @gray-lighter;
         }
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index 08aa9c0f9e4..6ef3e822fa7 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -36,6 +36,7 @@
     <template id="header" inherit_id="website.layout" name="Header Shop My Cart Link">
         <xpath expr="//header//ul[@id='top_menu']/li" position="before">
             <t t-set="website_sale_order" t-value="website.sale_get_order()" />
+            <li class="divider hidden"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
             <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'hidden'">
                 <a href="/shop/cart">
                     <i class="fa fa-shopping-cart"></i>