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