From 54a0b8d8530e02c14689dd8f6ee4b2f227cd5232 Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 18 Oct 2021 14:36:03 +0000 Subject: [PATCH] [FIX] web_editor: properly apply table padding to columns When converting bootstrap grids into tables, we have to move the containers' paddings into the cells, otherwise they would not render properly in all mail clients. Before this fix, verical padding was moved to each cell, which is wrong: it should be applied to the first (top) and last cell (bottom) only, which it now is. X-original-commit: 43112d417f70ac0086fbed2a704f208530d31f87 Part-of: odoo/odoo#80621 --- .../static/src/js/backend/convert_inline.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 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 ca0ca8c8fe7..8ae146c96ee 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -649,20 +649,31 @@ function formatTables($editable) { const tablePaddingRight = +$table.css('padding-right').match(rePadding)[1]; const tablePaddingBottom = +$table.css('padding-bottom').match(rePadding)[1]; const tablePaddingLeft = +$table.css('padding-left').match(rePadding)[1]; - for (const column of $table.find('td').filter((i, td) => $(td).closest('table').is($table))) { + const $columns = $table.find('td').filter((i, td) => $(td).closest('table').is($table)); + let columnIndex = 0; + for (const column of $columns) { const $column = $(column); if ($column.css('padding')) { - const columnPaddingTop = +$column.css('padding-top').match(rePadding)[1]; const columnPaddingRight = +$column.css('padding-right').match(rePadding)[1]; - const columnPaddingBottom = +$column.css('padding-bottom').match(rePadding)[1]; const columnPaddingLeft = +$column.css('padding-left').match(rePadding)[1]; $column.css({ - 'padding-top': columnPaddingTop + tablePaddingTop, 'padding-right': columnPaddingRight + tablePaddingRight, - 'padding-bottom': columnPaddingBottom + tablePaddingBottom, 'padding-left': columnPaddingLeft + tablePaddingLeft, }); + if (!columnIndex) { + const columnPaddingTop = +$column.css('padding-top').match(rePadding)[1]; + $column.css({ + 'padding-top': columnPaddingTop + tablePaddingTop, + }); + } + if (columnIndex === $columns.length - 1) { + const columnPaddingBottom = +$column.css('padding-bottom').match(rePadding)[1]; + $column.css({ + 'padding-bottom': columnPaddingBottom + tablePaddingBottom, + }); + } } + columnIndex += 1; } $table.css('padding', ''); }