[FIX] mass_mailing: increase email clients compatibility

Creating a mail template which is complex and compatible with all mail
clients is a very difficult task as each mail client supports a
different subset of basic CSS rules.

This commit fixes 3 problems which were occuring in outlook and/or
thunderbird but not in gmail:

- Main layout horizontal overflow
    -> change 24px horizontal padding of main layout to 3% and set the
       width to 94% (so that the sum is 100%)

- Fixed 600px content was full width instead
    -> Change the .o_mail_wrapper to be a <table> element instead of a
       <div> element. The table is full-width and contains one row of 3
       cells: an empty left one, a fixed 600px-width center one and an
       empty right one. This allows to have the same layout as before but
       without using the unsupported max-width css rule.

- Texts were not using the right color and font-size
    -> <p> elements were not properly inheriting the color and font-size
       properties, so force the style on <p> elements.

opw-743156

1 files changed, 16 insertions, 4 deletions

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_editor.js b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
index 4475d001e5d..5d475808589 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -273,9 +273,13 @@ snippets_editor.Class.include({
         function editable_area_is_empty($layout) {
             $layout = $layout || $editable_area.find(".o_layout");
             var $mail_wrapper = $layout.children(".o_mail_wrapper");
+            var $mail_wrapper_content = $mail_wrapper.find('.o_mail_wrapper_td');
+            if (!$mail_wrapper_content.length) { // compatibility
+                $mail_wrapper_content = $mail_wrapper;
+            }
             return (
                 $editable_area.html().trim() === ""
-                || ($layout.length > 0 && ($layout.html().trim() === "" || $mail_wrapper.length > 0 && $mail_wrapper.html().trim() === ""))
+                || ($layout.length > 0 && ($layout.html().trim() === "" || $mail_wrapper_content.length > 0 && $mail_wrapper_content.html().trim() === ""))
             );
         }
 
@@ -325,7 +329,15 @@ snippets_editor.Class.include({
             switch_images(theme_params, $editable_area);
 
             var $old_layout = $editable_area.find(".o_layout");
-            var $new_wrapper = $("<div/>", {"class": "o_mail_wrapper oe_structure"});
+            // This wrapper structure is the only way to have a responsive and
+            // centered fixed-width content column on all mail clients
+            var $new_wrapper = $('<table/>', {class: 'o_mail_wrapper'});
+            var $new_wrapper_content = $("<td/>", {class: 'o_mail_no_resize o_mail_wrapper_td oe_structure'});
+            $new_wrapper.append($('<tr/>').append(
+                $("<td/>", {class: 'o_mail_no_resize'}),
+                $new_wrapper_content,
+                $("<td/>", {class: 'o_mail_no_resize'})
+            ));
             var $new_layout = $("<div/>", {"class": "o_layout " + theme_params.className}).append($new_wrapper);
 
             var $contents;
@@ -338,11 +350,11 @@ snippets_editor.Class.include({
             }
 
             $editable_area.empty().append($new_layout);
-            $new_wrapper.append($contents);
+            $new_wrapper_content.append($contents);
             $old_layout.remove();
 
             if (first_choice) {
-                self.add_default_snippet_text_classes($new_wrapper);
+                self.add_default_snippet_text_classes($new_wrapper_content);
             }
             self.show_blocks();
         }