From 375e6acfd32d1fbad8546fa5029bf633bcbae770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sat, 2 Nov 2019 17:35:55 +0100
Subject: [PATCH] Replace table in cell of treeview by flex display

In order to have correct overflow ellipsis, we must stop to use table to align
affix inside a cell. Instead we use flexblox layout to expand the widget and
align the affixes.
Also as now content will be ellipsis, we must provide a title to the buttons.

issue8762
review268231002
---
 src/common.js    |  4 ++-
 src/sao.less     | 47 +++++++++++++++++++++++----------
 src/view/tree.js | 67 ++++++++++++++++++++++--------------------------
 3 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/src/common.js b/src/common.js
index 888dc785ca..767b880642 100644
--- a/src/common.js
+++ b/src/common.js
@@ -763,7 +763,9 @@
             if (el) {
                 this.el = el;
             } else {
-                this.el = jQuery('<button/>');
+                this.el = jQuery('<button/>', {
+                    title: attributes.string || '',
+                });
                 this.el.append(attributes.string || '');
                 if (this.attributes.rule) {
                     this.el.append(' ').append(jQuery('<span/>', {
diff --git a/src/sao.less b/src/sao.less
index be7cc736c8..c7c2929f63 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -258,20 +258,6 @@ img.icon {
             background-color: @state-info-bg;
         }
 
-        td.prefix {
-            padding-right: @table-cell-padding;
-            [dir="rtl"] & {
-                padding-right: 0;
-                padding-left: @table-cell-padding;
-            }
-        }
-        td.suffix {
-            padding-left: @table-cell-padding;
-            [dir="rtl"] & {
-                padding-left: 0;
-                padding-right: @table-cell-padding;
-            }
-        }
         img.column-affix, a.column-affix > img {
             width: unit(@line-height-base, em);
             height: unit(@line-height-base, em);
@@ -321,6 +307,39 @@ img.icon {
             white-space: pre;
         }
     }
+    .cell {
+        display: flex;
+        justify-content: space-between;
+
+        .widget, .widget-editable {
+            min-width: 0;
+            flex-grow: 2;
+
+            > * {
+                width: 100%;
+            }
+        }
+        .widget {
+            > * {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+       .prefix {
+            padding-right: @table-cell-padding;
+            [dir="rtl"] & {
+                padding-right: 0;
+                padding-left: @table-cell-padding;
+            }
+        }
+        .suffix {
+            padding-left: @table-cell-padding;
+            [dir="rtl"] & {
+                padding-left: 0;
+                padding-right: @table-cell-padding;
+            }
+        }
+    }
     .expander {
         cursor: pointer;
         > img {
diff --git a/src/view/tree.js b/src/view/tree.js
index 0e8b2f85e8..21d87d9c00 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -1122,13 +1122,6 @@
             }
             return this.parent_.get_id_path().concat([this.record.id]);
         },
-        build_widgets: function() {
-            var table = jQuery('<table/>');
-            table.css('width', '100%');
-            var row = jQuery('<tr/>');
-            table.append(row);
-            return [table, row];
-        },
         construct: function() {
             var el_node = this.el[0];
             while (el_node.firstChild) {
@@ -1187,10 +1180,10 @@
                         td.addClass('editable');
                     }
                 }
-                var widgets = this.build_widgets();
-                var table = widgets[0];
-                var row = widgets[1];
-                td.append(table);
+                var cell = jQuery('<div>', {
+                    'class': 'cell',
+                });
+                td.append(cell);
                 if ((i === 0) && this.children_field) {
                     this.expander = jQuery('<img/>', {
                         'tabindex': 0,
@@ -1199,28 +1192,28 @@
                     this.expander.html('&nbsp;');
                     this.expander.on('click keypress',
                             Sao.common.click_press(this.toggle_row.bind(this)));
-                    row.append(jQuery('<td/>', {
+                    cell.append(jQuery('<span/>', {
                         'class': 'expander'
-                    }).append(this.expander).css('width', 1));
+                    }).append(this.expander));
                 }
                 var j;
                 if (column.prefixes) {
                     for (j = 0; j < column.prefixes.length; j++) {
                         var prefix = column.prefixes[j];
-                        row.append(jQuery('<td/>', {
+                        cell.append(jQuery('<span/>', {
                             'class': 'prefix'
-                        }).css('width', 1));
+                        }));
                     }
                 }
-                row.append(jQuery('<td/>', {
+                cell.append(jQuery('<span/>', {
                     'class': 'widget'
                 }));
                 if (column.suffixes) {
                     for (j = 0; j < column.suffixes.length; j++) {
                         var suffix = column.suffixes[j];
-                        row.append(jQuery('<td/>', {
+                        cell.append(jQuery('<span/>', {
                             'class': 'suffix'
-                        }).css('width', 1));
+                        }));
                     }
                 }
 
@@ -1276,34 +1269,34 @@
                 for (var i = 0; i < this.tree.columns.length; i++) {
                     var column = this.tree.columns[i];
                     var td = this._get_column_td(i);
-                    var tr = td.find('tr');
-                    var cell;
+                    var cell = td.find('.cell');
+                    var item;
                     if (column.prefixes) {
                         for (var j = 0; j < column.prefixes.length; j++) {
                             var prefix = column.prefixes[j];
-                            var prefix_el = jQuery(tr.children('.prefix')[j]);
-                            cell = prefix_el.children();
-                            if (cell.length) {
-                                prefix.render(this.record, cell);
+                            var prefix_el = jQuery(cell.children('.prefix')[j]);
+                            item = prefix_el.children();
+                            if (item.length) {
+                                prefix.render(this.record, item);
                             } else {
                                 prefix_el.html(prefix.render(this.record));
                             }
                         }
                     }
-                    var widget = tr.children('.widget');
-                    cell = widget.children();
-                    if (cell.length) {
-                        column.render(this.record, cell);
+                    var widget = cell.children('.widget');
+                    item = widget.children();
+                    if (item.length) {
+                        column.render(this.record, item);
                     } else {
                         widget.html(column.render(this.record));
                     }
                     if (column.suffixes) {
                         for (var k = 0; k < column.suffixes.length; k++) {
                             var suffix = column.suffixes[k];
-                            var suffix_el = jQuery(tr.children('.suffix')[k]);
-                            cell = suffix_el.children();
-                            if (cell.length) {
-                                suffix.render(this.record, cell);
+                            var suffix_el = jQuery(cell.children('.suffix')[k]);
+                            item = suffix_el.children();
+                            if (item.length) {
+                                suffix.render(this.record, item);
                             } else {
                                 suffix_el.html(suffix.render(this.record));
                             }
@@ -1561,7 +1554,7 @@
             }.bind(this));
         },
         redraw: function(selected, expanded) {
-            var i, tr, td, widget;
+            var i, cell, widget;
             var field;
 
             Sao.View.Tree.RowEditable._super.redraw.call(this, selected,
@@ -1578,9 +1571,8 @@
             // call it when redrawing the row
             for (i = 0; i < this.tree.columns.length; i++) {
                 var column = this.tree.columns[i];
-                td = this._get_column_td(i);
-                tr = td.find('tr');
-                widget = jQuery(tr.children('.widget-editable')).data('widget');
+                cell = this._get_column_td(i).children('.cell');
+                widget = jQuery(cell.children('.widget-editable')).data('widget');
                 if (widget) {
                     var callback = display_callback(widget);
                     if (!this.record.is_loaded(column.attributes.name)) {
@@ -1647,6 +1639,7 @@
                 this.get_editable_el(td)
                     .empty()
                     .data('widget', null)
+                    .hide()
                     .parents('.treeview td').addBack().removeClass('edited');
             }.bind(this));
         },
@@ -1693,7 +1686,7 @@
             td = td || this.get_active_td();
             var editable = td.find('.widget-editable');
             if (!editable.length) {
-                editable = jQuery('<td/>', {
+                editable = jQuery('<span/>', {
                         'class': 'widget-editable'
                     }).insertAfter(td.find('.widget'));
             }