From e8124d2e38cefa0d3247165d9712bd1e2994174c Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 14 Sep 2022 08:40:39 +0000
Subject: [PATCH] [FIX] web,*: Fix style in sample data views

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>
---
 .../static/src/scss/hr_job.scss               | 22 ++++-----
 addons/web/static/src/legacy/scss/utils.scss  |  7 +++
 .../src/views/graph/graph_controller.xml      |  6 +--
 .../static/src/views/graph/graph_view.scss    | 10 +++-
 .../src/views/kanban/kanban_controller.scss   | 18 +++++++-
 .../static/src/views/kanban/kanban_record.js  |  3 --
 .../src/views/kanban/kanban_renderer.xml      |  2 +-
 .../static/src/views/list/list_renderer.js    |  3 --
 .../static/src/views/list/list_renderer.scss  | 46 ++++++++++++++-----
 .../static/src/views/list/list_renderer.xml   |  4 +-
 .../static/src/views/pivot/pivot_renderer.xml |  5 +-
 .../static/src/views/pivot/pivot_view.scss    | 13 +++++-
 addons/web/static/src/views/view.scss         | 17 +++++++
 .../static/tests/views/graph_view_tests.js    | 18 ++------
 .../static/tests/views/kanban_view_tests.js   |  9 ----
 .../web/static/tests/views/list_view_tests.js |  9 +---
 .../static/tests/views/pivot_view_tests.js    |  3 --
 17 files changed, 114 insertions(+), 81 deletions(-)
 create mode 100644 addons/web/static/src/views/view.scss

diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index ea195c06157..4bd6278d6bf 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -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;
     }
 }
 
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index d980421e297..1a7d2c0bb72 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -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
 // ----------------------------------------------------------------------------
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index 75049f4574b..ebd4e6ca7b8 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -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>
diff --git a/addons/web/static/src/views/graph/graph_view.scss b/addons/web/static/src/views/graph/graph_view.scss
index 7fb03e8eef6..32711fb1675 100644
--- a/addons/web/static/src/views/graph/graph_view.scss
+++ b/addons/web/static/src/views/graph/graph_view.scss
@@ -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;
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 86528a541fa..a6c29dc6fe6 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -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;
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index 8b8aa6f3d55..35e099adfc2 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -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");
         }
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index c8774db6b66..80bab5f5404 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -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>
diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 113c995dfff..97161e192c7 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -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");
         }
diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index d86ec693778..f86b78e1c2b 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -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;
+    }
+}
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 4ce7c457f04..693aeae2bc3 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -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">
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 7bc4418bced..37f784cfa19 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -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>
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index 85b13bd4c1c..d0128ba2630 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -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;
+    }
+}
diff --git a/addons/web/static/src/views/view.scss b/addons/web/static/src/views/view.scss
new file mode 100644
index 00000000000..4aac2a953ca
--- /dev/null
+++ b/addons/web/static/src/views/view.scss
@@ -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;
+    }
+}
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index 9ce97973443..e3c3a7bbdd6 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -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");
     });
 
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index b804530cb19..dec16634d35 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -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");
     });
 
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index e4931534194..d88d3c7e2bc 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -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");
diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js
index ab873f9fa73..52e665ac251 100644
--- a/addons/web/static/tests/views/pivot_view_tests.js
+++ b/addons/web/static/tests/views/pivot_view_tests.js
@@ -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");