[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
This commit is contained in:
Antoine Guenet
@@ -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) {
|
||||
|
||||
@@ -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) +
|
||||
`<tr><td colspan="12">(0, 12)</td></tr></table>`,
|
||||
`<tr><td colspan="1">(0, 12)</td>` +
|
||||
`<td colspan="11"></td></tr></table>`,
|
||||
"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) +
|
||||
`<tr><td colspan="1">(0, 12)</td>` +
|
||||
`<td colspan="11">(0, 13)</td></tr></table>`,
|
||||
`<td colspan="1">(0, 13)</td>` +
|
||||
`<td colspan="10"></td></tr></table>`,
|
||||
"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(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
`<tr><td colspan="12">(0, 24)</td></tr></table>`,
|
||||
`<tr><td colspan="1">(0, 24)</td>` +
|
||||
`<td colspan="11"></td></tr></table>`,
|
||||
"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(/^<table[^<]*>/, '').slice(0, -8) +
|
||||
`<tr><td colspan="1">(0, 24)</td>` +
|
||||
`<td colspan="11">(0, 25)</td></tr></table>`,
|
||||
`<td colspan="1">(0, 25)</td>` +
|
||||
`<td colspan="10"></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) {
|
||||
@@ -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) +
|
||||
`<tr><td colspan="12">(0, 12)</td></tr>` +
|
||||
`<tr><td colspan="12">(1, 0)</td></tr></table>`,
|
||||
`<tr><td colspan="1">(0, 12)</td>` +
|
||||
`<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
|
||||
`<tr><td colspan="12">(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)");
|
||||
|
||||
// 2x[1,13]
|
||||
$editable = $(`<div>${getRegularGridHtml(2, [1, 13])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual(removeComments($editable.html()),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) +
|
||||
`<tr><td colspan="12">(1, 12)</td></tr></table>`,
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) +
|
||||
`<tr><td colspan="1">(1, 12)</td>` +
|
||||
`<td colspan="11"></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]
|
||||
$editable = $(`<div>${getRegularGridHtml(3, [1, 13, 6])}</div>`);
|
||||
convertInline.bootstrapToTable($editable);
|
||||
assert.strictEqual(removeComments($editable.html()),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) +
|
||||
`<tr><td colspan="12">(1, 12)</td></tr>` +
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) +
|
||||
`<tr><td colspan="1">(1, 12)</td>` +
|
||||
`<td colspan="11"></td></tr>` + // 13 overflowed the row by 1 -> fill up
|
||||
getRegularTableHtml(1, 6, 2, 16.67).replace(/\(0,/g, `(2,`).replace(/^<table[^<]*>/, ''),
|
||||
"should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)");
|
||||
|
||||
// 3x[1,6,13]
|
||||
$editable = $(`<div>${getRegularGridHtml(3, [1, 6, 13])}</div>`);
|
||||
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) +
|
||||
`<tr><td colspan="12">(2, 12)</td></tr></table>`,
|
||||
assert.strictEqual($editable.html(),
|
||||
getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33]).slice(0, -8) +
|
||||
`<tr><td colspan="1">(2, 12)</td>` +
|
||||
`<td colspan="11"></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)");
|
||||
});
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user