From cedd9d11530dd8ef0c207d0fca34941df0076c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Thu, 22 Dec 2016 11:08:46 +0100
Subject: [PATCH] Improve responsive table behaviour

- Hide invisible columns
- Use all width for label and value
- Make header follow style if editable
- Center checkboxes

issue6107
review25901002
---
 src/sao.less     | 47 ++++++++++++++++++++++++++++-------------------
 src/view/tree.js | 20 ++++++++++++++++----
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/sao.less b/src/sao.less
index 7d7c65069f..aa964fc8e6 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 .navbar {
     z-index: @zindex-navbar;
@@ -118,9 +119,9 @@ button {
 
 .form {
     width: 100%;
-    & > .form-container {
+    & > table.form-container {
         width: 100%;
-        & td {
+        & > tbody > tr > td {
             padding: 1px;
         }
     }
@@ -206,6 +207,9 @@ button {
 .column-integer, .column-float, .column-timedelta {
     text-align: right;
 }
+input.column-boolean, input.selection {
+    .center-block();
+}
 
 .form-boolean, .editabletree-boolean {
     & input[type=checkbox] {
@@ -249,10 +253,10 @@ button {
     table.responsive,
     table.responsive > thead,
     table.responsive > thead > tr,
-    table.responsive > thead > tr > th,
+    table.responsive > thead > tr > th:not(.invisible),
     table.responsive > tbody,
     table.responsive > tbody > tr,
-    table.responsive > tbody > tr > td {
+    table.responsive > tbody > tr > td:not(.invisible) {
         display: block !important;
     }
     table.responsive {
@@ -285,22 +289,27 @@ button {
             border: none;
             border-bottom: 1px solid #eee;
             position: relative;
-            padding-left: 30%;
         }
-        & > tbody > tr > td:before {
-            /* Now like a table header */
-            position: absolute;
-            /* Top/left values mimic padding */
-            top: 6px;
-            left: 6px;
-            width: 30%;
-            padding-right: 10px;
-            text-align: left;
-            font-weight: bold;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            /* Label */
-            content: attr(data-title);
+        & > tbody > tr {
+            & > td:before {
+                /* Now like a table header */
+                position: absolute;
+                /* Top/left values mimic padding */
+                top: 6px;
+                left: 6px;
+                padding-right: 10px;
+                text-align: left;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                /* Label */
+                content: attr(data-title);
+            }
+            & > td.required:before {
+                font-weight: bold;
+            }
+            & > td.editable:before {
+                font-style: italic;
+            }
         }
     }
 }
diff --git a/src/view/tree.js b/src/view/tree.js
index b738561dfc..9c13ad7ba9 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -316,10 +316,10 @@
                 if (!name) {
                     return;
                 }
-                if (decoder.decode(column.attributes.tree_invisible || '0')) {
-                    column.header.hide();
-                } else if (name === this.screen.exclude_field) {
+                if ((decoder.decode(column.attributes.tree_invisible || '0')) ||
+                        (name === this.screen.exclude_field)) {
                     column.header.hide();
+                    column.header.addClass('invisible');
                 } else {
                     var inv_domain = inversion.domain_inversion(domain, name);
                     if (typeof inv_domain != 'boolean') {
@@ -328,8 +328,10 @@
                     var unique = inversion.unique_value(inv_domain)[0];
                     if (unique && jQuery.isEmptyObject(this.children_field)) {
                         column.header.hide();
+                        column.header.addClass('invisible');
                     } else {
                         column.header.show();
+                        column.header.removeClass('invisible');
                     }
                 }
             }.bind(this));
@@ -656,7 +658,8 @@
             for (var i = 0; i < this.tree.columns.length; i++) {
                 var column = this.tree.columns[i];
                 td = jQuery('<td/>', {
-                    'data-title': column.attributes.string
+                    // TODO RTL
+                    'data-title': column.attributes.string + Sao.i18n.gettext(': ')
                 }).append(jQuery('<div/>', { // For responsive min-height
                     'aria-hidden': true
                 }));
@@ -666,6 +669,13 @@
                             true));
                 if (!this.tree.editable) {
                     td.dblclick(this.switch_row.bind(this));
+                } else {
+                    if (column.attributes.required) {
+                        td.addClass('required');
+                    }
+                    if (!column.attributes.readonly) {
+                        td.addClass('editable');
+                    }
                 }
                 var widgets = this.build_widgets();
                 var table = widgets[0];
@@ -789,8 +799,10 @@
                 if ((column.header.is(':hidden') && thead_visible) ||
                         column.header.css('display') == 'none') {
                     td.hide();
+                    td.addClass('invisible');
                 } else {
                     td.show();
+                    td.removeClass('invisible');
                 }
             }
             var row_id_path = this.get_id_path();