[MERGE] Forward-port saas-15 up to 878fbc75ff9ebade92f43748500e64350367a824

2 files changed, 44 insertions, 15 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();
         }
diff --git a/addons/mass_mailing/static/src/less/themes/theme_default.less b/addons/mass_mailing/static/src/less/themes/theme_default.less
index 98f86421000..74f71191db2 100644
--- a/addons/mass_mailing/static/src/less/themes/theme_default.less
+++ b/addons/mass_mailing/static/src/less/themes/theme_default.less
@@ -49,27 +49,36 @@
 
 // ===== Layout =====
 .o_layout {
-    font-family: @o_mm_def_font;
-    color: lighten(@o_mm_def_text_color, 20%);
     overflow: hidden;
-    width: 100%;
+    width: 94%;
     min-height: 100%;
     background-color: @o_mm_def_color_alpha;
-    padding: 24px 0;
+    padding: 24px 3%;
+
+    // Forces on <p/> elements as several mail clients does not correctly
+    // inherit font properties
+    &, p {
+        font-family: @o_mm_def_font;
+        color: lighten(@o_mm_def_text_color, 20%);
+    }
 
     > .o_mail_wrapper {
         width: 100%;
-        max-width: @o_mm_def_body_width;
-        margin: auto;
-        border: 1px solid darken(@o_mm_def_color_alpha, 2%);
-        background-color: @o_mm_def_color_beta;
+        border-collapse: separate; // Allow the first and last td to have the
+                                   // same width
+
+        .o_mail_wrapper_td {
+            width: @o_mm_def_body_width;
+            border: 1px solid darken(@o_mm_def_color_alpha, 2%);
+            background-color: @o_mm_def_color_beta;
+        }
     }
 }
 
 // ===== Snippets (general) =====
 .o_mail_snippet_general {
     width: 100%;
-    max-width: @o_mm_def_body_width;
+    max-width: @o_mm_def_body_width; // should not be necessary thanks to mail wrapper
     margin: 0 auto;
 
     h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -157,7 +166,11 @@
 }
 
 .o_mail_block_two_cols, .o_mail_block_three_cols {
-    font-size: small;
+    // Forces on <p/> elements as several mail clients does not correctly
+    // inherit font properties
+    &, p {
+        font-size: small;
+    }
 
     .o_mail_col_container {
         padding: 10px 20px;
@@ -169,7 +182,11 @@
 }
 
 .o_mail_block_image_text, .o_mail_block_text_image {
-    font-size: small;
+    // Forces on <p/> elements as several mail clients does not correctly
+    // inherit font properties
+    &, p {
+        font-size: small;
+    }
 }
 
 .o_mail_block_event {