From bd9f4b2ce2762cc7bede366d6f954bf7a8d58d20 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 21 May 2021 13:26:43 +0200
Subject: [PATCH] fixup! [REF] web, website: refine and simplify dropdown
 design

---
 addons/google_drive/static/src/xml/gdrive.xml |  2 +-
 .../static/src/core/dropdown/dropdown.scss    |  8 +--
 .../static/src/legacy/scss/search_view.scss   | 58 -------------------
 addons/web/static/src/legacy/xml/base.xml     | 13 +++--
 4 files changed, 10 insertions(+), 71 deletions(-)

diff --git a/addons/google_drive/static/src/xml/gdrive.xml b/addons/google_drive/static/src/xml/gdrive.xml
index d12b345951662..db1e3a11c8a11 100644
--- a/addons/google_drive/static/src/xml/gdrive.xml
+++ b/addons/google_drive/static/src/xml/gdrive.xml
@@ -1,7 +1,7 @@
 <templates>
     <t t-name="GoogleDriveMenu" owl="1">
         <li>
-            <ul class="o_embed_menu">
+            <ul class="o_embed_menu p-0">
                 <li t-foreach="props.items" t-as="gdriveItem" t-key="gdriveItem.id"
                     role="menuitem"
                     class="o_menu_item oe_share_gdoc_item dropdown-item"
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index d216e1737a59d..22875554bc5ed 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -13,8 +13,8 @@
     @extend .font-weight-bold;
 
     &:before {
-      @include o-position-absolute(0, $left: $dropdown-item-padding-x * .25);
-      transform: translateY(90%);
+      @include o-position-absolute(0);
+      transform: translate(-1.5em, 90%);
       font: .7em/1em FontAwesome;
       color: $primary;
       content: "\f00c";
@@ -95,10 +95,6 @@ button.o_dropdown_toggler, button.o_dropdown_toggler_btn {
     min-width: max-content;
   }
 
-  .fa + .o_dropdown_title, .o_dropdown_title + .fa {
-    margin-left: .4em;
-  }
-
   &%--state-active {
     outline: none;
     background-color: $dropdown-link-hover-bg;
diff --git a/addons/web/static/src/legacy/scss/search_view.scss b/addons/web/static/src/legacy/scss/search_view.scss
index 597142488adc0..e58e21d132615 100644
--- a/addons/web/static/src/legacy/scss/search_view.scss
+++ b/addons/web/static/src/legacy/scss/search_view.scss
@@ -80,64 +80,6 @@
     }
 }
 
-// Dropdowns
-.o_search_options .o_dropdown {
-    .o_dropdown_caret {
-        font-size: 12px;
-        width: 1rem;
-    }
-
-    .o_dropdown_menu {
-
-        ul.o_embed_menu {
-            padding: 0;
-        }
-
-        a.dropdown-item {
-            align-items: center;
-            display: flex;
-
-            .o_item_description {
-                flex: 1;
-            }
-
-            .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-            }
-
-            .o_icon_right + .o_icon_right {
-                @include o-position-absolute($right: $dropdown-item-padding-x * 1.25);
-            }
-        }
-
-        .o_menu_item_options {
-            list-style: none;
-            margin-bottom: 1rem;
-            padding: 0;
-        }
-    }
-}
-
-// Open and closed carets in dropdowns
-.o_closed_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-right;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-.o_open_menu {
-    position: relative;
-
-    &:before {
-        margin-top: (-$caret-width);
-        @include o-caret-down;
-        @include o-position-absolute($top: 50%, $left: 10px);
-    }
-}
-
 // Filter menu
 .o_filter_menu {
 
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index baa3475f85003..aeee7ac7db8d8 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -154,15 +154,16 @@
     <div class="btn-group o_dropdown" t-att-class="{ show: state.open }">
         <button type="button"
             class="o_dropdown_toggler_btn btn btn-secondary"
+            t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
             t-att-aria-expanded="state.open ? 'true' : 'false'"
             tabindex="-1"
             t-on-click="state.open = !state.open"
             t-on-keydown="_onButtonKeydown"
             >
-            <i t-if="icon" t-att-class="icon"/>
+            <i t-if="icon" t-att-class="icon + ' small mr-1'"/>
             <span class="o_dropdown_title" t-esc="title"/>
-            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
-            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
+            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-fw fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+            <i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
         </button>
         <ul t-if="state.open" t-attf-class="o_dropdown_menu dropdown-menu {{ dropdownMenuAlignClass }} show" role="menu"
             t-on-item-selected="_onItemSelected"
@@ -221,7 +222,7 @@
 <t t-name="web.DropdownMenuItem" owl="1">
     <li class="o_menu_item" role="menuitem" t-on-keydown="_onKeydown">
         <t t-if="canBeOpened">
-            <a class="o_menu_item_parent dropdown-item"
+            <a class="o_menu_item_parent dropdown-item d-flex align-items-center justify-content-between"
                 t-att-class="{ selected: props.isActive }"
                 t-att-aria-checked="props.isActive ? 'true' : 'false'"
                 role="menuitemcheckbox"
@@ -230,9 +231,9 @@
                 t-on-click.prevent="state.open = !state.open"
                 >
                 <t t-esc="props.description"/>
-                <i t-attf-class="o_icon_right fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+                <i t-attf-class="o_icon_right fa fa-fw mr-n4 fa-caret-{{ state.open ? 'down' : 'right' }}"/>
             </a>
-            <ul t-if="state.open" class="o_menu_item_options">
+            <ul t-if="state.open" class="o_menu_item_options pb-2 list-unstyled">
                 <t t-set="currentGroup" t-value="null"/>
                 <t t-foreach="props.options" t-as="option" t-key="option_index">
                     <li t-if="currentGroup !== null and currentGroup !== option.groupNumber"