[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>

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;
         }
 
         /**

addons/web/static/src/scss/control_panel.scss

@@ -59,6 +59,9 @@
                 top: 5px;
                 right: 10px;
             }
+            .o_dropdown_toggler_btn {
+                margin-right: 15px;
+            }
         }
     }
 

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

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>

addons/web/static/tests/components/dropdown_menu_tests.js

@@ -32,7 +32,7 @@ odoo.define('web.dropdown_menu_tests', function (require) {
         QUnit.module('DropdownMenu');
 
         QUnit.test('simple rendering and basic interactions', async function (assert) {
-            assert.expect(10);
+            assert.expect(8);
 
             const dropdown = await createComponent(DropdownMenu, {
                 props: {
@@ -42,14 +42,12 @@ odoo.define('web.dropdown_menu_tests', function (require) {
             });
 
             assert.strictEqual(dropdown.el.querySelector('button').innerText.trim(), "Dropdown");
-            assert.containsOnce(dropdown, 'button i.fa.fa-caret-right');
             assert.containsNone(dropdown, 'ul.o_dropdown_menu');
 
             await testUtils.dom.click(dropdown.el.querySelector('button'));
 
             assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3,
                 'should have 3 elements counting the divider');
-            assert.containsOnce(dropdown, 'button i.fa.fa-caret-down');
             const itemEls = dropdown.el.querySelectorAll('.o_menu_item > .dropdown-item');
             assert.strictEqual(itemEls[0].innerText.trim(), 'Some Item');
             assert.doesNotHaveClass(itemEls[0], 'selected');