pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] spreadsheet: dashboard filters finetuning

Browse Source 
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>
This commit is contained in:
Adrien Minne
2022-09-21 22:45:46 +02:00
parent d72fa35ced
commit 4b06783080
4 changed files with 93 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.scss
+7
View File
@@ -0,0 +1,7 @@
.o-filter-value {
.o-text-filter-input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
addons/spreadsheet/static/src/global_filters/components/filter_value/filter_value.xml
+43 -41
View File
@@ -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>
addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.scss
+43 -15
View File
@@ -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;
}
}
}
}
addons/spreadsheet_dashboard/static/src/bundle/dashboard_action/dashboard_action.xml
-1
View File
@@ -60,4 +60,3 @@
</div>
</div>
</templates>