[IMP] account,web: SearchPanel: move carets to the left

In this commit, hierarchy carets in the search panel have been moved to
the left side of the labels. To achieve a consistent and correct
alignment, some DOM elements have been added/moved and the related SCSS
sheets have been adapted.

Carets on filter sections of the search panel have also been removed.

Task 2258508

1 files changed, 32 insertions, 26 deletions

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 @@
         <ul class="list-group d-block o_search_panel_field" t-att-data-field-name="category.fieldName">
             <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-category-id="category.id">
                 <header t-att-class="'list-group-item-action' + (!category.activeValueId ? ' active' : '')">
-                    <label class="o_search_panel_label mb0 d-block">
+                    <label class="o_search_panel_label mb0">
+                        <div class="o_toggle_fold_container"/>
                         <span class="o_search_panel_label_title"><b>All</b></span>
                     </label>
                 </header>
@@ -245,16 +246,18 @@
         <t t-set="value" t-value="category.values[valueId]"/>
         <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-id="value.id" t-att-data-category-id="category.id">
             <header t-att-class="'list-group-item-action' + (value.id === category.activeValueId ? ' active' : '')">
-                <label t-att-for="value.display_name" t-attf-class="o_search_panel_label mb0{{ category.disableCounters ? '' : ' o_with_counters' }}">
+                <label t-attf-class="o_search_panel_label mb0{{ category.disableCounters ? '' : ' o_with_counters' }}">
+                    <div class="o_toggle_fold_container">
+                        <i t-if="value.childrenIds.length" t-attf-class="o_toggle_fold fa fa-caret-{{ value.folded ? 'right' : 'down' }}"/>
+                    </div>
                     <span class="o_search_panel_label_title"><t t-esc="value.display_name"/></span>
-                    <i t-if="value.childrenIds.length" t-attf-class="o_toggle_fold fa fa-fw fa-caret-{{ value.folded ? 'right' : 'down' }}"/>
                 </label>
                 <span t-if="!category.disableCounters and value.__count > 0"
                     class="text-muted ml-2 small"
                     t-esc="value.__count"
                 />
             </header>
-            <ul t-if="!value.folded" class="list-group d-block">
+            <ul t-if="!value.folded and value.childrenIds.length" class="list-group d-block">
                 <t t-call="SearchPanel.CategoryValues">
                     <t t-set="values" t-value="value.childrenIds"/>
                 </t>
@@ -286,17 +289,18 @@
     <li t-foreach="filter.sortedGroupIds" t-as="groupId" t-att-data-group-id="groupId" t-att-data-filter-id="filter.id"
         class="o_search_panel_filter_group list-group-item border-0">
         <t t-set="group" t-value="groups[groupId]"/>
-        <div class="custom-control custom-checkbox">
-            <t t-set="inputId" t-value="_.uniqueId('input_')"/>
-            <input type="checkbox" t-att-id="inputId" t-att-checked="group.state === 'checked' ? 'checked' : undefined" class="custom-control-input"/>
-            <label t-att-for="inputId" t-attf-class="o_search_panel_label custom-control-label{{ group.disableCounters ? '' : ' o_with_counters' }}" t-att-title="group.tooltip">
-                <span class="o_search_panel_label_title">
-                    <span t-if="group.hex_color" t-attf-style="color: {{ group.hex_color }};">●</span>
-                    <t t-esc="group.name"/>
-                </span>
-                <i t-attf-class="o_toggle_fold fa fa-fw fa-caret-{{ group.folded ? 'right' : 'down' }}"/>
-            </label>
-        </div>
+        <t t-set="inputId" t-value="_.uniqueId('input_')"/>
+        <header class="o_search_panel_group_header">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" t-att-id="inputId" t-att-checked="group.state === 'checked' ? 'checked' : undefined" class="custom-control-input"/>
+                <label t-att-for="inputId" t-attf-class="o_search_panel_label custom-control-label{{ group.disableCounters ? '' : ' o_with_counters' }}" t-att-title="group.tooltip">
+                    <span class="o_search_panel_label_title">
+                        <span t-if="group.hex_color" t-attf-style="color: {{ group.hex_color }};">●</span>
+                        <t t-esc="group.name"/>
+                    </span>
+                </label>
+            </div>
+        </header>
         <ul t-if="!group.folded" class="list-group d-block">
             <t t-call="SearchPanel.FilterValues">
                 <t t-set="sortedValueIds" t-value="group.sortedValueIds"/>
@@ -316,17 +320,19 @@
     <li t-foreach="sortedValueIds" t-as="valueId" t-att-data-value-id="valueId" t-att-data-filter-id="filter.id"
         class="o_search_panel_filter_value list-group-item border-0">
         <t t-set="value" t-value="values[valueId]"/>
-        <div class="custom-control custom-checkbox">
-            <t t-set="inputId" t-value="_.uniqueId('input_')"/>
-            <input type="checkbox" t-att-id="inputId" t-att-checked="value.checked ? 'checked' : undefined" class="custom-control-input"/>
-            <label t-att-for="inputId" class="o_search_panel_label custom-control-label" t-att-title="group &amp;&amp; group.tooltip">
-                <span class="o_search_panel_label_title" t-esc="value.display_name"/>
-                <span t-if="!filter.disableCounters and value.__count > 0"
-                    class="text-muted ml-2 small"
-                    t-esc="value.__count"
-                />
-            </label>
-        </div>
+        <t t-set="inputId" t-value="_.uniqueId('input_')"/>
+        <header class="o_search_panel_group_header">
+            <div class="custom-control custom-checkbox w-100">
+                <input type="checkbox" t-att-id="inputId" t-att-checked="value.checked ? 'checked' : undefined" class="custom-control-input"/>
+                <label t-att-for="inputId" class="o_search_panel_label custom-control-label" t-att-title="group &amp;&amp; group.tooltip">
+                    <span class="o_search_panel_label_title" t-esc="value.display_name"/>
+                    <span t-if="!filter.disableCounters and value.__count > 0"
+                        class="text-muted ml-2 small"
+                        t-esc="value.__count"
+                    />
+                </label>
+            </div>
+        </header>
     </li>
 </t>