From 4b0678308024aaf4598d94a661883a4d8d88e953 Mon Sep 17 00:00:00 2001
From: Adrien Minne <adrm@odoo.com>
Date: Tue, 20 Sep 2022 09:01:07 +0000
Subject: [PATCH] [IMP] spreadsheet: dashboard filters finetuning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improve the CSS of the global filters in dashboards

Odoo task 2988046

closes odoo/odoo#100749

X-original-commit: 629c36f9763669e500c2664ad44037d915c29b10
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>
---
 .../components/filter_value/filter_value.scss |  7 ++
 .../components/filter_value/filter_value.xml  | 84 ++++++++++---------
 .../dashboard_action/dashboard_action.scss    | 58 +++++++++----
 .../dashboard_action/dashboard_action.xml     |  1 -
 4 files changed, 93 insertions(+), 57 deletions(-)
 create mode 100644 addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.scss

diff --git a/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.scss b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.scss
new file mode 100644
index 00000000000..8c5b0d539da
--- /dev/null
+++ b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.scss
@@ -0,0 +1,7 @@
+.o-filter-value {
+    .o-text-filter-input {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
index 3d6e21236ef..5174df28a1f 100644
--- a/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
+++ b/addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
@@ -1,48 +1,50 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
-    <t t-name="spreadsheet_edition.FilterValue" owl="1">
-        <t t-set="filter" t-value="props.filter"/>
-        <t t-set="filterValue" t-value="getters.getGlobalFilterValue(filter.id)"/>
-        <div>
-            <input t-if="filter.type === 'text'"
-                type="text"
-                class="o_input"
-                t-att-placeholder="filter.label"
-                t-att-value="filterValue"
-                t-on-change="(e) => this.onTextInput(filter.id, e.target.value)"/>
-        </div>
-        <span t-if="filter.type === 'relation'">
-            <RecordsSelector
-                placeholder="filter.label"
-                resModel="filter.modelName"
-                resIds="filterValue"
-                onValueChanged="(value) => this.onTagSelected(filter.id, value)"
-            />
-        </span>
-        <div class="d-flex align-items-center">
-            <DateFilterValue
-                t-if="filter.type === 'date' and filter.rangeType !== 'relative'"
-                period="filterValue &amp;&amp; filterValue.period"
-                yearOffset="filterValue &amp;&amp; filterValue.yearOffset"
-                type="filter.rangeType"
-                onTimeRangeChanged="(value) => this.onDateInput(filter.id, value)" />
-            <select
-                t-if="filter.type === 'date' and filter.rangeType === 'relative'"
-                t-on-change="(e) => this.onDateInput(filter.id, e.target.value || undefined)"
-                class="o_input pe-3">
-                <option value=""/>
-                <t t-foreach="relativeDateRangesTypes" t-as="range" t-key="range.type">
-                    <option t-att-selected="range.type === filterValue" t-att-value="range.type">
-                        <t t-esc="range.description"/>
-                    </option>
-                </t>
-            </select>
-
-            <i  t-if="getters.isFilterActive(filter.id)"
-                class="fa fa-times btn btn-link text-muted o_side_panel_filter_icon"
+    <t t-name="spreadsheet_edition.FilterValue"
+        owl="1">
+        <div class="o-filter-value d-flex align-items-start">
+            <t t-set="filter"
+                t-value="props.filter"/>
+            <t t-set="filterValue"
+                t-value="getters.getGlobalFilterValue(filter.id)"/>
+            <div t-if="filter.type === 'text'"
+                >
+                <input type="text"
+                    class="o_input o-text-filter-input"
+                    t-att-placeholder="filter.label"
+                    t-att-value="filterValue"
+                    t-on-change="(e) => this.onTextInput(filter.id, e.target.value)"/>
+            </div>
+            <span t-if="filter.type === 'relation'">
+                <RecordsSelector placeholder="filter.label"
+                    resModel="filter.modelName"
+                    resIds="filterValue"
+                    onValueChanged="(value) => this.onTagSelected(filter.id, value)" />
+            </span>
+            <div t-if="filter.type === 'date'">
+                <DateFilterValue t-if="filter.rangeType !== 'relative'"
+                    period="filterValue &amp;&amp; filterValue.period"
+                    yearOffset="filterValue &amp;&amp; filterValue.yearOffset"
+                    type="filter.rangeType"
+                    onTimeRangeChanged="(value) => this.onDateInput(filter.id, value)" />
+                <select t-if="filter.rangeType === 'relative'"
+                    t-on-change="(e) => this.onDateInput(filter.id, e.target.value || undefined)"
+                    class="date_filter_values o_input me-3">
+                    <option value=""/>
+                    <t t-foreach="relativeDateRangesTypes"
+                        t-as="range"
+                        t-key="range.type">
+                        <option t-att-selected="range.type === filterValue"
+                            t-att-value="range.type">
+                            <t t-esc="range.description"/>
+                        </option>
+                    </t>
+                </select>
+            </div>
+            <i t-if="getters.isFilterActive(filter.id)"
+                class="fa fa-times btn btn-link text-muted o_side_panel_filter_icon ms-1"
                 title="Clear"
                 t-on-click="() => this.onClear(filter.id)"/>
         </div>
-
     </t>
 </templates>
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
index 7c6c5c41a2f..3baba0ebcca 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
@@ -1,17 +1,33 @@
-.o_spreadsheet_dashboard_search_panel ul {
-    padding-inline-start: 0px
-}
-.o_spreadsheet_dashboard_search_panel li {
-    padding: 4px 8px 4px 16px;
-    list-style-type: none;
-    &:hover:not(.active) {
-        background-color: $o-gray-100;
+.o_spreadsheet_dashboard_search_panel {
+    width: fit-content;
+    max-width: 200px;
+    align-items: center;
+
+    ul {
+        padding-inline-start: 0px
     }
+
+    li {
+        padding: 4px 8px 4px 12px;
+        list-style-type: none;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover:not(.active) {
+            background-color: $o-gray-100;
+        }
+    }
+
 }
+
 .o_spreadsheet_dashboard_action {
+    background-color: white;
+
     .o_renderer {
         height: 100%;
         margin: auto;
+
         .o-spreadsheet {
             height: 100%;
 
@@ -20,7 +36,6 @@
             }
         }
     }
-    background-color: white;
 
     .o_side_panel_filter_icon {
         padding: 0;
@@ -30,16 +45,29 @@
         margin: auto;
     }
 
+    .o_cp_top_left {
+        flex: 1;
+        min-width: 0;
+    }
+
     .o_cp_top_right {
         display: flex;
         justify-content: flex-end;
+        align-items: flex-start;
+        flex: 4;
+        min-width: 0;
 
-        .o_field_many2manytags, .date_filter_values {
-            margin-left: 3px;
-            margin-right: 3px;
-            display: flex;
-            gap: 3px;
-            align-items: baseline;
+        .o-filter-value {
+            min-height: 25px;
+            margin-left: 8px;
+            min-width: 100px;
+
+            .o_field_many2manytags,
+            .date_filter_values {
+                display: flex;
+                gap: 3px;
+                align-items: baseline;
+            }
         }
     }
 }
diff --git a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
index 4f73ea9781a..df8142b9e4f 100644
--- a/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
+++ b/addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
@@ -60,4 +60,3 @@
         </div>
     </div>
 </templates>
-