[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

7 files changed, 35 insertions, 35 deletions

diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 5d4e2ad4cb5..a0bb82d569f 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -363,11 +363,11 @@ var FormRenderer = BasicRenderer.extend({
                 text: _t("More"),
             }));
 
-            var $ul = $("<ul>", {'class': "dropdown-menu o_dropdown_more", role: "menu"});
+            var $dropdown = $("<div>", {'class': "dropdown-menu o_dropdown_more", role: "menu"});
             _.each(folded_buttons, function ($button) {
-                $('<li>').appendTo($ul).append($button);
+                $button.addClass('dropdown-item').appendTo($dropdown);
             });
-            $ul.appendTo($result);
+            $dropdown.appendTo($result);
         }
 
         this._handleAttributes($result, node);
diff --git a/addons/web/static/src/js/views/graph/graph_controller.js b/addons/web/static/src/js/views/graph/graph_controller.js
index 36a05af7653..b6a1c121f0f 100644
--- a/addons/web/static/src/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/js/views/graph/graph_controller.js
@@ -161,8 +161,9 @@ var GraphController = AbstractController.extend(GroupByMenuInterfaceMixin,{
         this.$buttons
             .find('.o_graph_button[data-mode="' + state.mode + '"]')
             .addClass('active');
-        this.$measureList.find('li').each(function (index, li) {
-            $(li).toggleClass('selected', $(li).data('field') === state.measure);
+        _.each(this.$measureList.find('.dropdown-item'), function (item) {
+            var $item = $(item);
+            $item.toggleClass('selected', $item.data('field') === state.measure);
         });
     },
 
@@ -185,8 +186,7 @@ var GraphController = AbstractController.extend(GroupByMenuInterfaceMixin,{
         } else if ($target.parents('.o_graph_measures_list').length) {
             event.preventDefault();
             event.stopPropagation();
-            parent = $target.parent();
-            field = parent.data('field');
+            field = $target.data('field');
             this._setMeasure(field);
         }
     },
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) {
diff --git a/addons/web/static/src/js/views/search/favorites_menu.js b/addons/web/static/src/js/views/search/favorites_menu.js
index 1e62ffb5ce3..47e99aec573 100644
--- a/addons/web/static/src/js/views/search/favorites_menu.js
+++ b/addons/web/static/src/js/views/search/favorites_menu.js
@@ -14,14 +14,11 @@ var _t = core._t;
 return Widget.extend({
     template: 'SearchView.FavoriteMenu',
     events: {
-        'click li': function (event) {
-            event.stopImmediatePropagation();
+        'click .dropdown-item': function (ev) {
+            ev.preventDefault();
         },
-        'click li a': function (event) {
-            event.preventDefault();
-        },
-        'click .o_save_search a': function (event) {
-            event.preventDefault();
+        'click .o_save_search': function (ev) {
+            ev.preventDefault();
             this.toggle_save_menu();
         },
         'click .o_save_name button': 'save_favorite',
@@ -49,8 +46,8 @@ return Widget.extend({
         this.$save_search = this.$('.o_save_search');
         this.$save_name = this.$('.o_save_name');
         this.$inputs = this.$save_name.find('input');
-        this.$user_divider = this.$('.divider.user_filter');
-        this.$shared_divider = this.$('.divider.shared_filter');
+        this.$user_divider = this.$('.dropdown-divider.user_filter');
+        this.$shared_divider = this.$('.dropdown-divider.shared_filter');
         this.$inputs.eq(0).val(this.searchview.get_title());
         var $shared_filter = this.$inputs.eq(1),
             $default_filter = this.$inputs.eq(2);
@@ -207,7 +204,7 @@ return Widget.extend({
         };
     },
     clear_selection: function () {
-        this.$('li.selected').removeClass('selected');
+        this.$('.selected').removeClass('selected');
     },
     /**
      * Adds a filter description to the filters dict
@@ -230,10 +227,10 @@ return Widget.extend({
             this.$shared_divider.show();
         }
         if (!(key in this.$filters)) {
-            var $filter = $('<li>')
+            var $filter = $('<div>', {class: 'position-relative'})
                 .addClass(filter.user_id ? 'o-searchview-custom-private'
                                          : 'o-searchview-custom-public')
-                .append($('<a>', {'href': '#'}).text(filter.name))
+                .append($('<a>', {href: '#', class: 'dropdown-item'}).text(filter.name))
                 .append($('<span>', {
                     class: 'fa fa-trash-o o-remove-filter',
                     on: {
@@ -256,7 +253,7 @@ return Widget.extend({
         });
         if (current) {
             this.query.remove(current);
-            this.$filters[this.key_for(filter)].removeClass('selected');
+            this.$filters[this.key_for(filter)].find('.dropdown-item').removeClass('selected');
             return;
         }
         this.query.reset([this.facet_for(filter)], {
@@ -268,7 +265,7 @@ return Widget.extend({
             this.searchview.dataset.set_sort(sort_items);
         }
 
-        this.$filters[this.key_for(filter)].addClass('selected');
+        this.$filters[this.key_for(filter)].find('.dropdown-item').addClass('selected');
     },
     remove_filter: function (filter, $filter, key) {
         var self = this;
diff --git a/addons/web/static/src/js/views/search/filters_menu.js b/addons/web/static/src/js/views/search/filters_menu.js
index 221f98faa97..cf79bec2640 100644
--- a/addons/web/static/src/js/views/search/filters_menu.js
+++ b/addons/web/static/src/js/views/search/filters_menu.js
@@ -76,7 +76,7 @@ var FiltersMenu = DropdownMenu.extend({
             category: 'filterCategory',
             title: 'Filters',
             icon: 'fa fa-filter',
-            symbol: this.isMobile ? 'fa fa-chevron-right pull-right mt4' : 'caret'
+            symbol: this.isMobile ? 'fa fa-chevron-right pull-right mt4' : false,
         };
         this._super(parent, dropdownHeader, filters, this.fields);
     },
@@ -88,7 +88,7 @@ var FiltersMenu = DropdownMenu.extend({
      * @private
      */
     start: function () {
-        this.$menu = this.$('ul.o_dropdown_menu');
+        this.$menu = this.$('.o_dropdown_menu');
         this.$menu.addClass('o_filters_menu');
         var generatorMenu = QWeb.render('FiltersMenuGenerator', {widget: this});
         this.$menu.append(generatorMenu);
diff --git a/addons/web/static/src/js/views/search/groupby_menu.js b/addons/web/static/src/js/views/search/groupby_menu.js
index 7be61ae6606..8540e702589 100644
--- a/addons/web/static/src/js/views/search/groupby_menu.js
+++ b/addons/web/static/src/js/views/search/groupby_menu.js
@@ -14,7 +14,7 @@ var DEFAULT_INTERVAL = 'month';
 var GroupByMenu = DropdownMenu.extend({
     events: _.extend({}, DropdownMenu.prototype.events,
     {
-        'click .o_add_custom_group a': '_onAddCustomGroupClick',
+        'click .o_add_custom_group': '_onAddCustomGroupClick',
         'click button.o_apply_group': '_onButtonApplyClick',
         'click .o_group_selector': '_onGroupSelectorClick',
     }),
@@ -85,7 +85,7 @@ var GroupByMenu = DropdownMenu.extend({
             category: 'groupByCategory',
             title: 'Group By',
             icon: 'fa fa-bars',
-            symbol: this.isMobile ? 'fa fa-chevron-right pull-right mt4' : 'caret',
+            symbol: this.isMobile ? 'fa fa-chevron-right pull-right mt4' : false,
             style: style,
         };
         this._super(parent, dropdownHeader, groupbys, options);
@@ -98,7 +98,7 @@ var GroupByMenu = DropdownMenu.extend({
      * @private
      */
     start: function () {
-        this.$menu = this.$('ul.o_dropdown_menu');
+        this.$menu = this.$('.o_dropdown_menu');
         this.$menu.addClass('o_group_by_menu');
         var $generatorMenu = QWeb.render('GroupbyMenuGenerator', {widget: this});
         this.$menu.append($generatorMenu);
diff --git a/addons/web/static/src/js/views/search/search_inputs.js b/addons/web/static/src/js/views/search/search_inputs.js
index ee179d7da74..81f53ee4053 100644
--- a/addons/web/static/src/js/views/search/search_inputs.js
+++ b/addons/web/static/src/js/views/search/search_inputs.js
@@ -503,8 +503,13 @@ var ManyToOneField = CharField.extend({
 
 var FilterGroup = Input.extend(/** @lends instance.web.search.FilterGroup# */{
     template: 'SearchView.filters',
+    events: {
+        click: 'toggle_filter',
+    },
+
     icon: "fa-filter",
     completion_label: _lt("Filter on: %s"),
+
     /**
      * Inclusive group of filters, creates a continuous "button" with clickable
      * sections (the normal display for filters is to be a self-contained button)
@@ -536,7 +541,6 @@ var FilterGroup = Input.extend(/** @lends instance.web.search.FilterGroup# */{
         this.searchview.query.on('add remove change reset', this.proxy('search_change'));
     },
     start: function () {
-        this.$el.on('click', 'a', this.proxy('toggle_filter'));
         return $.when(null);
     },
     /**
@@ -684,7 +688,7 @@ var FilterGroup = Input.extend(/** @lends instance.web.search.FilterGroup# */{
     toggle_filter: function (e) {
         e.preventDefault();
         e.stopPropagation();
-        this.toggle(this.filters[Number($(e.target).parent().data('index'))]);
+        this.toggle(this.filters[Number($(e.currentTarget).data('index'))]);
     },
     toggle: function (filter, options) {
         this.searchview.query.toggle(this.make_facet([this.make_value(filter)]), options);