From 00415b2cb6514586e02c689659a305449cff61db Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 27 Feb 2023 08:44:30 +0000 Subject: [PATCH] [FIX] web_editor: apply max-width to converted filler cells 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 --- .../static/src/js/backend/convert_inline.js | 2 +- .../static/tests/convert_inline_tests.js | 19 +++++++++---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js index 28141a8f212..53ab2e47204 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -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) { diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js index 3b13f53718f..8d4037984ba 100644 --- a/addons/web_editor/static/tests/convert_inline_tests.js +++ b/addons/web_editor/static/tests/convert_inline_tests.js @@ -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) + `(0, 12)` + - ``, + ``, "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) + `(0, 12)` + `(0, 13)` + - ``, + ``, "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(/^/, '').slice(0, -8) + `(0, 24)` + - ``, + ``, "should have converted a 1x25 grid to an equivalent table (overflowing)"); // 1x26 @@ -85,7 +85,7 @@ QUnit.module('convert_inline', {}, function () { .replace(/^/, '').slice(0, -8) + `(0, 24)` + `(0, 25)` + - ``, + ``, "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) + `(0, 12)` + - `` + // 13 overflowed the row by 1 -> fill up + `` + // 13 overflowed the row by 1 -> fill up `(1, 0)`, // 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) + `(1, 12)` + - ``, // 13 overflowed the row by 1 -> fill up + ``, // 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) + `(1, 12)` + - `` + // 13 overflowed the row by 1 -> fill up + `` + // 13 overflowed the row by 1 -> fill up getRegularTableHtml(1, 6, 2, 16.67, TEST_WIDTH).replace(/\(0,/g, `(2,`).replace(/^/, ''), "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) + `(2, 12)` + - `` + // 13 overflowed the row by 1 -> fill up + `` + // 13 overflowed the row by 1 -> fill up ``, "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('
(0, 0)
'); convertInline.bootstrapToTable(this.$editable); assert.strictEqual(this.$editable.html(), - getTableHtml([[[4, 33.33, ''], [6, 50, '(0, 0)'], [2, 16.67, '']]], TEST_WIDTH) - .replace(``, ''), + 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('
(0, 0)
(0, 1)
');