[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

addons/account/static/src/xml/account_reconciliation.xml

@@ -164,10 +164,10 @@
         </div>
         <div class="dropdown pull-right">
             <a data-toggle="dropdown" href="#"><span class="fa fa-cog" role="img" aria-label="Settings"/></a>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-label="Presets config">
-                <li><a role="menuitem" class="reconcile_model_create" href="#">Create model</a></li>
-                <li><a role="menuitem" class="reconcile_model_edit" href="#">Modify models</a></li>
-            </ul>
+            <div class="dropdown-menu dropdown-menu-right" role="menu" aria-label="Presets config">
+                <a role="menuitem" class="dropdown-item reconcile_model_create" href="#">Create model</a>
+                <a role="menuitem" class="dropdown-item reconcile_model_edit" href="#">Modify models</a>
+            </div>
         </div>
     </div>
     <table class="pull-left">
@@ -218,8 +218,8 @@
         <td class="cell_label">
             <t t-if="line.partner_id &amp;&amp; line.partner_id !== state.st_line.partner_id">
                 <t t-if="line.partner_name.length">
-                    <t t-esc="line.partner_name"/>: 
-                </t>   
+                    <t t-esc="line.partner_name"/>:
+                </t>
             </t>
             <t t-esc="line.label || line.name"/>
             <t t-if="line.ref &amp;&amp; line.ref.length"> : </t>

addons/board/static/src/scss/dashboard.scss

@@ -148,5 +148,5 @@
 // Favorites menu in control panel
 .o_add_to_dashboard {
     display: none; // hidden by default
-    @include o-search-options-dropdown-custom-li;
+    @include o-search-options-dropdown-custom-item;
 }

addons/board/static/src/xml/board.xml

@@ -75,14 +75,12 @@
 </t>
 
 <t t-name="SearchView.addtodashboard">
-    <li class="o_add_to_dashboard_link o_closed_menu">
-        <a href="#">Add to my Dashboard</a>
-    </li>
-    <li class="o_add_to_dashboard">
-        <input class="o_add_to_dashboard_input" type="text"/>
-    </li>
-    <li class="o_add_to_dashboard">
+    <a href="#" class="dropdown-item o_add_to_dashboard_link o_closed_menu">Add to my Dashboard</a>
+    <div class="dropdown-item-text o_add_to_dashboard">
+        <input class="o_input o_add_to_dashboard_input" type="text"/>
+    </div>
+    <div class="dropdown-item-text o_add_to_dashboard">
         <button type="button" class="btn btn-primary o_add_to_dashboard_button">Add</button>
-    </li>
+    </div>
 </t>
 </template>

addons/crm/views/crm_lead_views.xml

@@ -324,16 +324,16 @@
                             <div t-attf-class="#{kanban_color(record.color.raw_value)} oe_kanban_global_click">
                                 <div class="o_dropdown_kanban dropdown">
 
-                                    <a class="dropdown-toggle btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v"/>
                                     </a>
-                                    <ul class="dropdown-menu" role="menu">
-                                        <t t-if="widget.editable"><li><a role="menuitem" type="edit">Edit</a></li></t>
-                                        <t t-if="widget.deletable"><li><a role="menuitem" type="delete">Delete</a></li></t>
-                                        <li t-if="! record.active.value"><a role="menuitem" name="action_set_active" type="object">Restore</a></li>
-                                        <li t-if="record.active.value"><a role="menuitem" name="action_set_unactive" type="object">Archive</a></li>
-                                        <li role="menuitem" aria-haspopup="true"><ul class="oe_kanban_colorpicker" data-field="color" role="menu"/></li>
-                                    </ul>
+                                    <div class="dropdown-menu" role="menu">
+                                        <t t-if="widget.editable"><a role="menuitem" type="edit" class="dropdown-item">Edit</a></t>
+                                        <t t-if="widget.deletable"><a role="menuitem" type="delete" class="dropdown-item">Delete</a></t>
+                                        <a t-if="! record.active.value"  role="menuitem" name="action_set_active" type="object" class="dropdown-item">Restore</a>
+                                        <a t-if="record.active.value" role="menuitem" name="action_set_unactive" type="object" class="dropdown-item">Archive</a>
+                                        <ul class="oe_kanban_colorpicker" data-field="color"/>
+                                    </div>
                                 </div>
                                 <div class="oe_kanban_content">
                                     <div>

addons/event/views/event_views.xml

@@ -238,7 +238,7 @@
                                 <div>
                                     <field name="seats_availability" widget='radio'/>
                                     <span  attrs="{'invisible': [('seats_availability', '=', 'unlimited')]}" class="oe_read_only">
-                                        to 
+                                        to
                                     </span>
                                     <field name="seats_max" attrs="{'invisible': [('seats_availability', '=', 'unlimited')], 'required': [('seats_availability', '=', 'limited')]}"/>
                                 </div>
@@ -305,15 +305,15 @@
                             <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click">
                                 <div class="o_dropdown_kanban dropdown">
 
-                                    <a class="dropdown-toggle btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                    <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                         <span class="fa fa-ellipsis-v"/>
                                     </a>
-                                    <ul class="dropdown-menu" role="menu">
+                                    <div class="dropdown-menu" role="menu">
                                         <t t-if="widget.deletable">
-                                            <li><a role="menuitem" type="delete">Delete</a></li>
+                                            <a role="menuitem" type="delete" class="dropdown-item">Delete</a>
                                         </t>
-                                        <li role="menuitem" aria-haspopup="true"><ul class="oe_kanban_colorpicker" data-field="color" role="menu"/></li>
-                                    </ul>
+                                        <ul class="oe_kanban_colorpicker" data-field="color" role="menu"/>
+                                    </div>
                                 </div>
                                 <div class="o_event_left">
                                     <div class="o_day"><t t-esc="record.date_begin.raw_value.getDate()"/></div>

addons/google_drive/static/tests/gdrive_test.js

@@ -94,16 +94,16 @@ QUnit.module('gdrive_integration', {
                     return $.when();
                 }
                 return this._super.apply(this, arguments);
-            }
+            },
         });
 
-        var google_action = form.sidebar.$('.oe_share_gdoc');
+        var $googleAction = form.sidebar.$('.oe_share_gdoc');
 
-        assert.strictEqual(google_action.length, 1,
+        assert.strictEqual($googleAction.length, 1,
             'The button to the google action should be present');
 
         // Trigger opening of the dynamic link
-        google_action.find('a:first').click();
+        $googleAction.click();
 
         form.destroy();
     });

addons/hr_contract/views/hr_contract_views.xml

@@ -175,13 +175,13 @@
                     <t t-name="kanban-box">
                         <div class="oe_kanban_card oe_kanban_global_click">
                             <div class="o_dropdown_kanban dropdown" groups="base.group_user">
-                                <a class="dropdown-toggle btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
-                                <ul class="dropdown-menu" role="menu">
-                                    <t t-if="widget.editable"><li><a role="menuitem" type="edit">Edit Contract</a></li></t>
-                                    <t t-if="widget.deletable"><li><a role="menuitem" type="delete">Delete</a></li></t>
-                                </ul>
+                                <div class="dropdown-menu" role="menu">
+                                    <t t-if="widget.editable"><a role="menuitem" type="edit" class="dropdown-item">Edit Contract</a></t>
+                                    <t t-if="widget.deletable"><a role="menuitem" type="delete" class="dropdown-item">Delete</a></t>
+                                </div>
                             </div>
                             <div class="oe_kanban_content">
                                 <div>

addons/hr_recruitment/views/hr_recruitment_views.xml

@@ -290,14 +290,14 @@
                         <div t-attf-class="oe_kanban_color_#{kanban_getcolor(record.color.raw_value)} oe_kanban_card oe_kanban_global_click oe_applicant_kanban oe_semantic_html_override">
                             <div class="o_dropdown_kanban dropdown">
 
-                                <a class="dropdown-toggle btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
+                                <a class="dropdown-toggle o-no-caret btn" role="button" data-toggle="dropdown" href="#" aria-label="Dropdown menu" title="Dropdown menu">
                                     <span class="fa fa-ellipsis-v"/>
                                 </a>
-                                <ul class="dropdown-menu" role="menu">
-                                    <t t-if="widget.deletable"><li><a role="menuitem" type="delete">Delete</a></li></t>
-                                    <li><a role="menuitem" name="action_makeMeeting" type="object">Schedule Interview</a></li>
-                                    <li role="menuitem" aira-haspopup="true"><ul role="menu" class="oe_kanban_colorpicker" data-field="color"/></li>
-                                </ul>
+                                <div class="dropdown-menu" role="menu">
+                                    <t t-if="widget.deletable"><a role="menuitem" type="delete" class="dropdown-item">Delete</a></t>
+                                    <a role="menuitem" name="action_makeMeeting" type="object" class="dropdown-item">Schedule Interview</a>
+                                    <ul class="oe_kanban_colorpicker" data-field="color"/>
+                                </div>
                             </div>
                             <div class="oe_kanban_content">
                                 <div class="o_kanban_record_top">
@@ -340,7 +340,7 @@
                                         </div>
                                         <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="30" height="30" class="oe_kanban_avatar"/>
                                     </div>
-                                    
+
                                 </div>
                             </div>
                             <div class="oe_clear"></div>
@@ -971,7 +971,7 @@
             (0, 0, {'view_mode': 'graph', 'view_id': ref('hr_applicant_view_graph')})]"/>
         <field name="context">{}</field>  <!-- force empty -->
     </record>
-    <menuitem name="Reports" id="report_hr_recruitment" parent="menu_hr_recruitment_root" 
+    <menuitem name="Reports" id="report_hr_recruitment" parent="menu_hr_recruitment_root"
     sequence="99" action="hr_applicant_action_analysis"/>
     <record id="action_hr_recruitment_report_filtered_department" model="ir.actions.act_window">
         <field name="name">Recruitment Analysis</field>

addons/im_support/static/src/xml/systray.xml

@@ -3,10 +3,10 @@
 
     <t t-extend="mail.systray.MessagingMenu">
         <t t-jquery=".o_mail_systray_dropdown" t-operation="append">
-            <li t-if="widget.supportChannel" class="o_mail_systray_dropdown_bottom">
+            <div t-if="widget.supportChannel" class="o_mail_systray_dropdown_bottom">
                 <t t-set="preview" t-value="widget.supportChannel"/>
                 <t t-call="mail.Preview"/>
-            </li>
+            </div>
         </t>
     </t>
 

addons/mail/static/src/js/activity.js

@@ -371,7 +371,7 @@ var Activity = AbstractActivityField.extend({
 var KanbanActivity = AbstractActivityField.extend({
     template: 'mail.KanbanActivity',
     events: {
-        'click .o_activity_btn': '_onButtonClicked',
+        'show.bs.dropdown': '_onDropdownShow',
         'click .o_schedule_activity': '_onScheduleActivity',
         'click .o_mark_as_done': '_onMarkActivityDone',
     },
@@ -411,7 +411,7 @@ var KanbanActivity = AbstractActivityField.extend({
             }).join(' ');
         });
         $span.addClass('o_activity_color_' + (this.activityState || 'default'));
-        if (this.$el.hasClass('open')) {
+        if (this.$el.hasClass('show')) {
             // note: this part of the rendering might be asynchronous
             this._renderDropdown();
         }
@@ -455,13 +455,9 @@ var KanbanActivity = AbstractActivityField.extend({
 
     /**
      * @private
-     * @param {MouseEvent} ev
      */
-    _onButtonClicked: function (ev) {
-        ev.preventDefault();
-        if (!this.$el.hasClass('open')) {
-            this._renderDropdown();
-        }
+    _onDropdownShow: function () {
+        this._renderDropdown();
     },
     /**
      * @private

addons/mail/static/src/js/composers/mention_manager.js

@@ -319,15 +319,18 @@ var MentionManager = Widget.extend({
                 suggestions: suggestions,
             }));
             this.$el
-                .addClass('open')
-                .find('ul')
+                .addClass('show')
+                .find('.dropdown-menu')
+                .addClass('show')
                 .css('max-width', this._composer.$input.width())
                 .find('.o_mention_proposition')
                 .first()
                 .addClass('active');
             this._open = true;
         } else {
-            this.$el.removeClass('open');
+            this.$el.removeClass('show')
+                .find('.dropdown-menu')
+                .removeClass('show');
             this.$el.empty();
             this._open = false;
         }

addons/mail/static/src/js/followers.js

@@ -135,17 +135,17 @@ var Followers = AbstractField.extend({
         var old_parent_model;
         var $list;
         if (dialog) {
-            $list = $('<ul>').appendTo(this.dialog.$el);
+            $list = $('<div>').appendTo(this.dialog.$el);
         } else {
-            $list = this.$('.o_subtypes_list ul');
+            $list = this.$('.o_subtypes_list .dropdown-menu');
         }
         $list.empty();
 
         this.data_subtype = data;
 
         _.each(data, function (record) {
             if (old_parent_model !== record.parent_model && old_parent_model !== undefined) {
-                $list.append($('<li>').addClass('divider'));
+                $list.append($('<div>', {class: 'dropdown-divider'}));
             }
             old_parent_model = record.parent_model;
             record.followed = record.followed || undefined;
@@ -408,11 +408,11 @@ var Followers = AbstractField.extend({
         ev.stopPropagation();
         this._updateSubscription(ev);
         var $list = this.$('.o_subtypes_list');
-        if (!$list.hasClass('open')) {
-            $list.addClass('open');
+        if (!$list.hasClass('show')) {
+            $list.addClass('show');
         }
-        if (this.$('.o_subtypes_list ul')[0].children.length < 1) {
-            $list.removeClass('open');
+        if (this.$('.o_subtypes_list .dropdown-menu')[0].children.length < 1) {
+            $list.removeClass('show');
         }
     },
 });

addons/mail/static/src/scss/abstract_thread_window.scss

@@ -119,7 +119,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default;
             font-size: smaller;
         }
     }
-    &.open .o_thread_window_dropdown_toggler .o_total_unread_counter, .o_thread_window_expand {
+    &.show .o_thread_window_dropdown_toggler .o_total_unread_counter, .o_thread_window_expand {
         display: none;
     }
 

addons/mail/static/src/scss/composer.scss

@@ -45,7 +45,7 @@
             width: 100%;
             resize: none;
         }
-        .o_composer_mention_dropdown .o_mention_proposition > a {
+        .o_composer_mention_dropdown .o_mention_proposition {
             @include o-text-overflow;
             width: 100%;
             padding: 3px 15px;

addons/mail/static/src/scss/discuss.scss

@@ -401,7 +401,7 @@
 
 @include media-breakpoint-down(sm) {
 
-    .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
+    .o_main_navbar > ul.o_menu_systray > li .dropdown-menu.show {
         border: none;
     }
 

addons/mail/static/src/scss/systray.scss

@@ -15,7 +15,7 @@
             display: none;
         }
     }
-    &.open .o_mail_systray_dropdown {
+    &.show .o_mail_systray_dropdown {
         display: flex;
         flex-flow: column nowrap;
     }

addons/mail/static/src/xml/composer.xml

@@ -47,36 +47,34 @@
         @param {boolean} [suggestions.divider=false]
     -->
     <t t-name="mail.MentionSuggestions">
-        <ul class="dropdown-menu" role="menu">
+        <div class="dropdown-menu" role="menu">
             <t t-foreach="suggestions" t-as="suggestion">
-                <li role="separator" t-if="suggestion.divider" class="divider"/>
-                <li t-if="!suggestion.divider" class="o_mention_proposition" t-att-data-id="suggestion.id">
-                    <a role="menuitem" href="#"/>
-                </li>
+                <div role="separator" t-if="suggestion.divider" class="dropdown-divider"/>
+                <a t-else="" href="#" class="dropdown-item o_mention_proposition" t-att-data-id="suggestion.id" role="menuitem"/>
             </t>
-        </ul>
+        </div>
     </t>
     <t t-name="mail.MentionSuggestions.Partner" t-extend="mail.MentionSuggestions">
-        <t t-jquery=".o_mention_proposition a" t-operation="append">
+        <t t-jquery=".o_mention_proposition" t-operation="append">
             <span class="o_mention_name"><t t-esc="suggestion.name"/></span>
             <t t-if="suggestion.email">
                 <span class="o_mention_info">(<t t-esc="suggestion.email"/>)</span>
             </t>
         </t>
     </t>
     <t t-name="mail.MentionSuggestions.Channel" t-extend="mail.MentionSuggestions">
-        <t t-jquery=".o_mention_proposition a" t-operation="append">
+        <t t-jquery=".o_mention_proposition" t-operation="append">
             <span class="o_mention_name"><t t-esc="suggestion.name"/></span>
         </t>
     </t>
     <t t-name="mail.MentionSuggestions.CannedResponse" t-extend="mail.MentionSuggestions">
-        <t t-jquery=".o_mention_proposition a" t-operation="append">
+        <t t-jquery=".o_mention_proposition" t-operation="append">
             <span class="o_mention_name"><t t-esc="suggestion.source"/></span>
             <span class="o_mention_info"><t t-esc="suggestion.substitution"/></span>
         </t>
     </t>
     <t t-name="mail.MentionSuggestions.Command" t-extend="mail.MentionSuggestions">
-        <t t-jquery=".o_mention_proposition a" t-operation="append">
+        <t t-jquery=".o_mention_proposition" t-operation="append">
             <span class="o_mention_name">/<t t-esc="suggestion.name"/></span>
             <span class="o_mention_info"><t t-esc="suggestion.help"/></span>
         </t>