From ded7922ca00495cf5bae3e7bce9ade29008b6403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20D=C3=ADaz?= <alexandre.diaz@tecnativa.com>
Date: Wed, 11 Dec 2019 16:23:56 +0100
Subject: [PATCH] [IMP] web_widget_x2many_matrix: Sticky header, footer rows
 and main, totals columns

---
 .../src/scss/web_widget_x2many_2d_matrix.scss | 74 ++++++++++++++++---
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/web_widget_x2many_2d_matrix/static/src/scss/web_widget_x2many_2d_matrix.scss b/web_widget_x2many_2d_matrix/static/src/scss/web_widget_x2many_2d_matrix.scss
index 25382f5d1..38f826c46 100644
--- a/web_widget_x2many_2d_matrix/static/src/scss/web_widget_x2many_2d_matrix.scss
+++ b/web_widget_x2many_2d_matrix/static/src/scss/web_widget_x2many_2d_matrix.scss
@@ -1,14 +1,70 @@
-.o_field_x2many_2d_matrix .row-total {
-    font-weight: bold;
-}
+$x2many_2d_matrix_max_height: 450px;
 
-.o_form_view .o_x2many_2d_matrix.o_list_view {
-    thead > tr > th {
-        // Respect newline characters
-        white-space: pre-line;
+.o_form_view .o_field_x2many_2d_matrix {
+    .table-responsive {
+        max-height: $x2many_2d_matrix_max_height;
+        overflow-y: auto;
     }
 
-    > tfoot > tr > td {
-        padding: 0.75rem;
+    .o_x2many_2d_matrix.o_list_view {
+        > thead > tr > th {
+            white-space: pre-line;
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            background-color: $o-list-footer-bg-color;
+
+            &.total {
+                right: 0;
+            }
+        }
+
+        > tbody {
+            > tr {
+                &:nth-of-type(2n+1) td.row-total, &:nth-of-type(2n+1) td:first-child {
+                    background-color: mix(#000, #fff, 1%);
+                }
+                &:nth-of-type(2n) td.row-total, &:nth-of-type(2n) td:first-child {
+                    background-color: white;
+                }
+
+                > td {
+                    text-align: left;
+
+                    &:first-child {
+                        position: sticky;
+                        left: 0;
+                        border-right-width: 1px;
+                        border-right-color: $gray-300;
+                        border-right-style: solid;
+                        box-shadow: -1px 5px 10px $gray-300;
+                    }
+                    &.row-total {
+                        font-weight: bold;
+                        position: sticky;
+                        right: 0;
+                        border-left-width: 1px;
+                        border-left-color: $gray-300;
+                        border-left-style: solid;
+                        box-shadow: -1px 5px 10px $gray-300;
+                    }
+                }
+            }
+        }
+
+        > tfoot > tr > td {
+            padding: 0.75rem;
+            text-align: left;
+            background-color: $o-list-footer-bg-color;
+            position: sticky;
+            bottom: 0;
+
+            &.col-total {
+                right: 0;
+                border-left-width: 1px;
+                border-left-color: $gray-300;
+                border-left-style: solid;
+            }
+        }
     }
 }