[IMP] website: snippet resizing

bzr revid: fva@openerp.com-20130823160411-xoxek62wwhi5w3by

4 files changed, 104 insertions, 6 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 7cb2dc08a4f..60a7906f429 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -142,7 +142,7 @@
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }
 
-.oe_drop_zone.oe_mutate {
+.oe_drop_zone.oe_overlay {
   position: absolute;
   background: rgba(153, 0, 255, 0.17);
   border-radius: 3px;
@@ -157,6 +157,63 @@
   z-index: 99;
 }
 
+/* ---- SNIPPET MANIPULATOR ---- */
+.oe_snippet_manipulator {
+  display: block;
+  position: absolute;
+  background: rgba(153, 0, 255, 0.1);
+  border-radius: 3px;
+  border: solid 1px rgba(153, 0, 255, 0.5);
+  opacity: 0;
+  transition: opacity 100ms linear;
+}
+.oe_snippet_manipulator > .oe_handle {
+  display: none;
+}
+.oe_snippet_manipulator:hover, .oe_snippet_manipulator.oe_hover {
+  opacity: 1;
+}
+.oe_snippet_manipulator:hover > .oe_handle, .oe_snippet_manipulator.oe_hover > .oe_handle {
+  display: block;
+}
+
+.oe_handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  background: white;
+  border: solid 1px rgba(153, 0, 255, 0.5);
+  box-sizing: border-box;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  margin: -8px;
+  cursor: move;
+  -webkit-transition: background 100ms linear;
+}
+.oe_handle:hover {
+  background: #9900ff;
+}
+
+.oe_handle.nw, .oe_handle.n, .oe_handle.ne {
+  top: 0px;
+}
+
+.oe_handle.ne, .oe_handle.e, .oe_handle.se {
+  left: auto;
+  right: 0px;
+}
+
+.oe_handle.sw, .oe_handle.s, .oe_handle.se {
+  top: auto;
+  bottom: 0px;
+}
+
+.oe_handle.nw, .oe_handle.w, .oe_handle.sw {
+  left: 0px;
+}
+
 /* ---- MOBILE PREVIEW ---- */
 .oe_stop_scrolling {
   height: 100%;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 45078e12b0b..dade66519a8 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -129,7 +129,7 @@
     &.oe_hover:before
         border-top: dashed 2px rgba(116, 255, 161, 0.72)
 
-.oe_drop_zone.oe_mutate
+.oe_drop_zone.oe_overlay
     position: absolute
     background: rgba(153, 0, 255, 0.17)
     border-radius: 3px
@@ -141,6 +141,51 @@
         background: rgba(0, 255, 133, 0.22)
         z-index: 99
 
+/* ---- SNIPPET MANIPULATOR ---- */
+
+.oe_snippet_manipulator
+    display: block
+    position: absolute
+    background: rgba(153, 0, 255, 0.1)
+    border-radius: 3px
+    border: solid 1px rgba(153, 0, 255, 0.5)
+    opacity: 0
+    transition: opacity 100ms linear
+    & > .oe_handle
+        display: none
+    &:hover,&.oe_hover
+        opacity: 1
+        & > .oe_handle
+            display: block
+
+.oe_handle
+    position: absolute
+    top: 50%
+    left: 50%
+    display: block
+    background: rgba(255, 255, 255, 1)
+    border: solid 1px rgba(153, 0, 255, 0.5)
+    box-sizing: border-box
+    border-radius: 2px
+    width: 16px
+    height: 16px
+    margin: -8px
+    cursor: move
+    -webkit-transition: background 100ms linear
+    &:hover
+        background: rgb(153, 0, 255)
+
+.oe_handle.nw,.oe_handle.n,.oe_handle.ne
+    top: 0px
+.oe_handle.ne,.oe_handle.e,.oe_handle.se
+    left: auto
+    right: 0px
+.oe_handle.sw,.oe_handle.s,.oe_handle.se
+    top: auto
+    bottom: 0px
+.oe_handle.nw,.oe_handle.w,.oe_handle.sw
+    left: 0px
+
 /* ---- MOBILE PREVIEW ---- */
 
 .oe_stop_scrolling
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 2ba763f402e..4567384975d 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -161,6 +161,4 @@ header.navbar-fixed-top {
 
 .dark {
   background: #eff8f8;
-  padding-top: 32px;
-  padding-bottom: 32px;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 0440a71624f..8b885c548d1 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -121,7 +121,5 @@ header.navbar-fixed-top
 
 .dark
     background: rgb(239, 248, 248)
-    padding-top: 32px
-    padding-bottom: 32px