pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: editable list: force min-width to some columns

Browse Source 
Columns with an absolute width (e.g. '120px') must always have a
width of at least that value. When there are records in the list
the column's widths are computed by the browser according to the
content (in readonly). However, for some field types, the rendering
in edition is a bit wider (e.g. date(time) fields because of the
caret).

This rev. sets a min-width to those fields such that the rendering
is also correct in edition.
This commit is contained in:
Aaron Bohy
2019-08-23 06:28:35 +00:00
parent f00f7bf00d
commit e35c5e044e
2 changed files with 54 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/js/views/list/list_editable_renderer.js
+28 -17
View File
@@ -933,23 +933,34 @@ ListRenderer.include({
_renderHeader: function () {
var $thead = this._super.apply(this, arguments);
if (this.editable && !this._hasVisibleRecords(this.state) && !this.columnWidths) {
// we compute the sum of the weights for each columns, excluding
// those with an absolute width.
var totalWidth = this.columns.reduce(function (acc, column) {
return acc + (column.attrs.relativeWidth || 0);
}, 0);
this.columns.forEach(function (column) {
let width;
if (column.attrs.absoluteWidth) {
width = column.attrs.absoluteWidth;
} else if (column.attrs.relativeWidth) {
width = ((column.attrs.relativeWidth / totalWidth * 100) + '%');
}
if (width) {
$thead.find('th[data-name=' + column.attrs.name + ']').css('width', width);
}
});
if (this.editable && !this.columnWidths) {
if (!this._hasVisibleRecords(this.state)) {
// we compute the sum of the weights for each columns, excluding
// those with an absolute width.
var totalWidth = this.columns.reduce(function (acc, column) {
return acc + (column.attrs.relativeWidth || 0);
}, 0);
this.columns.forEach(function (column) {
let width;
if (column.attrs.absoluteWidth) {
width = column.attrs.absoluteWidth;
} else if (column.attrs.relativeWidth) {
width = ((column.attrs.relativeWidth / totalWidth * 100) + '%');
}
if (width) {
$thead.find('th[data-name=' + column.attrs.name + ']').css('width', width);
}
});
} else {
// if there are records, we force a min-width for fields with an
// absolute width to ensure a correct rendering in edition
this.columns.forEach(function (column) {
if (column.attrs.absoluteWidth) {
let width = column.attrs.absoluteWidth;
$thead.find('th[data-name=' + column.attrs.name + ']').css('min-width', width);
}
});
}
}
if (this.addTrashIcon) {
addons/web/static/tests/views/list_tests.js
+26
View File
@@ -1605,6 +1605,32 @@ QUnit.module('Views', {
list.destroy();
});
QUnit.test('columns with an absolute width are never narrower than that width', async function (assert) {
assert.expect(2);
this.data.foo.records[0].text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
'veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ' +
'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum ' +
'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
'sunt in culpa qui officia deserunt mollit anim id est laborum';
var list = await createView({
View: ListView,
model: 'foo',
data: this.data,
arch: '<tree editable="bottom">' +
'<field name="datetime"/>' +
'<field name="int_field" width="200px"/>' +
'<field name="text"/>' +
'</tree>',
});
assert.strictEqual(list.$('th[data-name="datetime"]')[0].offsetWidth, 146);
assert.strictEqual(list.$('th[data-name="int_field"]')[0].offsetWidth, 200);
list.destroy();
});
QUnit.test('column widths are kept when editing multiple records', async function (assert) {
assert.expect(4);