From 070951311f435a90f4714c81cdfa13ebd463f18e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sat, 7 Dec 2019 15:42:25 +0100
Subject: [PATCH] Do not display empty cell nor button label in responsive tree

This takes spaces but it does not give any information to the user.
It is better to use this space to show more records.

issue8765
review278041002
---
 CHANGELOG        |  1 +
 src/sao.less     |  7 ++++++-
 src/view/tree.js | 19 ++++++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index 35fd8d7d65..b41b20af2b 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,4 @@
+* Hide empty cell on small screen
 * Support validate attribute of wizard's Button
 * Add infinite scroll
 
diff --git a/src/sao.less b/src/sao.less
index fa033f79d9..7bc2e4a3ef 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -621,6 +621,11 @@ input.column-boolean {
     table.responsive > tfoot > tr > td:not(.invisible) {
         display: block !important;
     }
+    table.responsive > thead > tr > th.invisible,
+    table.responsive > tbody > tr > td.invisible,
+    table.responsive > tfoot > tr > td.invisible {
+        display: none;
+    }
     table.responsive {
         min-width: unset !important;
         /* Hide table headers (but not display: none; for accessiblity) */
@@ -675,7 +680,7 @@ input.column-boolean {
         }
         > tbody > tr,
         > tfoot > tr {
-            > td:before {
+            > td[data-title]:before {
                 /* Now like a table header */
                 position: absolute;
                 /* Top/left values mimic padding */
diff --git a/src/view/tree.js b/src/view/tree.js
index 7244609cce..185fb08a73 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -1179,11 +1179,16 @@
 
             for (var i = 0; i < this.tree.columns.length; i++) {
                 var column = this.tree.columns[i];
-                td = jQuery('<td/>', {
-                    'data-title': column.attributes.string + Sao.i18n.gettext(': ')
-                }).append(jQuery('<span/>', { // For responsive min-height
-                    'aria-hidden': true
-                }));
+                if (column instanceof Sao.View.Tree.ButtonColumn) {
+                    td = jQuery('<td>');
+                } else {
+                    td = jQuery('<td/>', {
+                        'data-title': column.attributes.string +
+                        Sao.i18n.gettext(': ')
+                    }).append(jQuery('<span/>', { // For responsive min-height
+                        'aria-hidden': true
+                    }));
+                }
                 td.on('click keypress', {'index': i}, on_click);
                 if (!this.tree.editable) {
                     td.dblclick(this.switch_row.bind(this));
@@ -1327,6 +1332,10 @@
                         td.show();
                         td.removeClass('invisible');
                     }
+                    if (!td.find('.widget,.widget-editable,.prefix,.suffix')
+                        .find(':visible').length) {
+                        td.addClass('invisible');
+                    }
                 }
             }
             this._drawed_record = this.record.identity;