[IMP] website: snippet editor and building block

bzr revid: chm@openerp.com-20130911125632-ekcxa8b4lu5ml4eq

1 files changed, 56 insertions, 54 deletions

diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 289ab1e6e54..431bed0c1c8 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -93,7 +93,7 @@ table.editorbar-panel
 
 /* ---- SNIPPET EDITOR ---- */
 
-.oe_snippets
+#oe_snippets
     position: fixed
     left: 0px
     right: 0px
@@ -182,11 +182,11 @@ table.editorbar-panel
     border-radius: 3px
     &.oe_hover
         background: rgba(0, 255, 133, 0.22)
-        z-index: 99
+        z-index: 97
 
 /* ---- SNIPPET MANIPULATOR ---- */
 
-.oe_snippet_manipulator
+.oe_overlay
     display: block
     position: absolute
     background: transparent //rgba(153, 0, 255, 0.05)
@@ -195,38 +195,41 @@ table.editorbar-panel
     transition: opacity 100ms linear
     box-sizing: border-box
     pointer-events: none
-    .oe_boxsize, .oe_margin
-        position: absolute
-        pointer-events: none
     .oe_handle
-        display: none
+        display: none !important
     &.oe_hover
         opacity: 1
         cursor: pointer
-    &.oe_selected, &.oe_active, .oe_boxsize, .oe_margin
+    &.oe_selected, &.oe_active
         opacity: 1
         background: transparent
-        border: dashed 1px rgba(153, 0, 255, 0.5)
+        border-style: dashed
+        border-width: 1px
         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_active
+        border-color: rgba(153, 0, 255, 0.5)
         .oe_handle
+            display: block !important
             pointer-events: auto
-    .oe_buttons
+
+    .oe_overlay_options
         display: none
-        position: absolute
-        right: 16px
-        top: 16px
-        background: rgb(173, 0, 255)
-        color: white
-        padding: 0px 2px
-        border-radius: 3px
-        .oe_icon
-            display: inline-block
-            padding: 8px
-            cursor: pointer
-    &.oe_active
-        z-index: 100000
-        .oe_handle, .oe_buttons
-            display: block
+        z-index: 99
+        .oe_option
+            pointer-events: auto
+            position: absolute
+            &.n
+                top: 0px
+            &.e
+                right: 0px
+            &.s
+                bottom: 0px
+            &.w
+                left: 0px
+    &.oe_active .oe_overlay_options
+        display: block
 
 .oe_handle
     pointer-events: auto
@@ -234,43 +237,42 @@ table.editorbar-panel
     top: 50%
     left: 50%
     display: block
-    background: rgba(255, 255, 255, 1)
-    border: solid 1px rgba(153, 0, 255, 1)
     box-sizing: border-box
-    border-radius: 8px
-    width: 16px
-    height: 16px
-    margin: -8px
-    -webkit-transition: background 100ms linear
-    &:hover
-        background: rgb(153, 0, 255)
-
-.oe_handle.nw,.oe_handle.n,.oe_handle.ne
+    width: 8px
+    height: 8px
+    margin: -4px
+
+.oe_handle.n
+    left: 2px
+    width: 100%
     top: 0px
-.oe_handle.ne,.oe_handle.e,.oe_handle.se
+    cursor: s-resize
+.oe_handle.e
     left: auto
+    top: 2px
+    height: 100%
     right: 0px
-.oe_handle.sw,.oe_handle.s,.oe_handle.se
+    cursor: w-resize
+.oe_handle.s
     top: auto
+    left: 2px
+    width: 100%
     bottom: 0px
-.oe_handle.nw,.oe_handle.w,.oe_handle.sw
-    left: 0px
-.oe_handle.n
     cursor: n-resize
-.oe_handle.ne
-    cursor: ne-resize
-.oe_handle.nw
-    cursor: nw-resize
-.oe_handle.s
-    cursor: s-resize
-.oe_handle.se
-    cursor: se-resize
-.oe_handle.sw
-    cursor: sw-resize
-.oe_handle.e
-    cursor: e-resize
 .oe_handle.w
-    cursor: w-resize
+    top: 2px
+    height: 100%
+    left: 0px
+    cursor: e-resize
+
+.s-resize-important, .s-resize-important *
+    cursor: s-resize !important
+.n-resize-important, .n-resize-important *
+    cursor: n-resize !important
+.e-resize-important, .e-resize-important *
+    cursor: e-resize !important
+.w-resize-important, .w-resize-important *
+    cursor: w-resize !important
 
 
 /* ---- MOBILE PREVIEW ---- */