[IMP] web: normalize ListView's layout

This commit normalizes the ListView's layout allowing to simplify it
and reduce disparities between community and enterprise.

It also allows to remove the `list_view_extra.scss` replacement.

X-original-commit: 40228334436fd03ee251bd89c794aa439bed5839
Part-of: odoo/odoo#100759

addons/web/static/src/views/list/list_renderer.scss

@@ -11,6 +11,9 @@
 
     .o_list_table {
         background-color: $o-view-background-color;
+        // We need this to be collapse because we want to add a border on the rows
+        // for sale order/invoice lines of type section.
+        border-collapse: collapse;
 
         > thead, > tbody, > tfoot {
             > tr > :first-child {
@@ -77,6 +80,11 @@
                     }
                 }
             }
+
+            // ------- Decrease table's inner content "visual depth" -------
+            &:first-of-type > tr:first-child:not(.o_group_header) {
+                box-shadow: inset 0px 5px 10px -4px rgba(black, 0.15);
+            }
         }
         &.o_list_computing_widths {
             > tbody > tr > td {
@@ -353,4 +361,68 @@
             }
         }
     }
+
+    // ------- Force progress bars to respect table's layout -------
+    .o_progressbar_cell {
+        .o_progressbar {
+            display: table-row;
+
+            .o_progressbar_value {
+                width: 45px;
+                min-width: 45px;
+            }
+        }
+    }
+
+    .o_data_row.o_selected_row > .o_data_cell.o_required_modifier:not(.o_readonly_modifier) {
+        border-bottom: 1px solid $o-input-border-required;
+
+        &.o_invalid_cell {
+            border-bottom-color: 1px solid $danger;
+        }
+    }
+
+    /**
+    Because of border-collapse, border top and border bottom are 'merged'.
+
+    * cell border overlaps row border
+    * when there is a border collapse the first cell (e.g. A1) take over the following cell (e.g. B1 or A2)
+    ┌──┬──┐
+    │A1│B1│
+    ├──┼──┤
+    │A2│B2│
+    └──┴──┘
+
+    So we apply some rules to have the style wanted:
+    */
+    // 1. we set the global separator (gray line) of the table on the row (bottom) and not on the cell (bottom)
+    .o_data_row {
+        border-bottom-width: 1px;
+    }
+    // 2. we remove the bottom border (added by BS5) on all cells (this force to show the top border of selected cell)
+    .o_data_row > .o_data_cell {
+        border-bottom-width: 0;
+    }
+    // 3. we add only a bottom border to selected cells (this force to show the bottom border of the selected cell)
+    .o_data_row.o_data_row_selected > .o_data_cell {
+        border-bottom-width: 1px;
+    }
+
+}
+
+@include media-breakpoint-down(md) {
+    .o_data_row_selected {
+        user-select: none; // Prevent text selection when editing
+    }
+
+    .o_web_client.o_touch_device .o_content table.o_list_table.table tr > {
+        .o_list_record_selector:first-child {
+            display: none;
+
+            // first-child will be hidden so add left padding to second child
+            & + * {
+                padding-left: var(--ListRenderer-table-padding-h);
+            }
+        }
+    }
 }

addons/web/static/src/views/list/list_view_extra.scss

@@ -1,38 +0,0 @@
-
-.o_list_view {
-    tbody > tr.o_group_header {
-        background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
-
-        &:focus-within {
-           background-image: linear-gradient(to bottom, #fcfcfc, $o-form-lightsecondary);
-        }
-    }
-
-    .o_list_table .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier):not(.o_remaining_days_cell) {
-        padding: .15rem;
-        .o_input {
-            border: none;
-            padding: .15rem;
-            .o_input {
-                box-shadow: none;
-                padding: 0;
-            }
-        }
-        select.o_input {
-            padding: .25rem 0;
-        }
-        .o_field_boolean {
-            padding-top: .15rem;
-            padding-bottom: .15rem;
-        }
-        &.o_invalid_cell .o_input {
-            box-shadow: 0 0 0 1px map-get($theme-colors, 'danger');
-        }
-        &.o_list_button {
-            padding: .25rem;
-        }
-        &.o_color_cell > .o_field_widget {
-            padding: .15rem;
-        }
-    }
-}