From 53cf4b4f899a566d88a4a60f1a2ac7d751d2b3cf Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Mon, 14 Nov 2022 12:28:02 +0100 Subject: [PATCH] [FIX] web_editor: apply padding to plain text template for Apple Mail Most e-mail clients apply some padding around their e-mails, like mass_mailing does in its editor. So for the plain text email template, we mostly don't want to transfer that padding, but for Apple Mail we do want some padding lest the e-mail be crammed in a corner. The editor's padding was lost in conversion because the padding was applied to a table with `border-collapse: collapse` so it was not applied (see [mdn]). Since we can't change that property (or layouts will be broken), our remaining option is to wrap the layout table's contents in a `div` and apply the padding to it instead. Since we only want this for Apple Mail, we apply it in a nested media query, which Apple Mail is currently the only client to support. This is the only known way to target Apple Mail specifically but since e-mail clients tend to be remarkably slow at adopting new technologies, this should be safe for a while. [mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse task-3062027 closes odoo/odoo#162629 X-original-commit: bc84a40ff49cc82f1c6dd43ffddbffea6e211af0 Signed-off-by: David Monjoie (dmo) Co-authored-by: David Monjoie --- .../static/src/js/backend/convert_inline.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) 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 3dd7f92724d..3c5f9df72d9 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -57,8 +57,22 @@ function addTables($editable) { const table = _createTable(snippet.attributes); const row = document.createElement('tr'); - const col = document.createElement('td'); + let col = document.createElement('td'); row.appendChild(col); + if (snippet.classList.contains('o_basic_theme')) { + const div = document.createElement('div'); + div.classList.add('o_apple_wrapper_padding'); + col.appendChild(div); + col = div; + const style = document.createElement('style'); + // We create a nested media query because it's only supported by a + // handful of clients, including Apple Mail, and we actually only + // want this for Apple Mail. + const padding = '34px'; // This is what's needed to align the content with Apple Mail's header. + style.textContent = `@media{@media{.o_basic_theme div.o_apple_wrapper_padding{padding:${snippet.style.padding};}}}` + + `@media(min-width:961px){@media{@media{.o_basic_theme div.o_apple_wrapper_padding{padding-left:${padding};}}}}`; + div.before(style); + } table.appendChild(row); for (const child of [...snippet.childNodes]) {