From fb6b7013c9bfaef5b4de86aa3fb6500c6d2d7ca2 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 9 Sep 2019 10:20:20 +0000
Subject: [PATCH] [REF] web_editor: transform border-like move handles into
 button handle

Part of https://github.com/odoo/odoo/pull/36515
---
 .../static/src/scss/wysiwyg_snippets.scss     | 63 ++++++++++---------
 addons/web_editor/static/src/xml/snippets.xml |  7 +--
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d20ea1ccf6a..40e3aca0263 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -467,31 +467,8 @@ body.editor_enable.editor_has_snippets {
             @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0);
             border-color: inherit;
 
-            > .o_handle, > .o_move_handle {
-                position: relative;
-
-                &.w {
-                    @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0);
-                    width: $o-we-handle-edge-size;
-                }
-
-                &.e {
-                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto);
-                    width: $o-we-handle-edge-size;
-                }
-
-                &.n {
-                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0);
-                    height: $o-we-handle-edge-size;
-                }
-
-                &.s {
-                    @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0);
-                    height: $o-we-handle-edge-size;
-                }
-            }
-
             > .o_handle {
+                position: relative;
                 border: 0 dashed transparent;
                 border-color: inherit;
                 transition: background 300ms ease 0s;
@@ -507,6 +484,8 @@ body.editor_enable.editor_has_snippets {
                 }
 
                 &.w {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0);
+                    width: $o-we-handle-edge-size;
                     border-width: $o-we-handle-border-width-preview;
                     border-right-width: 0;
                     cursor: e-resize;
@@ -523,6 +502,8 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
                 &.e {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto);
+                    width: $o-we-handle-edge-size;
                     border-right-width: $o-we-handle-border-width-preview;
                     cursor: w-resize;
 
@@ -536,6 +517,8 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
                 &.n {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0);
+                    height: $o-we-handle-edge-size;
                     border-top-width: $o-we-handle-border-width-preview;
                     cursor: ns-resize;
 
@@ -549,6 +532,8 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
                 &.s {
+                    @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0);
+                    height: $o-we-handle-edge-size;
                     border-bottom-width: $o-we-handle-border-width-preview;
                     cursor: ns-resize;
 
@@ -574,11 +559,6 @@ body.editor_enable.editor_has_snippets {
                     }
                 }
             }
-
-            > .o_move_handle {
-                cursor: pointer;
-                cursor: move;
-            }
         }
 
         &.o_we_sticky {
@@ -668,6 +648,31 @@ body.editor_enable.editor_has_snippets {
                         border-bottom-width: $o-we-handle-border-width;
                     }
                 }
+
+                > .o_move_handle {
+                    @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%);
+                    transform: translate(-50%, -110%);
+                    padding: 2px 4px;
+                    border: 1px solid $o-we-color-text-normal;
+                    border-radius: 20%;
+                    color: $o-we-color-text-normal;
+                    opacity: 0.5;
+                    transition: opacity 400ms ease 0;
+                    cursor: pointer;
+                    cursor: move;
+
+                    &::before, &::after {
+                        content: '\f141';
+                        display: block;
+                        font-family: FontAwesome;
+                        font-size: 0.8em;
+                        line-height: 0.35em;
+                    }
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
             }
         }
     }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 89819b44396..8e1fe723f0d 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -9,11 +9,8 @@
                 <div class="o_handle w readonly"/>
                 <div class="o_handle s readonly"/>
 
-                <!-- Invisible overlay borders which allow to drag and drop -->
-                <div class="o_move_handle n"/>
-                <div class="o_move_handle e"/>
-                <div class="o_move_handle w"/>
-                <div class="o_move_handle s"/>
+                <!-- Overlay button-like handle to drag and drop -->
+                <div class="o_move_handle"/>
             </div>
         </div>
     </t>