diff --git a/addons/account/static/src/scss/account_searchpanel.scss b/addons/account/static/src/scss/account_searchpanel.scss
index 284b916108f..b8b04a11a9e 100644
--- a/addons/account/static/src/scss/account_searchpanel.scss
+++ b/addons/account/static/src/scss/account_searchpanel.scss
@@ -1,5 +1,5 @@
.o_search_panel.account_root {
- flex: 0 0 48px;
+ flex: 0 0 50px;
padding: 6px;
scrollbar-width: thin;
.o_search_panel_section_header {
@@ -8,9 +8,14 @@
.list-group-item span.o_search_panel_label_title {
display: contents;
}
- .o_search_panel_category_value header {
- margin-left: 0;
- padding-left: 0;
+ .o_search_panel_category_value {
+ header {
+ margin-left: 0;
+ padding-left: 0;
+ }
+ .o_search_panel_category_value .o_toggle_fold_container {
+ width: 0.3rem;
+ }
}
&::-webkit-scrollbar {
width: 4px;
diff --git a/addons/web/static/src/js/views/search_panel.js b/addons/web/static/src/js/views/search_panel.js
index ef1fd05e4fb..eba680627f2 100644
--- a/addons/web/static/src/js/views/search_panel.js
+++ b/addons/web/static/src/js/views/search_panel.js
@@ -67,10 +67,9 @@ const SearchPanel = Widget.extend({
className: 'o_search_panel',
events: {
'click .o_search_panel_category_value header': '_onCategoryValueClicked',
- 'click .o_search_panel_category_value .o_toggle_fold': '_onToggleFoldCategory',
- 'click .o_search_panel_filter_group .o_toggle_fold': '_onToggleFoldFilterGroup',
- 'change .o_search_panel_filter_value > div > input': '_onFilterValueChanged',
- 'change .o_search_panel_filter_group > div > input': '_onFilterGroupChanged',
+ 'click .o_search_panel_category_value .o_toggle_fold_container': '_onToggleFoldCategory',
+ 'change .o_search_panel_filter_value > header > div > input': '_onFilterValueChanged',
+ 'change .o_search_panel_filter_group > header > div > input': '_onFilterGroupChanged',
},
/**
@@ -783,19 +782,6 @@ const SearchPanel = Widget.extend({
category.values[valueId].folded = !category.values[valueId].folded;
this._render();
},
- /**
- * @private
- * @param {MouseEvent} ev
- */
- _onToggleFoldFilterGroup(ev) {
- ev.preventDefault();
- ev.stopPropagation();
- const item = ev.currentTarget.closest('.o_search_panel_filter_group');
- const filter = this.filters[item.dataset.filterId];
- const groupId = item.dataset.groupId;
- filter.groups[groupId].folded = !filter.groups[groupId].folded;
- this._render();
- },
});
return SearchPanel;
diff --git a/addons/web/static/src/scss/search_panel.scss b/addons/web/static/src/scss/search_panel.scss
index c8f88aafa6e..a3cf4b319c3 100644
--- a/addons/web/static/src/scss/search_panel.scss
+++ b/addons/web/static/src/scss/search_panel.scss
@@ -27,48 +27,51 @@ $o-searchpanel-filter-default-color: #D59244;
.o_search_panel_category .o_search_panel_section_icon {
color: $o-brand-odoo;
}
+
.o_search_panel_filter .o_search_panel_section_icon {
color: $o-searchpanel-filter-default-color;
}
+ .o_toggle_fold_container {
+ text-align: center;
+ width: 1.5rem;
+ }
+
.o_search_panel_label {
align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between;
user-select: none;
-
- // Without counters: the caret is set at the right border
- &:not(.o_with_counters) {
- width: 100%;
- }
-
- .o_toggle_fold {
- width: 2rem;
- }
}
+
.o_search_panel_section_header {
padding: $o-searchpanel-p-small 0;
cursor: default;
}
+
+ .list-group {
+ padding-bottom: $o-searchpanel-p-tiny;
+ }
+
.list-group-item {
- padding: 0 0 $o-searchpanel-p-small 0;
+ padding: 0;
.list-group-item {
padding: 0 0 0 $custom-control-gutter;
margin-bottom: $o-searchpanel-p-tiny*0.5;
- &:first-child {
- margin-top: $o-searchpanel-p-tiny*0.5;
- }
}
+
span.o_search_panel_label_title {
color: $headings-color;
@include o-text-overflow;
}
+
header.active {
background-color: $o-searchpanel-active-bg;
}
}
+
.o_search_panel_category_value {
cursor: pointer;
@@ -76,9 +79,7 @@ $o-searchpanel-filter-default-color: #D59244;
align-items: center;
display: flex;
justify-content: space-between;
- margin-top: -4px;
- margin-bottom: -4px;
- padding: 4px 6px;
+ padding: 4px 6px 4px 0px;
}
.o_search_panel_label.o_with_counters {
overflow: hidden;
@@ -86,7 +87,6 @@ $o-searchpanel-filter-default-color: #D59244;
.o_search_panel_category_value {
position: relative;
padding-left: $o-searchpanel-p;
- padding-bottom: $o-searchpanel-p-tiny;
margin-bottom: 0;
&:before, &:after {
@@ -94,23 +94,34 @@ $o-searchpanel-filter-default-color: #D59244;
@include size(1px, 100%);
background: $gray-500;
content: '';
+ margin-left: 4px;
}
&:after {
- top: 10px;
+ top: 12px;
@include size(8px, 1px);
}
- &:last-child {
- &:before {
- height: 11px;
- }
- &:after {
- top: 11px;
- }
+ &:last-child:before {
+ height: 12px;
}
}
}
+
+ .o_search_panel_filter_value,
.o_search_panel_filter_group {
- padding-right: 6px;
+ cursor: pointer;
+ padding-bottom: $o-searchpanel-p-small;
+
+ .o_search_panel_label,
+ .o_search_panel_label_title {
+ padding-right: 6px;
+ }
+ }
+
+ .o_search_panel_filter_group {
+
+ header {
+ display: flex;
+ }
.o_search_panel_label.o_with_counters {
justify-content: flex-start;
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index 970f9fd9825..980decc1a8e 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -225,7 +225,8 @@
-
@@ -245,16 +246,18 @@
-
-
+
@@ -286,17 +289,18 @@
-
-
-
-
-
-
+
+
@@ -316,17 +320,19 @@
-
-
-
-
-
-
+
+
diff --git a/addons/web/static/tests/views/search_panel_tests.js b/addons/web/static/tests/views/search_panel_tests.js
index f49b0a2bade..d445d9b6a96 100644
--- a/addons/web/static/tests/views/search_panel_tests.js
+++ b/addons/web/static/tests/views/search_panel_tests.js
@@ -1746,7 +1746,7 @@ QUnit.module('Views', {
assert.containsOnce(kanban, '.o_search_panel_filter_group:first .o_search_panel_filter_value');
assert.containsN(kanban, '.o_search_panel_filter_group:nth(1) .o_search_panel_filter_value', 2);
assert.containsNone(kanban, '.o_search_panel_filter_value input:checked');
- assert.strictEqual(kanban.$('.o_search_panel_filter_group > div > label').text().replace(/\s/g, ''),
+ assert.strictEqual(kanban.$('.o_search_panel_filter_group > header > div > label').text().replace(/\s/g, ''),
'goldsilver');
assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
'asustek2agrolait1camptocamp');
@@ -1756,7 +1756,7 @@ QUnit.module('Views', {
await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
- var firstGroupCheckbox = kanban.$('.o_search_panel_filter_group:first > div > input').get(0);
+ var firstGroupCheckbox = kanban.$('.o_search_panel_filter_group:first > header > div > input').get(0);
assert.strictEqual(firstGroupCheckbox.checked, true,
"first group checkbox should be checked");
assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
@@ -1767,7 +1767,7 @@ QUnit.module('Views', {
await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
assert.containsN(kanban, '.o_search_panel_filter_value input:checked', 2);
- var secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
+ var secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input').get(0);
assert.strictEqual(secondGroupCheckbox.checked, false,
"second group checkbox should not be checked");
assert.strictEqual(secondGroupCheckbox.indeterminate, true,
@@ -1780,7 +1780,7 @@ QUnit.module('Views', {
await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(2) input'));
assert.containsN(kanban, '.o_search_panel_filter_value input:checked', 3);
- secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
+ secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input').get(0);
assert.strictEqual(secondGroupCheckbox.checked, true,
"second group checkbox should be checked");
assert.strictEqual(secondGroupCheckbox.indeterminate, false,
@@ -1790,10 +1790,10 @@ QUnit.module('Views', {
assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 0);
// uncheck second group
- await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:nth(1) > div > input'));
+ await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input'));
assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
- secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
+ secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input').get(0);
assert.strictEqual(secondGroupCheckbox.checked, false,
"second group checkbox should not be checked");
assert.strictEqual(secondGroupCheckbox.indeterminate, false,
@@ -1875,72 +1875,6 @@ QUnit.module('Views', {
kanban.destroy();
});
- QUnit.test('(un)fold filter group', async function (assert) {
- assert.expect(13);
-
- this.data.company.records.push({id: 11, name: 'camptocamp', category_id: 7});
-
- var kanban = await createView({
- View: KanbanView,
- model: 'partner',
- data: this.data,
- services: this.services,
- arch: `
-
-
-
-
-
-
-
-
- `,
- archs: {
- 'partner,false,search': `
-
-
-
-
- `,
- },
- });
-
- // groups are opened by default
- assert.containsN(kanban, '.o_search_panel_filter_group', 2);
- assert.containsN(kanban, '.o_search_panel_filter_value', 3);
-
- // check 'agrolait'
- await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
- var secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
- assert.strictEqual(secondGroupCheckbox.indeterminate, true);
- assert.hasAttrValue(kanban.$('.o_search_panel_filter_value:nth(1) input'), 'checked', 'checked');
-
- // fold second group
- await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:nth(1) .o_toggle_fold'));
-
- assert.containsN(kanban, '.o_search_panel_filter_group', 2);
- assert.containsOnce(kanban, '.o_search_panel_filter_value');
- secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
- assert.strictEqual(secondGroupCheckbox.indeterminate, true);
-
- // fold first group
- await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:first .o_toggle_fold'));
-
- assert.containsN(kanban, '.o_search_panel_filter_group', 2);
- assert.containsNone(kanban, '.o_search_panel_filter_value');
-
- // unfold second group
- await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:nth(1) .o_toggle_fold'));
-
- assert.containsN(kanban, '.o_search_panel_filter_group', 2);
- assert.containsN(kanban, '.o_search_panel_filter_value', 2);
- secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
- assert.strictEqual(secondGroupCheckbox.indeterminate, true);
- assert.hasAttrValue(kanban.$('.o_search_panel_filter_value:first input'), 'checked', 'checked');
-
- kanban.destroy();
- });
-
QUnit.test('filter with domain depending on category', async function (assert) {
assert.expect(22);
@@ -2155,7 +2089,7 @@ QUnit.module('Views', {
},
});
- var secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > div > input').get(0);
+ var secondGroupCheckbox = kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input').get(0);
assert.strictEqual(secondGroupCheckbox.indeterminate, true);
kanban.destroy();