From 1b324d77533d68094c4f1adaea4c98253c4ee3d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sun, 27 Sep 2020 18:15:57 +0200
Subject: [PATCH] Stick the footer of tree view to the bottom

We do not need any more to display the label of the footer as the header is
always visible.
On small screen, the footer is stick on top and the label is displayed again.
The data-title is removed because it is not used.

issue9593
review296221003
---
 CHANGELOG        |  1 +
 src/sao.less     | 32 +++++++++++++++++++++++++++-----
 src/view/tree.js |  3 +--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 8057d8208d..6c3b7983e4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,4 @@
+* Set treeview footer sticky on bottom
 * Add get, in_ and contains methods to PYSON
 * Manage deletable and writable state
 * Support e-mail template
diff --git a/src/sao.less b/src/sao.less
index 312d129f57..b2398ca135 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -346,6 +346,15 @@ img.icon {
             top: 0;
             z-index: 100;
         }
+        > tfoot > tr th {
+            background-color: @body-bg;
+            bottom: 0;
+            position: sticky;
+            z-index: 100;
+            & > label {
+                display: none;
+            }
+        }
         > tbody > tr > td {
             cursor: pointer;
             > * {
@@ -763,9 +772,22 @@ input.column-boolean {
         }
 
         tfoot {
-            > tr > td:empty,
-            > tr > td > label {
-                display: none !important;
+            background-color: @body-bg;
+            border: 1px solid @table-border-color;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            > tr {
+                & > td:empty,
+                > td > label {
+                    display: none !important;
+                }
+                & th {
+                    border: none;
+                    & > label {
+                        display: inline !important;
+                    }
+                }
             }
         }
     }
@@ -776,13 +798,13 @@ input.column-boolean {
     }
     table.responsive-header {
         > tbody > tr {
-            border: 1px solid #ccc;
+            border: 1px solid @table-border-color;
         }
         > tbody > tr > td,
         > tfoot > tr > td {
             /* Behave like a "row" */
             border: none;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid @table-border-color;
             position: relative;
         }
         > tbody > tr,
diff --git a/src/view/tree.js b/src/view/tree.js
index 75795d8b2e..7d062181b0 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -109,7 +109,7 @@
                 var sum = jQuery('<label/>', {
                     'text': label,
                 });
-                var aggregate = jQuery('<label/>', {
+                var aggregate = jQuery('<span/>', {
                     'class': 'value',
                 });
                 this.view.sum_widgets.set(column, [sum, aggregate]);
@@ -239,7 +239,6 @@
                         var sum_value = this.sum_widgets.get(column)[1];
                         total_cell.append(sum_label);
                         total_cell.append(sum_value);
-                        total_cell.attr('data-title', sum_label.text());
                     }
                     sum_row.append(total_cell);
                     column.footers.push(total_cell);