changeset 2de13120296f in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=2de13120296f
description:
Improve column sizing
We set a minimal width on the treeview table (min-width on td has an
undefined
behavior) by summing the default width of each column.
We add a fake scrollbar on top of the treeview to ensure the user will
see that
there are more column to see. The fake scrollbar is a div with the same
minimal
width and its parent as the scroll value synchronized with the scroll
of the
treeview div.
The minimal widths are removed on extra small screen if the treeview is
responsive because the table has 100% of the width.
To have the minimal width working also on the xxx2Many view inside a
form, we
must set a maximum width to the cell. As this width must be expressed in
relative size (not in pixel to support resizing), we express them as
percentage of the width of the viewport. The percentage is computed
from the
percentage width already computed but also rated with all the
percentage width
of the parent cell. We also remove the maximum percentage of the
offcanvas
size. This does not give the exact maximal width but it is close enough
to have
a correct behavior no matter the size of the screen.
issue8308
review259411002
diffstat:
CHANGELOG | 2 ++
src/sao.less | 15 +++++++++++++++
src/view/form.js | 15 +++++++++++++++
src/view/tree.js | 36 ++++++++++++++++++++++++++----------
4 files changed, 58 insertions(+), 10 deletions(-)
diffs (164 lines):
diff -r 64754a696aff -r 2de13120296f CHANGELOG
--- a/CHANGELOG Mon Jul 08 21:26:20 2019 +0200
+++ b/CHANGELOG Sat Jul 13 00:20:31 2019 +0200
@@ -1,3 +1,5 @@
+* Support expand on column
+* Set minimal width for columns
* Order Dict keys by sequence
* Support relation fields in domain parser
* Add view modified
diff -r 64754a696aff -r 2de13120296f src/sao.less
--- a/src/sao.less Mon Jul 08 21:26:20 2019 +0200
+++ b/src/sao.less Sat Jul 13 00:20:31 2019 +0200
@@ -555,6 +555,11 @@
}
@media screen and (max-width: @screen-xs-max) {
+ .responsive.scrollbar {
+ > div {
+ min-width: unset !important;
+ }
+ }
table.responsive,
table.responsive > thead,
table.responsive > thead > tr,
@@ -568,6 +573,7 @@
display: block !important;
}
table.responsive {
+ min-width: unset !important;
/* Hide table headers (but not display: none; for accessiblity) */
> thead > tr {
position: absolute;
@@ -576,6 +582,7 @@
}
> thead > tr,
> tbody > tr > td {
+ max-width: unset !important;
text-align: left !important;
text-align: start !important;
/* Force height to empty content */
@@ -647,6 +654,14 @@
z-index: 2000;
}
+.scrollbar {
+ overflow: auto;
+
+ > div {
+ height: 1rem;
+ }
+}
+
.infobar {
position: fixed;
top: 0px;
diff -r 64754a696aff -r 2de13120296f src/view/form.js
--- a/src/view/form.js Mon Jul 08 21:26:20 2019 +0200
+++ b/src/view/form.js Sat Jul 13 00:20:31 2019 +0200
@@ -514,6 +514,15 @@
var col = this.col;
var has_expand = false;
var i, j;
+
+ var parent_max_width = 1;
+ this.el.parents('td').each(function() {
+ var width = this.style.width;
+ if (width.endsWith('%')) {
+ parent_max_width *= parseFloat(width.slice(0, -1), 10) /
100;
+ }
+ });
+
var get_xexpands = function(row) {
row = jQuery(row);
var xexpands = [];
@@ -592,6 +601,12 @@
width += widths[i + j] || 0;
}
cell.css('width', width + '%');
+ if (0 < width) {
+ // 25 is the percentage of offcanvas on md
+ cell.css(
+ 'max-width',
+ ((width * parent_max_width) - 25) + 'vw');
+ }
} else {
cell.css('width', '');
}
diff -r 64754a696aff -r 2de13120296f src/view/tree.js
--- a/src/view/tree.js Mon Jul 08 21:26:20 2019 +0200
+++ b/src/view/tree.js Sat Jul 13 00:20:31 2019 +0200
@@ -82,9 +82,23 @@
this.columns = [];
this.selection_mode = (screen.attributes.selection_mode ||
Sao.common.SELECTION_MULTIPLE);
- this.el = jQuery('<div/>', {
+ this.el = jQuery('<div/>');
+ this.scrollbar = jQuery('<div/>')
+ .appendTo(jQuery('<div/>', {
+ 'class': 'scrollbar responsive',
+ }).appendTo(this.el));
+ this.treeview = jQuery('<div/>', {
'class': 'treeview responsive'
- });
+ }).appendTo(this.el);
+
+ // Synchronize both scrollbars
+ this.treeview.scroll(function() {
+ this.scrollbar.parent().scrollLeft(this.treeview.scrollLeft());
+ }.bind(this));
+ this.scrollbar.parent().scroll(function() {
+ this.treeview.scrollLeft(this.scrollbar.parent().scrollLeft());
+ }.bind(this));
+
this.expanded = {};
Sao.View.Tree._super.init.call(this, view_id, screen, xml);
@@ -98,7 +112,7 @@
if (this.editable) {
this.table.addClass('table-bordered');
}
- this.el.append(this.table);
+ this.treeview.append(this.table);
var colgroup = jQuery('<colgroup/>').appendTo(this.table);
var col = jQuery('<col/>', {
'class': 'selection-state',
@@ -358,6 +372,7 @@
var inversion = new Sao.common.DomainInversion();
domain = inversion.simplify(domain);
var decoder = new Sao.PYSON.Decoder(this.screen.context);
+ var min_width = 0;
this.columns.forEach(function(column) {
visible_columns += 1;
var name = column.attributes.name;
@@ -403,22 +418,23 @@
'biginteger': 6,
'float': 8,
'numeric': 8,
- 'timedelta': 10,
- 'date': 10,
- 'datetime': 10,
- 'time': 10,
'selection': 9,
- 'char': 10,
'one2many': 5,
'many2many': 5,
'boolean': 2,
'binary': 20,
}[column.attributes.widget] || 10;
- width = width * 100 + '%';
- column.col.css('width', width);
+ var factor = 1;
+ if (column.attributes.expand) {
+ factor += parseInt(column.attributes.expand, 10);
+ }
+ column.col.css('width', width * 100 * factor + '%');
column.col.show();
+ min_width += width * 10;
}
}.bind(this));
+ this.table.css('min-width', min_width + 'px');
+ this.scrollbar.css('min-width', min_width + 'px');
this.tbody.find('tr.more-row > td').attr(
'colspan', visible_columns);
