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

[FIX] web_editor: apply max-width to converted filler cells

Browse Source 
When we convert a Bootstrap grid to a table, we sometimes need to create
filler cells to make sure the table has the same number of columns as
the grid. A mistake creeped into that process, and we were not applying
the max-width to the filler cells.

X-original-commit: a546eb1374bbe72606203ccd60322d5063a5de38
Part-of: odoo/odoo#113784
This commit is contained in:
Antoine Guenet
2023-02-27 18:12:23 +01:00
parent 282face688
commit 00415b2cb6
2 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/backend/convert_inline.js
+1 -1
View File
@@ -225,7 +225,7 @@ function bootstrapToTable($editable) {
if (columnIndex === bootstrapColumns.length - 1) {
// We handled all the columns but there is still space
// in the row. Insert the columns and fill the row.
_applyColspan(grid[gridIndex], 12 - gridIndex);
_applyColspan(grid[gridIndex], 12 - gridIndex, containerWidth);
currentRow.append(...grid.filter(td => td.getAttribute('colspan')));
}
} else if (gridIndex + columnSize === 12) {
addons/web_editor/static/tests/convert_inline_tests.js
+9 -10
View File
@@ -52,7 +52,7 @@ QUnit.module('convert_inline', {}, function () {
assert.strictEqual(removeComments(this.$editable.html()),
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
`<td colspan="11"></td></tr></table>`,
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`,
"should have converted a 1x13 grid to an equivalent table (overflowing)");
// 1x14
@@ -62,7 +62,7 @@ QUnit.module('convert_inline', {}, function () {
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
`<td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 13)</td>` +
`<td colspan="10"></td></tr></table>`,
`<td colspan="10" style="max-width: ${round(TEST_WIDTH*10/12)}px;"></td></tr></table>`,
"should have converted a 1x14 grid to an equivalent table (overflowing)");
// 1x25
@@ -73,7 +73,7 @@ QUnit.module('convert_inline', {}, function () {
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`)
.replace(/^<table[^<]*>/, '').slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 24)</td>` +
`<td colspan="11"></td></tr></table>`,
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`,
"should have converted a 1x25 grid to an equivalent table (overflowing)");
// 1x26
@@ -85,7 +85,7 @@ QUnit.module('convert_inline', {}, function () {
.replace(/^<table[^<]*>/, '').slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 24)</td>` +
`<td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 25)</td>` +
`<td colspan="10"></td></tr></table>`,
`<td colspan="10" style="max-width: ${round(TEST_WIDTH*10/12)}px;"></td></tr></table>`,
"should have converted a 1x26 grid to an equivalent table (overflowing)");
});
QUnit.test('convert a multi-row regular grid', async function (assert) {
@@ -124,7 +124,7 @@ QUnit.module('convert_inline', {}, function () {
assert.strictEqual(removeComments(this.$editable.html()),
getRegularTableHtml(1, 12, 1, 8.33, TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(0, 12)</td>` +
`<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
`<tr><td colspan="12" style="max-width: ${round(TEST_WIDTH)}px;">(1, 0)</td></tr></table>`, // 1 col with no size == col-12
"should have converted a 2x[13,1] grid to an equivalent table (overflowing)");
@@ -134,7 +134,7 @@ QUnit.module('convert_inline', {}, function () {
assert.strictEqual(this.$editable.html(),
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(1, 12)</td>` +
`<td colspan="11"></td></tr></table>`, // 13 overflowed the row by 1 -> fill up
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr></table>`, // 13 overflowed the row by 1 -> fill up
"should have converted a 2x[1,13] grid to an equivalent table (overflowing)");
// 3x[1,13,6]
@@ -143,7 +143,7 @@ QUnit.module('convert_inline', {}, function () {
assert.strictEqual(this.$editable.html(),
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(1, 12)</td>` +
`<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
getRegularTableHtml(1, 6, 2, 16.67, TEST_WIDTH).replace(/\(0,/g, `(2,`).replace(/^<table[^<]*>/, ''),
"should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)");
@@ -153,7 +153,7 @@ QUnit.module('convert_inline', {}, function () {
assert.strictEqual(this.$editable.html(),
getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], TEST_WIDTH).slice(0, -8) +
`<tr><td colspan="1" style="max-width: ${round(TEST_WIDTH/12)}px;">(2, 12)</td>` +
`<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
`<td colspan="11" style="max-width: ${round(TEST_WIDTH*11/12)}px;"></td></tr>` + // 13 overflowed the row by 1 -> fill up
`</table>`,
"should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)");
});
@@ -320,8 +320,7 @@ QUnit.module('convert_inline', {}, function () {
this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div></div>');
convertInline.bootstrapToTable(this.$editable);
assert.strictEqual(this.$editable.html(),
getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH)
.replace(`<td colspan="2" style="max-width: ${round(TEST_WIDTH*2/12)}px;"></td>`, '<td colspan="2"></td>'),
getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH),
"should have converted a column with an offset to two columns, then completed the column");
this.$editable.html('<div class="container"><div class="row"><div class="col-6 offset-4">(0, 0)</div><div class="col-6 offset-1">(0, 1)</div></div>');