[IMP] website snippets: horizontal scolling

bzr revid: chm@openerp.com-20130918154831-qiyin8xx07x20qj2

2 files changed, 91 insertions, 42 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 030417b3f21..1c7ef36b236 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -141,24 +141,63 @@ table.editorbar-panel td.selected {
 
 /* ---- SNIPPET EDITOR ---- */
 #oe_snippets {
-  display: none;
   position: fixed;
   left: 0px;
   right: 0px;
   top: 50px;
-  max-height: 280px;
   background: #282828;
   box-shadow: 0px 10px 10px -10px black inset;
-  overflow-y: auto;
   z-index: 1010;
+  overflow: hidden;
+}
+#oe_snippets .scroll {
+  white-space: nowrap;
+  overflow-y: auto;
 }
-#oe_snippets .nav-pills {
+#oe_snippets .nav {
   padding: 3px 15px;
   width: 162px;
   background: #444444;
+  position: fixed;
+  z-index: 1;
+  height: 108px;
+}
+#oe_snippets .nav > li {
+  display: block;
+  float: none;
 }
-#oe_snippets .nav-pills > li > a {
+#oe_snippets .nav > li > a {
   padding: 2px 10px !important;
+  width: 100%;
+  display: block;
+}
+#oe_snippets .pill-content {
+  display: inline-block;
+  height: 110px;
+  white-space: nowrap;
+  padding-left: 166px;
+}
+#oe_snippets .pill-content > div {
+  display: inline-block;
+}
+#oe_snippets .pill-content > div label {
+  width: 44px;
+  height: 100%;
+  color: white;
+  padding-left: 10px;
+}
+#oe_snippets .pill-content > div label div {
+  width: 100px;
+  text-align: center;
+  -webkit-transform: translate(-39px, 44px) rotate(-90deg);
+  -moz-transform: translate(-39px, 44px) rotate(-90deg);
+  -o-transform: translate(-39px, 44px) rotate(-90deg);
+  transform: translate(-39px, 44px) rotate(-90deg);
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
 }
 
 .oe_snippet {
@@ -201,33 +240,20 @@ table.editorbar-panel td.selected {
 /* ---- SNIPPETS DROP ZONES ---- */
 .oe_drop_zone.oe_insert {
   display: block;
-  height: 32px;
-  margin: -16px 0px;
+  height: 48px;
+  margin: 0px;
+  margin-bottom: -48px;
   -webkit-transition: margin 250ms linear;
   width: 100%;
   position: absolute;
   z-index: 1000;
 }
-.oe_drop_zone.oe_insert:first-child:not(:last-child) {
-  margin-top: -8px;
-  margin-bottom: -24px;
-}
-.oe_drop_zone.oe_insert:last-child:not(:first-child) {
-  margin-top: -24px;
-  margin-bottom: -8px;
-}
 .oe_drop_zone.oe_insert:before {
   content: "";
   display: block;
   border-top: dashed 2px rgba(209, 178, 255, 0.72);
   position: relative;
-  top: 16px;
-}
-.oe_drop_zone.oe_insert:first-child:not(:last-child):before {
-  top: 8px;
-}
-.oe_drop_zone.oe_insert:last-child:not(:first-child):before {
-  top: 24px;
+  top: 0px;
 }
 .oe_drop_zone.oe_insert.oe_hover:before {
   border-top: dashed 2px rgba(116, 255, 161, 0.72);
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 74802aec87b..3b6e6c088a8 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -131,22 +131,55 @@ table.editorbar-panel
 
 
 #oe_snippets
-    display: none
     position: fixed
     left: 0px
     right: 0px
     top: 50px
-    max-height: 280px
     background: rgb(40,40,40)
     box-shadow: 0px 10px 10px -10px black inset
-    overflow-y: auto
     z-index: 1010
-    .nav-pills
+    overflow: hidden
+    .scroll
+        white-space: nowrap
+        overflow-y: auto
+    .nav
         padding: 3px 15px
         width: 162px
         background: #444444
-        > li > a
-            padding: 2px 10px !important
+        > li
+            display: block
+            float: none
+            > a
+                padding: 2px 10px !important
+                width: 100%
+                display: block
+        position: fixed
+        z-index: 1
+        height: 108px
+    .pill-content
+        display: inline-block
+        height: 110px
+        white-space: nowrap
+        padding-left: 166px
+        > div
+            display: inline-block
+            label
+                width: 44px
+                height: 100%
+                color: #fff
+                padding-left: 10px
+                div
+                    width: 100px
+                    text-align: center
+                    -webkit-transform: translate(-39px, 44px) rotate(-90deg)
+                    -moz-transform: translate(-39px, 44px) rotate(-90deg)
+                    -o-transform: translate(-39px, 44px) rotate(-90deg)
+                    transform: translate(-39px, 44px) rotate(-90deg)
+                    -webkit-transform-origin: 50% 50%
+                    -moz-transform-origin: 50% 50%
+                    -ms-transform-origin: 50% 50%
+                    -o-transform-origin: 50% 50%
+                    transform-origin: 50% 50%
 
 .oe_snippet
     display: inline-block
@@ -181,34 +214,24 @@ table.editorbar-panel
     background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
     box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 
-
 /* ---- SNIPPETS DROP ZONES ---- */
 
 
 .oe_drop_zone.oe_insert
     display: block
-    height: 32px
-    margin: -16px 0px
+    height: 48px
+    margin: 0px
+    margin-bottom: -48px
     -webkit-transition: margin 250ms linear
     width: 100%
     position: absolute
     z-index: 1000
-    &:first-child:not(:last-child)
-        margin-top: -8px
-        margin-bottom: -24px
-    &:last-child:not(:first-child)
-        margin-top: -24px
-        margin-bottom: -8px
     &:before
         content: ""
         display: block
         border-top: dashed 2px rgba(209, 178, 255, 0.72)
         position: relative
-        top: 16px
-    &:first-child:not(:last-child):before
-        top: 8px
-    &:last-child:not(:first-child):before
-        top: 24px
+        top: 0px
     &.oe_hover:before
         border-top: dashed 2px rgba(116, 255, 161, 0.72)
     &.oe_vertical