[IMP] website: snippet editor and building block

bzr revid: chm@openerp.com-20130911130045-kpya856mndrao0fi

5 files changed, 124 insertions, 121 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 844cea11d9f..b92722ed620 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -100,7 +101,7 @@ table.editorbar-panel td.selected {
 }
 
 /* ---- SNIPPET EDITOR ---- */
-.oe_snippets {
+#oe_snippets {
   position: fixed;
   left: 0px;
   right: 0px;
@@ -199,11 +200,11 @@ table.editorbar-panel td.selected {
 }
 .oe_drop_zone.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;
@@ -213,45 +214,51 @@ table.editorbar-panel td.selected {
   box-sizing: border-box;
   pointer-events: none;
 }
-.oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
-  position: absolute;
-  pointer-events: none;
-}
-.oe_snippet_manipulator .oe_handle {
-  display: none;
+.oe_overlay .oe_handle {
+  display: none !important;
 }
-.oe_snippet_manipulator.oe_hover {
+.oe_overlay.oe_hover {
   opacity: 1;
   cursor: pointer;
 }
-.oe_snippet_manipulator.oe_selected, .oe_snippet_manipulator.oe_active, .oe_snippet_manipulator .oe_boxsize, .oe_snippet_manipulator .oe_margin {
+.oe_overlay.oe_selected, .oe_overlay.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_snippet_manipulator.oe_selected .oe_handle, .oe_snippet_manipulator.oe_active .oe_handle, .oe_snippet_manipulator .oe_boxsize .oe_handle, .oe_snippet_manipulator .oe_margin .oe_handle {
+.oe_overlay.oe_selected {
+  border-color: rgba(0, 153, 255, 0.5);
+}
+.oe_overlay.oe_active {
+  border-color: rgba(153, 0, 255, 0.5);
+}
+.oe_overlay.oe_active .oe_handle {
+  display: block !important;
   pointer-events: auto;
 }
-.oe_snippet_manipulator .oe_buttons {
+.oe_overlay .oe_overlay_options {
   display: none;
+  z-index: 99;
+}
+.oe_overlay .oe_overlay_options .oe_option {
+  pointer-events: auto;
   position: absolute;
-  right: 16px;
-  top: 16px;
-  background: #ad00ff;
-  color: white;
-  padding: 0px 2px;
-  border-radius: 3px;
 }
-.oe_snippet_manipulator .oe_buttons .oe_icon {
-  display: inline-block;
-  padding: 8px;
-  cursor: pointer;
+.oe_overlay .oe_overlay_options .oe_option.n {
+  top: 0px;
 }
-.oe_snippet_manipulator.oe_active {
-  z-index: 100000;
+.oe_overlay .oe_overlay_options .oe_option.e {
+  right: 0px;
 }
-.oe_snippet_manipulator.oe_active .oe_handle, .oe_snippet_manipulator.oe_active .oe_buttons {
+.oe_overlay .oe_overlay_options .oe_option.s {
+  bottom: 0px;
+}
+.oe_overlay .oe_overlay_options .oe_option.w {
+  left: 0px;
+}
+.oe_overlay.oe_active .oe_overlay_options {
   display: block;
 }
 
@@ -261,67 +268,56 @@ table.editorbar-panel td.selected {
   top: 50%;
   left: 50%;
   display: block;
-  background: white;
-  border: solid 1px #9900ff;
   box-sizing: border-box;
-  border-radius: 8px;
-  width: 16px;
-  height: 16px;
-  margin: -8px;
-  -webkit-transition: background 100ms linear;
-}
-.oe_handle:hover {
-  background: #9900ff;
+  width: 8px;
+  height: 8px;
+  margin: -4px;
 }
 
-.oe_handle.nw, .oe_handle.n, .oe_handle.ne {
+.oe_handle.n {
+  left: 2px;
+  width: 100%;
   top: 0px;
+  cursor: s-resize;
 }
 
-.oe_handle.ne, .oe_handle.e, .oe_handle.se {
+.oe_handle.e {
   left: auto;
+  top: 2px;
+  height: 100%;
   right: 0px;
+  cursor: w-resize;
 }
 
-.oe_handle.sw, .oe_handle.s, .oe_handle.se {
+.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.w {
+  top: 2px;
+  height: 100%;
+  left: 0px;
+  cursor: e-resize;
 }
 
-.oe_handle.se {
-  cursor: se-resize;
+.s-resize-important, .s-resize-important * {
+  cursor: s-resize !important;
 }
 
-.oe_handle.sw {
-  cursor: sw-resize;
+.n-resize-important, .n-resize-important * {
+  cursor: n-resize !important;
 }
 
-.oe_handle.e {
-  cursor: e-resize;
+.e-resize-important, .e-resize-important * {
+  cursor: e-resize !important;
 }
 
-.oe_handle.w {
-  cursor: w-resize;
+.w-resize-important, .w-resize-important * {
+  cursor: w-resize !important;
 }
 
 /* ---- MOBILE PREVIEW ---- */
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index e4edcd3c62e..f9774ed296f 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 ---- */
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 0eeab9aee99..5b7d404a1fd 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -201,4 +201,9 @@
     width: 16px;
     height: 16px;
     display: inline-block;
+}
+
+[data-snippet-id] {
+    min-height: 10px;
+    min-width: 10px;
 }
\ No newline at end of file
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 77db53b45e9..a016cbc150b 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -127,7 +127,7 @@ footer {
   margin-bottom: 0px;
 }
 
-#myCarousel .item {
+.carousel .item {
   color: white;
 }
 
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 9992a8586ef..a4b07b2969c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -95,7 +95,7 @@ footer
 // .nav > li  a 
 //     display: block
 
-#myCarousel .item
+.carousel .item
     color: white
 
 /* ---- HOMEPAGE THEME CUSTOMIZATION ---- */