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

[FIX] web,*: Fix style in sample data views

Browse Source 
This commit defines new rules to disable elements in views using sample
data.

Previously, this was done by setting a 'o_view_sample_data' class on the
view and then setting another class 'o_sample_data_disabled' on elements
which had to be disabled.

Now, the logic determining which elements are disabled has been moved to
each view's SCSS file to avoid polluting the templates with redundant
class assignations. A mixin (o-sample-data-disabled) has been defined in
the SCSS utils to have the same rules on these elements.

closes odoo/odoo#101485

X-original-commit: 3e413c96ff2dff60de22e1d5e1fed7070ac2943d
Related: odoo/enterprise#31960
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Julien Mougenot
2022-09-28 21:26:32 +02:00
parent 05d361d383
commit e8124d2e38
17 changed files with 114 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/hr_recruitment/static/src/scss/hr_job.scss
+11 -11
View File
@@ -64,12 +64,6 @@
.o_kanban_renderer {
&.o_kanban_applicant {
.o_sample_data_disabled {
.ribbon {
display: none;
}
}
.ribbon {
&::before, &::after {
display: none;
@@ -93,11 +87,17 @@
}
}
.o_kanban_view .oe_kanban_card {
.o_kanban_state_with_padding {
padding-left:7%;
padding-bottom:5%;
width: 12px;
.o_kanban_view {
.oe_kanban_card {
.o_kanban_state_with_padding {
padding-left:7%;
padding-bottom:5%;
width: 12px;
}
}
.o_view_sample_data .ribbon {
display: none;
}
}
addons/web/static/src/legacy/scss/utils.scss
+7
View File
@@ -416,6 +416,13 @@
background: transparent url(/web/static/img/empty_folder.svg) no-repeat center;
}
// Sample data
@mixin o-sample-data-disabled {
opacity: 0.33;
pointer-events: none;
user-select: none;
}
// ----------------------------------------------------------------------------
// CSS Variables
// ----------------------------------------------------------------------------
addons/web/static/src/views/graph/graph_controller.xml
+1 -5
View File
@@ -65,11 +65,7 @@
<t t-if="model.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
<t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
</t>
<t t-component="props.Renderer"
class="model.useSampleModel ? 'o_sample_data_disabled' : ''"
model="model"
onGraphClicked="(domain) => this.onGraphClicked(domain)"
/>
<t t-component="props.Renderer" model="model" onGraphClicked="(domain) => this.onGraphClicked(domain)" />
</t>
<t t-else="" t-call="web.NoContentHelper">
<t t-set="title">Invalid data</t>
addons/web/static/src/views/graph/graph_view.scss
+9 -1
View File
@@ -1,3 +1,11 @@
.o_graph_view canvas {
// ------- Graph renderer -------
.o_graph_renderer canvas {
background-color: $o-view-background-color;
}
// ------- Sample mode -------
.o_graph_view .o_view_sample_data {
.o_graph_renderer {
@include o-sample-data-disabled;
}
}
addons/web/static/src/views/kanban/kanban_controller.scss
+16 -2
View File
@@ -1,4 +1,4 @@
// ------- Kanban View Layout -------
// ------- Kanban renderer -------
.o_kanban_renderer {
// ----------------------------------------------------------------------------
// Default KanbanView values
@@ -603,7 +603,21 @@
}
}
// ----------------- Set Cover Dialog -----------------
// ------- Sample mode -------
.o_kanban_view .o_view_sample_data {
// all records
.o_kanban_record,
// progress bars and counters
.o_kanban_counter,
// column actions
.o_kanban_toggle_fold,
.o_column_archive_records,
.o_column_unarchive_records {
@include o-sample-data-disabled;
}
}
// ------- Set cover dialog -------
.modal .o_kanban_cover_container .o_kanban_cover_image {
height: 120px;
width: 120px;
addons/web/static/src/views/kanban/kanban_record.js
-3
View File
@@ -236,9 +236,6 @@ export class KanbanRecord extends Component {
const value = record.data[archInfo.cardColorField];
classes.push(getColorClass(value));
}
if (record.model.useSampleModel) {
classes.push("o_sample_data_disabled");
}
if (!this.props.list.isGrouped) {
classes.push("flex-grow-1 flex-md-shrink-1 flex-shrink-0");
}
addons/web/static/src/views/kanban/kanban_renderer.xml
+1 -1
View File
@@ -24,7 +24,7 @@
</t>
<DropdownItem t-if="!env.isSmall" class="{
'o_kanban_toggle_fold': true,
'o_sample_data_disabled disabled': props.list.model.useSampleModel,
'disabled': props.list.model.useSampleModel,
}" onSelected="() => this.toggleGroup(group)">
Fold
</DropdownItem>
addons/web/static/src/views/list/list_renderer.js
-3
View File
@@ -621,9 +621,6 @@ export class ListRenderer extends Component {
if (record.selected) {
classNames.push("o_data_row_selected");
}
if (this.props.list.model.useSampleModel) {
classNames.push("o_sample_data_disabled");
}
if (this.canResequenceRows) {
classNames.push("o_row_draggable");
}
addons/web/static/src/views/list/list_renderer.scss
+34 -12
View File
@@ -1,3 +1,4 @@
// ------- List renderer -------
.o_list_renderer {
--ListRenderer-table-padding-h: #{$table-cell-padding-x-sm};
@@ -89,7 +90,8 @@
&.o_list_computing_widths {
> tbody > tr > td {
&.o_list_text, // text field, className on the td
> .o_field_text { // text field with widget, className inside the td
> .o_field_text {
// text field with widget, className inside the td
white-space: pre !important;
}
}
@@ -162,7 +164,8 @@
// Grouped list views
tbody > tr.o_group_header {
> th, > td {
> th,
> td {
vertical-align: middle;
padding-top: 5px;
padding-bottom: 5px;
@@ -191,7 +194,8 @@
margin-top: -2px;
margin-bottom: -2px;
.o_pager_previous, .o_pager_next {
.o_pager_previous,
.o_pager_next {
max-height: 30px;
padding: 0 5px;
background-color: lighten($o-brand-lightsecondary, 10%);
@@ -202,16 +206,15 @@
}
}
tbody + tbody {
border-top: none; // Override bootstrap for grouped list views
border-top: none; // Override bootstrap for grouped list views
}
.o_data_cell.o_text_overflow,
.o_data_cell.o_invisible_modifier {
// Override display: none to keep table cells aligned. Note: cannot use
// 'initial' as it will force them to 'inline', not 'table-cell'.
display: table-cell!important;
display: table-cell !important;
}
&.o_resizing tr > :not(.o_column_resizing) {
@@ -239,7 +242,6 @@
}
.o_data_row:not(.o_selected_row) .o_data_cell {
// Boolean fields in non-selected rows completely disabled.
.form-check {
pointer-events: none;
@@ -310,16 +312,19 @@
&.o_field_badge {
width: auto; // override width: 100% to keep the optimal badge width
}
.o_input_dropdown, .o_datepicker {
.o_input_dropdown,
.o_datepicker {
> .o_input {
padding-right: 15px; // to prevent caret overlapping
}
> .o_dropdown_button, .o_datepicker_button {
> .o_dropdown_button,
.o_datepicker_button {
margin-right: 5px;
@include o-position-absolute(0, 0);
}
}
> input.o_field_translate, textarea.o_field_translate {
> input.o_field_translate,
textarea.o_field_translate {
padding-right: 25px;
+ span.o_field_translate {
margin-left: -35px;
@@ -336,8 +341,12 @@
}
}
.o_field_x2many_list_row_add, .o_group_field_row_add {
a:focus, a:active, button:focus, button:active {
.o_field_x2many_list_row_add,
.o_group_field_row_add {
a:focus,
a:active,
button:focus,
button:active {
color: $link-hover-color;
outline: none;
}
@@ -414,3 +423,16 @@
}
}
}
// ------- Sample mode -------
.o_list_view .o_view_sample_data {
.o_list_table {
cursor: default !important;
}
.o_data_row,
.o_list_footer,
thead .o_list_record_selector {
@include o-sample-data-disabled;
}
}
addons/web/static/src/views/list/list_renderer.xml
+2 -2
View File
@@ -15,7 +15,7 @@
<table t-if="showTable" t-attf-class="o_list_table table table-sm position-relative mb-0 {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped table-striped'}}" t-ref="table">
<thead>
<tr>
<th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
<th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
<CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="selectAll" className="'d-flex'" onChange.bind="toggleSelection"/>
</th>
<t t-foreach="state.columns" t-as="column" t-key="column.id">
@@ -72,7 +72,7 @@
<t t-set="list" t-value="props.list"/>
</t>
</tbody>
<tfoot t-on-click="() => props.list.unselectRecord(true)" class="cursor-default" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}">
<tfoot t-on-click="() => props.list.unselectRecord(true)" class="o_list_footer cursor-default" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}">
<tr>
<td t-if="hasSelectors"/>
<t t-foreach="state.columns" t-as="column" t-key="column.id">
addons/web/static/src/views/pivot/pivot_renderer.xml
+1 -4
View File
@@ -6,10 +6,7 @@
<table
class="table-hover table table-sm table-bordered table-borderless bg-white"
t-att-class="{
o_enable_linking: !model.metaData.disableLinking,
o_sample_data_disabled: model.useSampleModel,
}"
t-att-class="{ o_enable_linking: !model.metaData.disableLinking }"
t-ref="table"
>
<thead>
addons/web/static/src/views/pivot/pivot_view.scss
+11 -2
View File
@@ -1,3 +1,4 @@
// ------- Pivot renderer -------
.o_pivot table {
width: var(--PivotView-width, auto);
@@ -8,7 +9,8 @@
}
// This can be removed after the migration to BS5.
th, td {
th,
td {
border-width: $border-width;
}
@@ -22,7 +24,7 @@
@include o-hover-text-color($body-color, $headings-color);
&:hover {
background-color: map-get($grays, '200') !important;
background-color: map-get($grays, "200") !important;
}
}
@@ -30,3 +32,10 @@
background-color: $table-hover-bg;
}
}
// ------- Sample mode -------
.o_pivot_view .o_view_sample_data {
table {
@include o-sample-data-disabled;
}
}
addons/web/static/src/views/view.scss
+17
View File
@@ -0,0 +1,17 @@
/**
* This file regroups the rules which apply on elements which are shared between
* all views.
*/
// Sample data global rules
.o_view_sample_data {
.form-check {
pointer-events: none !important;
}
.o_nocontent_help {
border-radius: 20%;
background-color: #f9f9f9;
box-shadow: 0 0 120px 100px #f9f9f9;
}
}
addons/web/static/tests/views/graph_view_tests.js
+3 -15
View File
@@ -3586,7 +3586,6 @@ QUnit.module("Views", (hooks) => {
});
QUnit.test("empty graph view with sample data", async function (assert) {
assert.expect(8);
await makeView({
serverData,
type: "graph",
@@ -3609,24 +3608,19 @@ QUnit.module("Views", (hooks) => {
assert.hasClass(target.querySelector(".o_graph_view .o_content"), "o_view_sample_data");
assert.containsOnce(target, ".o_view_nocontent");
assert.containsOnce(target, ".o_graph_canvas_container canvas");
assert.hasClass(target.querySelector(".o_graph_renderer"), "o_sample_data_disabled");
await toggleFilterMenu(target);
await toggleMenuItem(target, "False Domain");
assert.doesNotHaveClass(
target.querySelector(".o_graph_view .o_content"),
"o_view_sample_data"
);
assert.containsNone(target, ".o_view_nocontent");
assert.containsOnce(target, ".o_graph_canvas_container canvas");
assert.doesNotHaveClass(
target.querySelector(".o_graph_renderer"),
"o_sample_data_disabled"
);
});
QUnit.test("non empty graph view with sample data", async function (assert) {
assert.expect(8);
await makeView({
serverData,
type: "graph",
@@ -3647,18 +3641,12 @@ QUnit.module("Views", (hooks) => {
assert.doesNotHaveClass(target, "o_view_sample_data");
assert.containsNone(target, ".o_view_nocontent");
assert.containsOnce(target, ".o_graph_canvas_container canvas");
assert.doesNotHaveClass(
target.querySelector(".o_graph_canvas_container"),
"o_sample_data_disabled"
);
await toggleFilterMenu(target);
await toggleMenuItem(target, "False Domain");
assert.doesNotHaveClass(target, "o_view_sample_data");
assert.containsOnce(target, ".o_graph_canvas_container canvas");
assert.doesNotHaveClass(
target.querySelector(".o_graph_canvas_container"),
"o_sample_data_disabled"
);
assert.containsNone(target, ".o_view_nocontent");
});
addons/web/static/tests/views/kanban_view_tests.js
-9
View File
@@ -6681,14 +6681,9 @@ QUnit.module("Views", (hooks) => {
},
});
// Check keynav is disabled
assert.hasClass(getCard(0), "o_sample_data_disabled");
await toggleColumnActions(0);
assert.hasClass(target.querySelector(".o_kanban_toggle_fold"), "o_sample_data_disabled");
assert.containsNone(target, '[tabindex]:not([tabindex="-1"])');
assert.hasClass(document.activeElement, "o_searchview_input");
await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowDown" });
@@ -6951,10 +6946,6 @@ QUnit.module("Views", (hooks) => {
await toggleColumnActions(0);
assert.hasClass(
target.querySelector(".o_kanban_config .o_kanban_toggle_fold"),
"o_sample_data_disabled"
);
assert.hasClass(target.querySelector(".o_kanban_config .o_kanban_toggle_fold"), "disabled");
});
addons/web/static/tests/views/list_view_tests.js
+1 -8
View File
@@ -5601,7 +5601,6 @@ QUnit.module("Views", (hooks) => {
});
assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
assert.ok(target.querySelectorAll(".o_data_row").length > 0);
assert.hasClass(target.querySelectorAll(".o_data_row"), "o_sample_data_disabled");
assert.containsN(
target,
"th",
@@ -5616,7 +5615,6 @@ QUnit.module("Views", (hooks) => {
assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
assert.ok(target.querySelectorAll(".o_data_row").length > 0);
assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
assert.containsN(target, "th", 4);
});
@@ -5635,12 +5633,7 @@ QUnit.module("Views", (hooks) => {
});
// Check keynav is disabled
assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
assert.hasClass(target.querySelector(".o_list_table > tfoot"), "o_sample_data_disabled");
assert.hasClass(
target.querySelector(".o_list_table > thead .o_list_record_selector"),
"o_sample_data_disabled"
);
assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
// From search bar
assert.hasClass(document.activeElement, "o_searchview_input");
addons/web/static/tests/views/pivot_view_tests.js
-3
View File
@@ -4717,7 +4717,6 @@ QUnit.module("Views", (hooks) => {
assert.hasClass(target.querySelector(".o_pivot_view .o_content"), "o_view_sample_data");
assert.containsOnce(target, ".o_view_nocontent .abc");
assert.containsOnce(target, "table.o_sample_data_disabled");
await removeFacet(target);
@@ -4727,7 +4726,6 @@ QUnit.module("Views", (hooks) => {
);
assert.containsNone(target, ".o_view_nocontent .abc");
assert.containsOnce(target, "table");
assert.doesNotHaveClass(target.querySelector("table"), "o_sample_data_disabled");
});
QUnit.test("non empty pivot view with sample data", async function (assert) {
@@ -4756,7 +4754,6 @@ QUnit.module("Views", (hooks) => {
assert.doesNotHaveClass(target, "o_view_sample_data");
assert.containsNone(target, ".o_view_nocontent .abc");
assert.containsOnce(target, "table");
assert.doesNotHaveClass(target.querySelector("table"), "o_sample_data_disabled");
await toggleFilterMenu(target);
await toggleMenuItem(target, "Small Than 0");