[IMP] website editor snippets: move and add label

bzr revid: chm@openerp.com-20130913093518-kzla5hif1o1ubii5

2 files changed, 49 insertions, 39 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 39694ff6391..e895b1209ce 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -224,9 +224,6 @@ table.editorbar-panel td.selected {
   box-sizing: border-box;
   pointer-events: none;
 }
-.oe_overlay .oe_handle {
-  display: none !important;
-}
 .oe_overlay.oe_hover {
   opacity: 1;
   cursor: pointer;
@@ -241,6 +238,9 @@ table.editorbar-panel td.selected {
 .oe_overlay.oe_selected {
   border-color: rgba(0, 153, 255, 0.5);
 }
+.oe_overlay .oe_handle {
+  display: none !important;
+}
 .oe_overlay.oe_active {
   border-color: rgba(153, 0, 255, 0.5);
 }
@@ -248,35 +248,37 @@ table.editorbar-panel td.selected {
   display: block !important;
   pointer-events: auto;
 }
+.oe_overlay .icon.btn {
+  display: inline-block;
+}
 .oe_overlay .oe_overlay_options {
   display: none;
   z-index: 1002;
 }
-.oe_overlay .oe_overlay_options .oe_option {
-  top: 50%;
-  left: 50%;
-  pointer-events: auto;
+.oe_overlay .oe_overlay_options .oe_options, .oe_overlay .oe_overlay_options .oe_label, .oe_overlay .oe_overlay_options .oe_move {
   position: absolute;
   display: block;
   z-index: 1002;
-}
-.oe_overlay .oe_overlay_options .oe_option.n {
   top: -11px;
 }
-.oe_overlay .oe_overlay_options .oe_option.e {
-  left: auto;
-  right: -6px;
+.oe_overlay .oe_overlay_options .oe_options {
+  pointer-events: auto;
+  left: -14px;
 }
-.oe_overlay .oe_overlay_options .oe_option.s {
-  top: auto;
-  bottom: -10px;
+.oe_overlay .oe_overlay_options .oe_label {
+  top: -8px;
+  right: 6px;
+  background: white;
+  font-size: 75%;
+  color: rgba(153, 0, 255, 0.5);
+  padding: 0 5px;
 }
-.oe_overlay .oe_overlay_options .oe_option.w {
-  left: -6px;
+.oe_overlay .oe_overlay_options .oe_move {
+  pointer-events: auto;
+  left: 50%;
 }
-.oe_overlay .oe_overlay_options .oe_option > a {
-  text-decoration: none;
-  font-size: 1.2em;
+.oe_overlay .oe_overlay_options .oe_move .js_box_move {
+  margin-left: -50%;
 }
 .oe_overlay.oe_active .oe_overlay_options {
   display: block;
@@ -340,6 +342,10 @@ table.editorbar-panel td.selected {
   cursor: w-resize !important;
 }
 
+.move-important, .move-important * {
+  cursor: move !important;
+}
+
 /* ---- MOBILE PREVIEW ---- */
 .oe_mobile_preview.modal .modal-content {
   height: 660px;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 059f9eedb45..96c77108ff6 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -202,8 +202,6 @@ table.editorbar-panel
     transition: opacity 100ms linear
     box-sizing: border-box
     pointer-events: none
-    .oe_handle
-        display: none !important
     &.oe_hover
         opacity: 1
         cursor: pointer
@@ -215,35 +213,39 @@ table.editorbar-panel
         box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
     &.oe_selected
         border-color: rgba(0, 153, 255, 0.5)
+    .oe_handle
+        display: none !important
     &.oe_active
         border-color: rgba(153, 0, 255, 0.5)
         .oe_handle
             display: block !important
             pointer-events: auto
+    .icon.btn
+        display: inline-block
 
     .oe_overlay_options
         display: none
         z-index: 1002
-        .oe_option
-            top: 50%
-            left: 50%
-            pointer-events: auto
+        .oe_options,.oe_label,.oe_move
             position: absolute
             display: block
             z-index: 1002
-            &.n
-                top: -11px
-            &.e
-                left: auto
-                right: -6px
-            &.s
-                top: auto
-                bottom: -10px
-            &.w
-                left: -6px
-            > a
-                text-decoration: none
-                font-size: 1.2em
+            top: -11px
+        .oe_options
+            pointer-events: auto
+            left: -14px
+        .oe_label
+            top: -8px
+            right: 6px
+            background: #fff
+            font-size: 75%
+            color: rgba(153, 0, 255, 0.5)
+            padding: 0 5px
+        .oe_move
+            pointer-events: auto
+            left: 50%
+            .js_box_move
+                margin-left: -50%
     &.oe_active .oe_overlay_options
         display: block
 
@@ -289,6 +291,8 @@ table.editorbar-panel
     cursor: e-resize !important
 .w-resize-important, .w-resize-important *
     cursor: w-resize !important
+.move-important, .move-important *
+    cursor: move !important
 
 
 /* ---- MOBILE PREVIEW ---- */