[IMP] web: ControlPanel: remove dropdown carets

Part of task 2234547

closes odoo/odoo#49793

Related: odoo/enterprise#10059
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>
Co-authored-by: Aaron Bohy <aab@odoo.com>

4 files changed, 20 insertions, 6 deletions

diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index df7172ae1d4..be1f29629ed 100644
--- a/addons/web/static/src/js/components/dropdown_menu.js
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -34,8 +34,6 @@ odoo.define('web.DropdownMenu', function (require) {
             this.dropdownMenu = useRef('dropdown');
             this.state = useState({ open: false });
 
-            this.symbol = this.env.device.isMobile ? 'fa fa-chevron-right float-right mt4' : false;
-
             useExternalListener(window, 'click', this._onWindowClick);
             useExternalListener(window, 'keydown', this._onWindowKeydown);
         }
@@ -45,11 +43,22 @@ odoo.define('web.DropdownMenu', function (require) {
         //---------------------------------------------------------------------
 
         /**
-         * Overriden in case we want to keep the caret style on the button in mobile.
+         * In desktop, by default, we do not display a caret icon next to the
+         * dropdown.
          * @returns {boolean}
          */
         get displayCaret() {
-            return !this.env.device.isMobile;
+            return false;
+        }
+
+        /**
+         * In mobile, by default, we display a chevron icon next to the dropdown
+         * button. Note that when 'displayCaret' is true, we display a caret
+         * instead of a chevron, no matter the value of 'displayChevron'.
+         * @returns {boolean}
+         */
+        get displayChevron() {
+            return this.env.device.isMobile;
         }
 
         /**
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 0bacb3345c3..075fce5cfe4 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -59,6 +59,9 @@
                 top: 5px;
                 right: 10px;
             }
+            .o_dropdown_toggler_btn {
+                margin-right: 15px;
+            }
         }
     }
 
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 88900e6127f..618e146175d 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -83,7 +83,7 @@
 .o_search_options .o_dropdown_toggler_btn:first-child {
     // apply the padding to the first element so that when the `favorites` menu goes under
     // the `filters` menu, they're still aligned
-    margin-right: 10px;
+    margin-right: 15px;
 }
 
 // Dropdowns
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 62370e8f9f4..b06b8402620 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -163,7 +163,7 @@
             <i t-if="props.icon" t-att-class="props.icon"/>
             <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-else="" t-attf-class="fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
+            <i t-elif="displayChevron" t-attf-class="fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
         </button>
         <ul t-if="state.open" class="o_dropdown_menu dropdown-menu show" role="menu"
             t-on-item-selected="_onItemSelected"
@@ -631,10 +631,12 @@
         <DropdownMenu t-if="printItems.length"
             title="env._t('Print')"
             items="printItems"
+            icon="'fa fa-print'"
         />
         <DropdownMenu t-if="actionItems.length"
             title="env._t('Action')"
             items="actionItems"
+            icon="'fa fa-cog'"
         />
     </div>
 </t>