[IMP] web_editor: improve margins system UX

- Clearly show margins' size on editing

- Top margin icons/cursors: by an user point of view, adding a
  margin-top will move the content 'down', so change handler's icons
  and cursors accordingly

- Highlight handles during editing and if previously edited

- Vertically center handle's icon if enough room is available

2 files changed, 120 insertions, 35 deletions

diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index c3c97505305..68301312cd5 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -329,6 +329,8 @@ odoo.define('web_editor.snippets.options', function (require) {
                     if (change) {
                         self.on_resize(compass, beginClass, current);
                         self.buildingBlock.cover_target(self.$overlay, self.$target);
+                        self.adapt_margin_preview_size();
+                        $handle.addClass('oe_handle_change');
                     }
                 };
 
@@ -343,10 +345,13 @@ odoo.define('web_editor.snippets.options', function (require) {
                         }
                     },0);
                     self.$target.removeClass("resize_editor_busy");
+                    $handle.removeClass('oe_handle_change');
 
                     if (compass === "size") {
                         $fixed_size.addClass("active");
                         $auto_size.removeClass("active");
+                    } else {
+                        self._highlight_margins_preview(300);
                     }
                 };
                 $body.mousemove(body_mousemove);
@@ -372,10 +377,14 @@ odoo.define('web_editor.snippets.options', function (require) {
         on_focus : function () {
             this._super();
             this.change_cursor();
+            this.adapt_margin_preview_size();
         },
 
         change_cursor : function () {
             var _class = this.$target.attr("class") || "";
+            var $handle_s = this.$overlay.find('.oe_handle.s');
+            var $handle_n = this.$overlay.find('.oe_handle.n');
+            var $handle_w = this.$overlay.find('.oe_handle.w');
 
             var col = _class.match(/col-md-([0-9-]+)/i);
             col = col ? +col[1] : 0;
@@ -387,20 +396,44 @@ odoo.define('web_editor.snippets.options', function (require) {
             if (col+offset >= 12) overlay_class+= " block-e-right";
             if (col === 1) overlay_class+= " block-w-right block-e-left";
             if (offset === 0) overlay_class+= " block-w-left";
+            $handle_w.toggleClass('oe_handle_centered', offset > 0).toggleClass('o_handle_edited', offset >= 1 );
 
             var mb = _class.match(/mb([0-9-]+)/i);
             mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom'));
             if (mb >= 128) overlay_class+= " block-s-bottom";
             else if (!mb) overlay_class+= " block-s-top";
+            $handle_s.toggleClass('oe_handle_centered', mb >= 32).toggleClass('o_handle_edited', mb > 0 );
 
             var mt = _class.match(/mt([0-9-]+)/i);
             mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top'));
             if (mt >= 128) overlay_class+= " block-n-top";
             else if (!mt) overlay_class+= " block-n-bottom";
+            $handle_n.toggleClass('oe_handle_centered', mt >= 32).toggleClass('o_handle_edited', mt > 0 );
 
             this.$overlay.attr("class", overlay_class);
         },
 
+        adapt_margin_preview_size : function () {
+            var self = this,
+                ml = this.$target.css('margin-left');
+            _.each(this.$overlay.find(".oe_handle.n, .oe_handle.s"), function (handle) {
+                var $handle = $(handle);
+                var direction = $handle.hasClass('n') ? 'top': 'bottom';
+                $handle.height(self.$target.css('margin-' + direction ));
+            });
+            this.$overlay.find(".oe_handle.w").css({
+                width: ml,
+                left: '-' + ml
+            });
+        },
+
+        _highlight_margins_preview: function (timing) {
+            var handlers = this.$overlay.find(".oe_handle.n, .oe_handle.s, .oe_handle.w");
+            handlers.addClass('oe_handle_active').delay(timing).queue(function(){
+                handlers.removeClass('oe_handle_active').dequeue();
+            });
+        },
+
         /* on_resize
         *  called when the box is resizing and the class change, before the cover_target
         *  @compass: resize direction : 'n', 's', 'e', 'w'
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index 3ba3621db9f..1e44204c906 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -299,7 +299,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // MANIPULATORS
 #oe_manipulators {
-    @odoo-handle-edge-size: 8px;
+    @odoo-handle-edge-size: 1px;
     @odoo-handle-border-width: 1px;
 
     // SNIPPET MANIPULATORS
@@ -534,34 +534,78 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         // HANDLES
         > .oe_handles {
             @o-handles-offset-to-hide: 10000px;
+            @o-handless-accent-color: #00e2ff;
             .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
 
-            > .oe_handle {
-                @o-handle-size: 18px;
+            &:hover > .oe_handle {
+                background-color: fade(@o-handless-accent-color, 5%);
+            }
 
+            > .oe_handle {
+                @o-handle-btn-size: 18px;
                 opacity: 0.5;
                 .o-transition(opacity, 400ms);
-                &:hover {
-                    opacity: 0.9;
+                border: 0 solid @o-handless-accent-color;
+
+                // MARGINS PREVIEW
+                &.n, &.s, &.w {
+                    position: relative;
+                    .o-transition(background, 0.3s);
+
+                    &.oe_handle_change, &.oe_handle_active, &:hover {
+                        background-color: fade(@o-handless-accent-color, 20%);
+                    }
+
+                    &.o_handle_edited {
+                        opacity: 0.9;
+
+                        &:after {
+                            color: white;
+                            border-color: darken(@o-handless-accent-color, 10%);
+                            background-color: darken(@o-handless-accent-color, 20%);
+                        }
+                    }
+
+                    &.oe_handle_change, &:hover {
+                        opacity: 1;
+
+                        &:before {
+                            .o-position-absolute(0, @left:50%);
+                            width: 1px;
+                            height: 100%;
+                            margin-left: -1px;
+                            background-color: fade(@o-handless-accent-color, 50%);
+                            content:'';
+                        }
+
+                        &.w:before {
+                            .o-position-absolute(50%,@left: 0);
+                            width: 100%;
+                            height: 1px;
+                        }
+
+                        &:after {
+                            border-color: darken(@o-handless-accent-color, 10%);
+                            background-color: darken(@o-handless-accent-color, 20%);
+                        }
+                    }
                 }
-                border: 0 dashed black;
 
                 &:after {
                     display: block;
-                    width: @o-handle-size;
-                    height: @o-handle-size;
+                    width: @o-handle-btn-size;
+                    height: @o-handle-btn-size;
                     border: solid 1px rgba(0, 0, 0, 0.2);
-                    line-height: @o-handle-size - 2;
+                    line-height: @o-handle-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
                     background-color: @o-we-color-light;
                     color: @o-we-color-text-light;
                 }
-                &:hover:after {
-                    background-color: @o-we-color-dark;
-                    color: white;
-                    box-shadow: 0 0 5px 3px rgba(255,255,255,0.7);
+                &:hover {
+                    opacity: 0.9;
                 }
+
                 &.w:after, &.e:after {
                     content: "\f07e";
                 }
@@ -570,14 +614,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 }
 
                 &.w {
-                    border-left-width: @odoo-handle-border-width;
+                    border-width: @odoo-handle-border-width;
+                    border-right-width: 0;
                     cursor: e-resize;
                     width: @odoo-handle-edge-size;
                     .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
 
                     &:after {
-                        .o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width);
-                        margin-top: -@o-handle-size/2;
+                        .o-position-absolute(@top: 50%, @left: 50%);
+                        margin-top: -@o-handle-btn-size/2;
+                    }
+                    &.oe_handle_centered:after {
+                        margin-left: -@o-handle-btn-size/2;
                     }
                 }
                 &.e {
@@ -588,29 +636,33 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
                     &:after {
                         .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
-                        margin-top: -@o-handle-size/2;
+                        margin-top: -@o-handle-btn-size/2;
                     }
                 }
                 &.n {
                     border-top-width: @odoo-handle-border-width;
-                    cursor: s-resize;
-                    height: @odoo-handle-edge-size;
                     .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width);
-                        margin-left: -@o-handle-size/2;
+                        .o-position-absolute(@left: 50%, @top: 50%);
+                        margin-left: -@o-handle-btn-size/2;
                     }
                 }
                 &.s {
                     border-bottom-width: @odoo-handle-border-width;
-                    cursor: n-resize;
-                    height: @odoo-handle-edge-size;
                     .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width);
-                        margin-left: -@o-handle-size/2;
+                        .o-position-absolute(@left: 50%, @bottom: 50%);
+                        margin-left: -@o-handle-btn-size/2;
+                    }
+                }
+                &.n, &.s {
+                    cursor: ns-resize;
+
+                    &.oe_handle_centered:after {
+                        .o-position-absolute(@left: 50%, @top: 50%);
+                        margin-top:  -@o-handle-btn-size/2;
                     }
                 }
 
@@ -689,17 +741,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         &.block-e-left.block-e-right .e:after {
             display: none !important;
         }
-        &.block-s-top .s:after {
-            content: "" !important;
-        }
-        &.block-s-bottom .s:after {
-            content: "" !important;
-        }
-        &.block-n-top .n:after {
-            content: "" !important;
+        &.block-s-bottom .s, &.block-n-top .n {
+            cursor: n-resize!important;
+            &:after {
+                content: "\f062" !important;
+            }
         }
-        &.block-n-bottom .n:after {
-            content: "" !important;
+        &.block-s-top .s, &.block-n-bottom .n {
+            cursor: s-resize!important;
+            &:after {
+                content: "\f063" !important;
+            }
         }
     }
 }