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,3 +1,4 @@
+* Hide empty cell on small screen
 * Support validate attribute of wizard's Button
 * Add infinite scroll
 

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 */

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;