From 4897f2329685fa1eab13dafb1bfcb71cda5150ec Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 8 Aug 2022 12:56:37 +0000 Subject: [PATCH] [FIX] web_editor: properly convert incomplete Bootstrap rows When we convert Bootstrap grids to tables for e-mail compatibility, we need to complete rows whose column sizes don't add up to 12. The way it was, the last column was stretched to fill up the row, which is wrong as it can affect the width of its contents. With this commit, a new, empty column is appended to the row to fill it up without affecting the existing rows. This is a more accurate way to emulate the behavior of Flexbox. task-2936705 X-original-commit: 462b698732dbc0e71972ddbe86c687f4bb3f9492 Part-of: odoo/odoo#97962 --- .../static/src/js/backend/convert_inline.js | 8 ++-- .../static/tests/convert_inline_tests.js | 43 +++++++++++-------- 2 files changed, 29 insertions(+), 22 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 d692c25c6a0..982b34ff410 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -205,13 +205,13 @@ function bootstrapToTable($editable) { if (gridIndex + columnSize < 12) { currentCol = grid[gridIndex]; _applyColspan(currentCol, columnSize, containerWidth); + gridIndex += columnSize; 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. - grid[gridIndex].setAttribute('colspan', 12 - gridIndex); + _applyColspan(grid[gridIndex], 12 - gridIndex); currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); } - gridIndex += columnSize; } else if (gridIndex + columnSize === 12) { // Finish the row. currentCol = grid[gridIndex]; @@ -242,10 +242,8 @@ function bootstrapToTable($editable) { if (columnIndex === bootstrapColumns.length - 1 && gridIndex < 12) { // We handled all the columns but there is still space // in the row. Insert the columns and fill the row. - grid[gridIndex].setAttribute('colspan', 12 - gridIndex); - currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); - // Adapt width to colspan. _applyColspan(grid[gridIndex], 12 - gridIndex, containerWidth); + currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); } } if (currentCol) { diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js index d1769e2606b..eb4827f0783 100644 --- a/addons/web_editor/static/tests/convert_inline_tests.js +++ b/addons/web_editor/static/tests/convert_inline_tests.js @@ -42,7 +42,8 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + - `(0, 12)`, + `(0, 12)` + + ``, "should have converted a 1x13 grid to an equivalent table (overflowing)"); // 1x14 @@ -51,7 +52,8 @@ QUnit.module('convert_inline', {}, function () { assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + `(0, 12)` + - `(0, 13)`, + `(0, 13)` + + ``, "should have converted a 1x14 grid to an equivalent table (overflowing)"); // 1x25 @@ -61,7 +63,8 @@ QUnit.module('convert_inline', {}, function () { getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + - `(0, 24)`, + `(0, 24)` + + ``, "should have converted a 1x25 grid to an equivalent table (overflowing)"); // 1x26 @@ -72,7 +75,8 @@ QUnit.module('convert_inline', {}, function () { getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + `(0, 24)` + - `(0, 25)`, + `(0, 25)` + + ``, "should have converted a 1x26 grid to an equivalent table (overflowing)"); }); QUnit.test('convert a multi-row regular grid', async function (assert) { @@ -110,36 +114,41 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + - `(0, 12)` + - `(1, 0)`, + `(0, 12)` + + `` + // 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)"); // 2x[1,13] $editable = $(`
${getRegularGridHtml(2, [1, 13])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) + - `(1, 12)`, + assert.strictEqual($editable.html(), + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + + `(1, 12)` + + ``, // 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] $editable = $(`
${getRegularGridHtml(3, [1, 13, 6])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) + - `(1, 12)` + + assert.strictEqual($editable.html(), + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + + `(1, 12)` + + `` + // 13 overflowed the row by 1 -> fill up getRegularTableHtml(1, 6, 2, 16.67).replace(/\(0,/g, `(2,`).replace(/^/, ''), "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)"); // 3x[1,6,13] $editable = $(`
${getRegularGridHtml(3, [1, 6, 13])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], true).slice(0, -8) + - `(2, 12)`, + assert.strictEqual($editable.html(), + getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33]).slice(0, -8) + + `(2, 12)` + + `` + // 13 overflowed the row by 1 -> fill up + ``, "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)"); }); - QUnit.test('convert a single-row irregular grid', async function (assert) {assert.expect(4); + QUnit.test('convert a single-row irregular grid', async function (assert) { assert.expect(2); // 1x2 @@ -154,7 +163,7 @@ QUnit.module('convert_inline', {}, function () { assert.strictEqual(removeComments($editable.html()), getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], true), "should have converted a 1x3 grid to an equivalent table"); }); - QUnit.test('convert a single-row irregular overflowing grid', async function (assert) {assert.expect(4); + QUnit.test('convert a single-row irregular overflowing grid', async function (assert) { assert.expect(2); // 1x2