[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

11 files changed, 63 insertions, 71 deletions

diff --git a/addons/mail/static/src/js/activity.js b/addons/mail/static/src/js/activity.js
index 3a63b1fbd60..c8a3b8dddde 100644
--- a/addons/mail/static/src/js/activity.js
+++ b/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
diff --git a/addons/mail/static/src/js/composers/mention_manager.js b/addons/mail/static/src/js/composers/mention_manager.js
index fb8d9ddc065..62608fbf511 100644
--- a/addons/mail/static/src/js/composers/mention_manager.js
+++ b/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;
         }
diff --git a/addons/mail/static/src/js/followers.js b/addons/mail/static/src/js/followers.js
index a28f72edb1c..42d5519ff40 100644
--- a/addons/mail/static/src/js/followers.js
+++ b/addons/mail/static/src/js/followers.js
@@ -135,9 +135,9 @@ 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();
 
@@ -145,7 +145,7 @@ var Followers = AbstractField.extend({
 
         _.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');
         }
     },
 });
diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss
index 21fc4ebd7ad..39de4fc9c51 100644
--- a/addons/mail/static/src/scss/abstract_thread_window.scss
+++ b/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;
     }
 
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 884ca88134e..1eb2de031d5 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/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;
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 5995cab52e2..2c07068d9a9 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/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;
     }
 
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 4d774b2824a..d52add73ec4 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/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;
     }
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 9a373dad533..8ecf3f8a7c6 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -47,17 +47,15 @@
         @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>
@@ -65,18 +63,18 @@
         </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>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index a19831308a6..bbf51ca5c68 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -12,7 +12,7 @@
                     <i class="fa fa-user" role="img" aria-label="Dropdown menu - Followers"></i>
                     <span class="o_followers_count"/>
                 </button>
-                <ul class="dropdown-menu o_followers_list" role="menu"></ul>
+                <div class="dropdown-menu o_followers_list" role="menu"/>
             </div>
             <div class="o_followers_actions">
                 <div class="btn-group o_subtypes_list">
@@ -25,7 +25,7 @@
                     </button><button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                         <span class="fa fa-bell" role="img" aria-label="Alarm menu" title="Alarm menu"/>
                     </button>
-                    <ul class="dropdown-menu" role="menu"/>
+                    <div class="dropdown-menu" role="menu"/>
                 </div>
             </div>
         </div>
@@ -59,13 +59,9 @@
     -->
     <t t-name="mail.Followers.add_more">
         <t t-if="widget.isEditable">
-            <li role="menuitem" class="o_add_follower">
-                <a href="#"> Add Followers </a>
-            </li>
-            <li role="menuitem" class="o_add_follower_channel">
-                <a href="#"> Add Channels </a>
-            </li>
-            <li role="separator" t-if="widget.followers.length > 0" class="divider"/>
+            <a href="#" role="menuitem" class="dropdown-item o_add_follower">Add Followers</a>
+            <a href="#" role="menuitem" class="dropdown-item o_add_follower_channel">Add Channels</a>
+            <div role="separator" t-if="widget.followers.length > 0" class="dropdown-divider"/>
         </t>
     </t>
 
@@ -73,7 +69,7 @@
         Message subtypes of a follower subscription
     -->
     <t t-name="mail.Followers.subtype">
-        <li role="menuitem" class="o_subtype">
+        <div role="menuitem" class="o_subtype dropdown-item">
             <div class="o_checkbox">
                 <input type="checkbox" t-att-checked="record.followed"
                        t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
@@ -84,7 +80,7 @@
                 <t t-esc="record.name"/>
             </span>
             <i t-if="display_warning" class="fa fa-warning text-warning" role="img" aria-label="Warning" title="Warning"/>
-        </li>
+        </div>
     </t>
     <t t-name="mail.Followers.subtypes.warning">
         <span class="text-warning">
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 1f0cf850f8c..16fe5c9ef10 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -6,25 +6,25 @@
     -->
     <t t-name="mail.systray.MessagingMenu">
         <li class="o_mail_systray_item">
-            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
+            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
                 <i class="fa fa-comments" role="img" aria-label="Messages"/> <span class="o_notification_counter badge"/>
             </a>
-            <ul class="o_mail_systray_dropdown dropdown-menu" role="menu">
-                <li role="menuitem" t-if="widget.isMobile()">
+            <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
+                <t t-if="widget.isMobile()">
                     <div class="o_mail_systray_mobile_header">
                         <button type="button" class="btn btn-secondary o_new_message"> New message </button>
                     </div>
-                </li>
-                <li role="menuitem" t-if="!widget.isMobile()" class="o_mail_systray_dropdown_top">
+                </t>
+                <div t-if="!widget.isMobile()" class="o_mail_systray_dropdown_top">
                     <div>
                         <button type="button" class="btn btn-link o_filter_button active"> All </button>
                         <button type="button" class="btn btn-link o_filter_button" data-filter='chat'> Chat </button>
                         <button type="button" class="btn btn-link o_filter_button" data-filter='channels'> Channels </button>
                     </div>
                     <button type="button" class="btn btn-link o_new_message"> New message </button>
-                </li>
-                <li role="menuitem" class="o_mail_systray_dropdown_items"/>
-                <li role="menuitem" t-if="widget.isMobile()">
+                </div>
+                <div class="o_mail_systray_dropdown_items"/>
+                <t t-if="widget.isMobile()">
                     <div class="o_mail_mobile_tabs">
                         <div class="o_mail_mobile_tab o_filter_button active">
                             <span class="fa fa-envelope"/>
@@ -39,8 +39,8 @@
                             <span class="o_tab_title">Channels</span>
                         </div>
                     </div>
-                </li>
-            </ul>
+                </t>
+            </div>
         </li>
     </t>
 
@@ -64,9 +64,9 @@
     -->
     <t t-name="mail.systray.ActivityMenu.Previews">
         <t t-if="_.isEmpty(activities)">
-            <li class="text-center o_no_activity">
+            <div class="dropdown-item-text text-center o_no_activity">
                 <span>No activities planned.</span>
-            </li>
+            </div>
         </t>
         <t t-foreach="activities" t-as="activity">
             <div class="o_mail_preview" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='my'>
@@ -94,12 +94,12 @@
 
     <t t-name="mail.systray.ActivityMenu">
         <li class="o_mail_systray_item">
-            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
+            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
                 <i class="fa fa-clock-o" role="img" aria-label="Activities"/> <span class="o_notification_counter badge"/>
             </a>
-            <ul class="o_mail_systray_dropdown dropdown-menu" role="menu">
-                <li role="menuitem" class="o_mail_systray_dropdown_items"/>
-            </ul>
+            <div class="o_mail_systray_dropdown dropdown-menu dropdown-menu-right" role="menu">
+                <div class="o_mail_systray_dropdown_items"/>
+            </div>
         </li>
     </t>
 </templates>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index c3148f13e95..65ece45d865 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -3,25 +3,24 @@
 
 <t t-name="mail.KanbanActivity">
     <div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
-        <a class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
+        <a class="dropdown-toggle o-no-caret o_activity_btn" data-toggle="dropdown">
             <span class="fa fa-clock-o fa-lg fa-fw" t-att-title="widget.selection[widget.activityState]" role="img" t-att-aria-label="widget.selection[widget.activity_state]"/>
         </a>
-        <ul class="dropdown-menu o_activity" role="menu">
-        </ul>
+        <div class="dropdown-menu o_activity" role="menu"/>
     </div>
 </t>
 
 <t t-name="mail.KanbanActivityLoading">
-    <li class="text-center o_no_activity">
+    <div class="dropdown-item text-center o_no_activity">
         <span class="fa fa-spinner fa-spin fa-2x" role="img" aria-label="Loading..." title="Loading..."/>
-    </li>
+    </div>
 </t>
 
 <t t-name="mail.KanbanActivityDropdown">
-    <li role="menuitem" t-if="_.isEmpty(records)" class="text-center o_no_activity">
-        <span>No activities planned.</span>
-    </li>
-    <li t-if="!_.isEmpty(records)" aria-haspopup="true" role="menu">
+    <span role="menuitem" t-if="_.isEmpty(records)" class="dropdown-item-text text-center o_no_activity">
+        No activities planned.
+    </span>
+    <div t-else="" class="dropdown-item" aria-haspopup="true" role="menu">
         <ul class="nav o_activity_log" role="menu">
             <t t-foreach="_.keys(records)" t-as="key">
                 <t t-set="logs" t-value="records[key]" />
@@ -51,12 +50,12 @@
                 </li>
             </t>
         </ul>
-    </li>
-    <li role="menuitem" class="o_schedule_activity text-center">
+    </div>
+    <div role="menuitem" class="o_schedule_activity text-center">
         <a role="button" class="btn btn-link btn-block">
             <i class="fa fa-plus fa-fw"></i><strong>Schedule an activity</strong>
         </a>
-    </li>
+    </div>
 </t>
 
 </templates>