[IMP] web_editor, *: change height/margin system to padding system

* web, website, mass_mailing

Before this commit, the editor allowed defining the margin of some
elements and the height of some elements. There were three main
problems with this system:

1) When an user dragged the arrow, he often expected to change the
   size of the element while he was in fact changing the margin

2) When changing the margin, you increase the space between two
   elements but with a white space (while most users want a space
   with the same color of the block they are resizing = padding)

3) When changing the height, the user was able to hide snippet parts
   and the height was not consistent accross screen sizes

Now, the only thing you can edit is padding. There is only one arrow
for each direction, which allows increasing spacing and consistent
dimension at the same time.
The only feature that is lost with this change is the ability to
control vertical alignement of colored columns. This is not a problem
as colored columns are rare in our current snippets and there still
have the possibility to add margin classes by hand if necessary (there
are also plans to control vertical alignement another way).

Note: margin classes are kept for compatibility.

2 files changed, 28 insertions, 44 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 7705e62fa9e..e88d77864d2 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_editor.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_editor.js
@@ -12,32 +12,35 @@ var $editable_area = $('#editable_area');
 var odoo_top = window.top.odoo;
 
 // Snippet option for resizing  image and column width inline like excel
-options.registry["width-x"] = options.Class.extend({
+options.registry.sizing_x = options.Class.extend({
+    /**
+     * @override
+     */
     start: function () {
-        this.container_width = this.$target.parent().closest("td, table, div").width();
+        var def = this._super.apply(this, arguments);
+
+        this.containerWidth = this.$target.parent().closest("td, table, div").width();
 
         var self = this;
         var offset, sib_offset, target_width, sib_width;
-        var $body = $(document.body);
-        this.is_image = false;
-        this._super.apply(this, arguments);
 
-        this.$overlay.find(".oe_handle.e, .oe_handle.w").removeClass("readonly");
-        if (this.$target.is("img")) {
-            this.$overlay.find(".oe_handle.w").addClass("readonly");
+        this.$overlay.find(".o_handle.e, .o_handle.w").removeClass("readonly");
+        this.isIMG = this.$target.is("img");
+        if (this.isIMG) {
+            this.$overlay.find(".o_handle.w").addClass("readonly");
             this.$overlay.find(".oe_snippet_move, .oe_snippet_clone").addClass("hidden");
-            this.is_image=true;
         }
 
-        this.$overlay.find(".oe_handle").on('mousedown', function (event) {
+        var $body = $(document.body);
+        this.$overlay.find(".o_handle").on('mousedown', function (event) {
             event.preventDefault();
             var $handle = $(this);
             var compass = false;
 
-            _.each(['n', 's', 'e', 'w' ], function (handler) {
+            _.each(['n', 's', 'e', 'w'], function (handler) {
                 if ($handle.hasClass(handler)) { compass = handler; }
             });
-            if (self.is_image) { compass = "image"; }
+            if (self.isIMG) { compass = "image"; }
 
             $body.on("mousemove.mass_mailing_width_x", function (event) {
                 event.preventDefault();
@@ -59,11 +62,12 @@ options.registry["width-x"] = options.Class.extend({
                     self.change_width(event, self.$target, target_width, offset, true);
                 }
             });
-
-            $body.one("mouseup", function(){
+            $body.one("mouseup", function () {
                 $body.off('.mass_mailing_width_x');
             });
         });
+
+        return def;
     },
     change_width: function (event, target, target_width, offset, grow) {
         target.css("width", grow ? (event.pageX - offset) : (offset + target_width - event.pageX));
@@ -73,13 +77,13 @@ options.registry["width-x"] = options.Class.extend({
         return parseInt($(el).css("width"), 10);
     },
     get_max_width: function ($el) {
-        return this.container_width - _.reduce(_.map($el.siblings(), this.get_int_width), function (memo, w) { return memo + w; });
+        return this.containerWidth - _.reduce(_.map($el.siblings(), this.get_int_width), function (memo, w) { return memo + w; });
     },
     onFocus: function () {
         this._super.apply(this, arguments);
 
         if (this.$target.is("td, th")) {
-            this.$overlay.find(".oe_handle.e, .oe_handle.w").toggleClass("readonly", this.$target.siblings().length === 0);
+            this.$overlay.find(".o_handle.e, .o_handle.w").toggleClass("readonly", this.$target.siblings().length === 0);
         }
     },
 });
@@ -407,7 +411,7 @@ if ($editable_area.html().indexOf('on_change_model_and_list') !== -1) {
 // Adding compatibility for the outlook compliance of mailings.
 // Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
 options.registry.background.include({
-    start: function() {
+    start: function () {
         this._super();
         var $table_target = this.$target.find('table:first');
         if ($table_target) {
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 cfd1264e0c7..0c7510928f5 100644
--- a/addons/mass_mailing/static/src/less/themes/theme_default.less
+++ b/addons/mass_mailing/static/src/less/themes/theme_default.less
@@ -322,31 +322,11 @@
     }
 }
 
-// ===== 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);
+// Compatibility: mb/mt classes on <td/> elements were interpreted as paddings
+// instead of margins before the introduction of pb/pt classes. As thoses mb/mt
+// classes may remain on clients' templates, <td/> are forced to 0 margin to
+// be sure (normally <td/> should not consider margin properties but some mail
+// clients might make the mistake to do so).
+td[class*="mb"], td[class*="mt"] {
+    margin: 0!important;
 }
-.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();