From 56e63ebae349798d26a61a4c516c2abb66a33329 Mon Sep 17 00:00:00 2001
From: pka-odoo <pka@odoo.com>
Date: Mon, 4 May 2020 13:03:06 +0000
Subject: [PATCH] [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>
---
.../static/src/js/components/dropdown_menu.js | 17 +++++++++++++----
addons/web/static/src/scss/control_panel.scss | 3 +++
addons/web/static/src/scss/search_view.scss | 2 +-
addons/web/static/src/xml/base.xml | 4 +++-
.../tests/components/dropdown_menu_tests.js | 4 +---
5 files changed, 21 insertions(+), 9 deletions(-)
diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index df7172ae1d4d..be1f29629ed7 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 0bacb3345c3a..075fce5cfe40 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 88900e6127f2..618e146175df 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 62370e8f9f44..b06b84026200 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>
diff --git a/addons/web/static/tests/components/dropdown_menu_tests.js b/addons/web/static/tests/components/dropdown_menu_tests.js
index bf91fa9c04dc..a0f00b68ef10 100644
--- a/addons/web/static/tests/components/dropdown_menu_tests.js
+++ b/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');
--
GitLab