[FIX] web: o_search_panel margins

Slightly increase the component size and adapt its margin/padding in order to accommodate more text. Also, this commit addresses an issue that made [1] necessary. Indeed `o_cursor_pointer` has been replaced by `cursor-pointer` in commit [2], but the change wasn't applied on `o_search_panel`. [1] odoo@223b9e9 [2] odoo@bd2a111 part of task-3326263 task-3476147 closes odoo#134817 X-original-commit: 4e82f72 Signed-off-by: Pierre Paridans (app) <[email protected]>
ronelsimon · Sep 13, 2023 · 9aa16f4 · 9aa16f4
1 parent 49aa4dc
commit 9aa16f4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/addons/web/static/src/search/search_panel/search_panel.scss b/addons/web/static/src/search/search_panel/search_panel.scss
@@ -21,30 +21,29 @@
 // ------- SearchPanel -------
 
 .o_search_panel {
+    --treeEntry-padding-h: #{map-get($spacers, 3)};
+
     width: var(--SearchPanel-width, #{$o-search-panel-width});
     font-size: var(--SearchPanel-fontSize, #{$o-search-panel-font-size});
-    
+
     @include media-breakpoint-up(md) {
         border-right: $border-width solid $border-color;
     }
 
-    .o_search_panel_category_value,
-    .o_search_panel_filter_value input,
-    .o_search_panel_filter_value .o_search_panel_label_title,
-    .o_search_panel_group_header input,
-    .o_search_panel_group_header .o_search_panel_label_title
-    {
-        cursor: pointer;
+    .o_toggle_fold {
+        width: map-get($spacers, 3);
     }
 
-    .o_toggle_fold {
-        width: map-get($spacers, 4);
+    .o_search_panel_counter {
+        font-variant-numeric: tabular-nums;
     }
 }
 
 .o_mobile_search_content {
     --SearchPanel-width: 100%;
     --SearchPanel-fontSize: 1.1em;
+
+    --treeEntry-padding-v: #{$list-group-item-padding-y * 2};
 }
 
 @include media-breakpoint-down(md) {

diff --git a/addons/web/static/src/search/search_panel/search_panel.variables.scss b/addons/web/static/src/search/search_panel/search_panel.variables.scss
@@ -1,7 +1,7 @@
 // = Search Panel Variables
 // ============================================================================
 
-$o-search-panel-width: 200px;
+$o-search-panel-width: 220px;
 $o-search-panel-font-size: 1em;
 
 @mixin o-details-modal($top: 0, $bottom: 0) {

diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -11,7 +11,10 @@
 </t>
 
 <t t-name="web.SearchPanelContent">
-    <div class="o_search_panel flex-grow-0 flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto" t-att-class="env.searchModel.searchPanelInfo.className" t-ref="root">
+    <div class="o_search_panel flex-grow-0 flex-shrink-0 h-100 pb-5 bg-view overflow-auto"
+         t-att-class="env.searchModel.searchPanelInfo.className"
+         t-attf-class="#{env.isSmall ? 'px-3' : 'pe-1 ps-3'}"
+         t-ref="root">
         <div t-if="!sections or sections.length === 0" class="o_search_panel_empty_state me-3">
             <p class="mt-3 small text-muted">No quick filter available.</p>
             <p class="small text-muted">Update the filters in the search bar to display more records.</p>
@@ -54,7 +57,7 @@
                                 />
                                 <label
                                     t-attf-for="{{ section.id }}_input_{{ groupId }})"
-                                    class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 o_cursor_pointer"
+                                    class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 cursor-pointer"
                                     t-att-class="{ o_with_counters: group.enableCounters }"
                                     t-att-title="group.tooltip or false"
                                     >
@@ -160,16 +163,16 @@
 <t t-name="web.SearchPanel.Category">
     <t t-foreach="values" t-as="valueId" t-key="valueId">
         <t t-set="value" t-value="section.values.get(valueId)"/>
-        <li class="o_search_panel_category_value list-group-item py-1 o_cursor_pointer border-0"
-            t-att-class="isChildList ? 'o_treeEntry ps-4 pe-0' : 'ps-0 pe-2'"
+        <li class="o_search_panel_category_value list-group-item py-1 cursor-pointer border-0 pe-0"
+            t-att-class="isChildList ? 'o_treeEntry' : 'ps-0'"
             >
             <header
-                class="list-group-item list-group-item-action d-flex align-items-center p-0 border-0"
+                class="list-group-item list-group-item-action d-flex align-items-center px-0 py-lg-0 border-0"
                 t-att-class="{'active text-900 fw-bold': state.active[section.id] === valueId}"
                 t-on-click="() => this.toggleCategory(section, value)"
                 >
                 <div
-                    class="o_search_panel_label d-flex align-items-center overflow-hidden w-100 o_cursor_pointer mb-0"
+                    class="o_search_panel_label d-flex align-items-center overflow-hidden w-100 cursor-pointer mb-0"
                     t-att-class="{'o_with_counters': section.enableCounters }"
                     >
                     <button class="o_toggle_fold btn p-0 flex-shrink-0 text-center">
@@ -178,7 +181,7 @@
                             class="fa"
                             t-att-class="{
                                 'fa-caret-down' : state.expanded[section.id][valueId],
-                                'fa-caret-right ms-1':  !state.expanded[section.id][valueId]
+                                'fa-caret-right':  !state.expanded[section.id][valueId]
                             }"
                             />
                     </button>
@@ -208,7 +211,7 @@
 
 <t t-name="web.SearchPanel.FiltersGroup">
     <li t-foreach="[...values.keys()]" t-as="valueId" t-key="valueId"
-        class="o_search_panel_filter_value list-group-item p-0 mb-1 border-0 o_cursor_pointer"
+        class="o_search_panel_filter_value list-group-item p-0 mb-1 border-0 cursor-pointer"
         t-att-class="{ 'ps-2' : isChildList }"
         >
         <t t-set="value" t-value="values.get(valueId)"/>
@@ -219,7 +222,7 @@
                 class="form-check-input"
                 t-on-click="ev => this.toggleFilterValue(section.id, valueId, ev)"
             />
-            <label class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 o_cursor_pointer"
+            <label class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 cursor-pointer"
                 t-attf-for="{{ section.id }}_input_{{ valueId }}"
                 t-att-title="(group and group.tooltip) or false">
                 <span class="o_search_panel_label_title text-truncate" t-esc="value.display_name"/>