[REF] *: BS4, adapt dropdowns and carets

- The dropdown structure was simplified, allowing to get rid of the
  3-levels structure induced by <ul/> elements and dropdowns can now
  contain anything. The class 'dropdown-item' is now mandatory for
  each dropdown clickable element. The class 'dropdown-item-text' can
  be used to add same padding and style but without making the element
  have a clickable look.

- Dividers now use the class 'dropdown-divider'

- The way dropdowns are opened and hidden also changed (before the
  'open' class was added on the `.dropdown-menu` parent, now the
  'show' class is added on both the `.dropdown-menu` parent and the
  `.dropdown-menu` itself).

- JS-wise, no click event handlers can be put on `.dropdown-toggle`
  elements anymore (instead, use handlers for dropdown events).

- Carets are automatically put on `.dropdown-toggle` elements, so this
  commit replaces the `.caret` elements with this. This feature was
  possible to disable but would prevent us from adding a caret with
  scss. Also, this simplifies the DOM. The 'o-no-caret' class was also
  introduced to allow using the 'dropdown-toggle' class on non-caret
  elements.

- Also adapt the scss to use $caret-width instead of $caret-width-base

1 files changed, 6 insertions, 7 deletions

diff --git a/addons/web/static/src/js/views/pivot/pivot_controller.js b/addons/web/static/src/js/views/pivot/pivot_controller.js
index f0976c9a8b4..945cc132b03 100644
--- a/addons/web/static/src/js/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/js/views/pivot/pivot_controller.js
@@ -164,9 +164,9 @@ var PivotController = AbstractController.extend({
             fields: fields
         }));
 
-        this.$fieldSelection.find('ul').first()
+        this.$fieldSelection.find('.dropdown-menu').first()
             .css({top: top, left: left})
-            .show();
+            .addClass('show');
     },
     /**
      * @private
@@ -186,7 +186,7 @@ var PivotController = AbstractController.extend({
         var state = this.model.get({raw: true});
         _.each(this.measures, function (measure, name) {
             var isSelected = _.contains(state.measures, name);
-            self.$buttons.find('li[data-field="' + name + '"]')
+            self.$buttons.find('.dropdown-item[data-field="' + name + '"]')
                          .toggleClass('selected', isSelected);
         });
     },
@@ -215,8 +215,7 @@ var PivotController = AbstractController.extend({
                     .then(this.update.bind(this, {}, {reload: false}));
         }
         if ($target.parents('.o_pivot_measures_list').length) {
-            var parent = $target.parent();
-            var field = parent.data('field');
+            var field = $target.data('field');
             event.preventDefault();
             event.stopPropagation();
             this.model
@@ -298,11 +297,11 @@ var PivotController = AbstractController.extend({
     _onFieldMenuSelection: function (event) {
         event.preventDefault();
         var $target = $(event.target);
-        if ($target.parent().hasClass('disabled')) {
+        if ($target.hasClass('disabled')) {
             event.stopPropagation();
             return;
         }
-        var field = $target.parent().data('field');
+        var field = $target.data('field');
         var interval = $target.data('interval');
         var header = this.model.getHeader(this.lastHeaderSelected);
         if (interval) {