tryton-do/tryton
2
0 Fork 0
Code Issues Pull Requests 2 Actions 2 Packages Projects Releases Wiki Activity

Replace table in cell of treeview by flex display

Browse Source 
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
This commit is contained in:
Cédric Krier committed 2019-11-02 17:35:55 +01:00
1 parent 37c4ac36b8
commit 375e6acfd3
3 files changed
+66 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/common.js
+3 -1
View File
@@ -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/>', {
src/sao.less
+33 -14
View File
@@ -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 {
src/view/tree.js
+30 -37
View File
@@ -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'));
}