[IMP] website, web_editor, mass_mailing: move margin and size options

website -> web_editor so that they are available for mass_mailing.

To allow setting margins on td elements:

As the above mentionned option allows to control the mt and mb classes
on the mass mailing items, the problem is that we would ideally want it
to be functionnal on td element as they are the main part of a mail.
As they don't support margins, there were many options to fix the
problem:
- Add more JS to place the mt and mb classes on children of td element
- Place the option on children of td element and not td element itself
but in that case, the width control of td would imply a lot of parent
option hierarchy, or the width control had also to be adapted to control
children
- Control padding instead of margin. This forces to add lots of
css rules like pt4 pt8, ... (or td.mt4, td.mt8, ...).

The last solution has been chosen. Padding is more supported than
margins in mail client anyway and the css rules will be isolated in
the mail editor anyway. Using td.mt4 instead of pt4 had the advantage
to not require any JS modification.

1 files changed, 29 insertions, 0 deletions

diff --git a/addons/mass_mailing/static/src/css/themes/theme_default.less b/addons/mass_mailing/static/src/css/themes/theme_default.less
index 55e9424001b..daf6f89521c 100644
--- a/addons/mass_mailing/static/src/css/themes/theme_default.less
+++ b/addons/mass_mailing/static/src/css/themes/theme_default.less
@@ -282,3 +282,32 @@
         width: 100%!important;
     }
 }
+
+// ===== Margins on td (replaced by paddings) =====
+.o-paddings-all(@factor: 1) {
+    .o-paddings(128, @factor);
+    .o-paddings(96, @factor);
+    .o-paddings(92, @factor);
+    .o-paddings(64, @factor);
+    .o-paddings(48, @factor);
+    .o-paddings(32, @factor);
+    .o-paddings(24, @factor);
+    .o-paddings(16, @factor);
+    .o-paddings(8, @factor);
+    .o-paddings(4, @factor);
+    .o-paddings(0, @factor);
+}
+.o-paddings(@name, @factor: 1) {
+    .o-paddings-define(@name, @factor * @name);
+}
+.o-paddings-define(@name, @size: @name) {
+    td.mt@{name} {
+        margin-top: auto!important;
+        padding-top: ~"@{size}px"!important;
+    }
+    td.mb@{name} {
+        margin-bottom: auto!important;
+        padding-bottom: ~"@{size}px"!important;
+    }
+}
+.o-paddings-all();