[IMP] website editor: display snippet block on the left side and open it on mouse enter

4 files changed, 85 insertions, 44 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index cc69336f23a..3c5c1da91fb 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -68,10 +68,11 @@
   display: none;
 }
 
-.o_editable:not(:empty):not(:focus):hover, .o_editable[data-oe-type]:not(:focus):hover {
-  -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
-  -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
-  box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset;
+.o_editable:not(:empty):not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, .o_editable[data-oe-type]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
+  /* to do change into primary color in less */
+  -moz-box-shadow: #3071a9 0 0 5px 2px inset;
+  -webkit-box-shadow: #3071a9 0 0 5px 2px inset;
+  box-shadow: #3071a9 0 0 5px 2px inset;
 }
 .o_editable:focus, .o_editable[data-oe-type] {
   min-height: 0.8em;
@@ -368,7 +369,7 @@ ul.oe_menu_editor .disclose {
 .modal #icon-search {
   padding-left: 2.5em;
 }
-.font-icons-selected {
+.modal .font-icons-selected {
   background-color: #ddd;
 }
 
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index ed0400d0348..c285ef94b25 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -64,10 +64,11 @@
 
 .o_editable
     &:not(:empty),&[data-oe-type]
-        &:not(:focus):hover
-            -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
-            -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
-            box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset
+        &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover
+            /* to do change into primary color in less */
+            -moz-box-shadow: #3071a9 0 0 5px 2px inset
+            -webkit-box-shadow: #3071a9 0 0 5px 2px inset
+            box-shadow: #3071a9 0 0 5px 2px inset
     &:focus,&[data-oe-type]
         min-height: 0.8em
         min-width: 8px
diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index acb895b3510..ed1362ec439 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -1,29 +1,52 @@
 /* ---- SNIPPET EDITOR ---- {{{ */
-#oe_snippets {
+#oe_snippets .scroll, #oe_snippets .o_arrow {
   position: fixed;
   top: 34px;
   left: 0px;
-  right: 0px;
-  padding-top: 6px;
+  bottom: 0;
+  padding-top: 10px;
   background: #282828;
   -moz-box-shadow: 0px 10px 10px -10px black inset;
   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   box-shadow: 0px 10px 10px -10px black inset;
-  z-index: 1010;
-  overflow: hidden;
 }
-#oe_snippets:hover {
-  height: auto;
+#oe_snippets .o_arrow {
+  z-index: 1009;
+  width: 24px;
+  opacity: 0.75;
 }
-#oe_snippets .scroll {
+#oe_snippets .o_arrow > * {
+  position: absolute;
+  color: white;
+}
+#oe_snippets .o_arrow div {
+  -moz-transform: translateX(-36%) rotate(-90deg);
+  -ms-transform: translateX(-36%) rotate(-90deg);
+  -webkit-transform: translateX(-36%) rotate(-90deg);
+  transform: translateX(-36%) rotate(-90deg);
+  top: 50%;
   white-space: nowrap;
 }
+#oe_snippets .o_arrow .fa {
+  width: 100%;
+  left: 40%;
+}
+#oe_snippets .scroll {
+  left: -220px;
+  z-index: 1010;
+  width: 200px;
+  -moz-transition: all 500ms ease;
+  -o-transition: all 500ms ease;
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+}
+#oe_snippets.o_open .scroll {
+  left: 0;
+}
 #oe_snippets .nav {
-  display: inline-block;
+  float: none;
   border-bottom: none !important;
-  vertical-align: middle;
-  min-width: 120px;
-  z-index: 1;
+  margin-bottom: 6px;
 }
 #oe_snippets .nav > li {
   display: block;
@@ -36,17 +59,19 @@
   padding: 2px 10px !important;
   width: 100%;
   display: block;
+  border-radius: 4px;
   border: 0;
 }
+#oe_snippets .nav > li span {
+  font-size: 0.8em;
+}
 #oe_snippets .pill-content {
   border: 0;
 }
 #oe_snippets .tab-content {
-  margin-right: 120px;
-  display: inline-block;
   white-space: normal;
   background: black;
-  margin-right: 60px;
+  margin-left: 3px;
 }
 #oe_snippets .tab-content > div {
   background: black;
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index 726b078883d..d4a71e34f6d 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -6,25 +6,39 @@
 /* ---- SNIPPET EDITOR ---- {{{ */
 
 #oe_snippets
-    position: fixed
-    top: 34px
-    left: 0px
-    right: 0px
-    padding-top: 6px
-    // top property is set programmatically
-    background: rgb(40,40,40)
-    +box-shadow(0px 10px 10px -10px black inset)
-    z-index: 1010
-    overflow: hidden
-    &:hover
-        height: auto
+    .scroll, .o_arrow
+        position: fixed
+        top: 34px
+        left: 0px
+        bottom: 0
+        padding-top: 10px
+        background: rgb(40,40,40)
+        +box-shadow(0px 10px 10px -10px black inset)
+    .o_arrow
+        z-index: 1009
+        width: 24px
+        opacity: 0.75
+        > *
+            position: absolute
+            color: white
+        div
+            @include transform( translateX(-36%) rotate(-90deg) )
+            top: 50%
+            white-space: nowrap
+        .fa
+            width: 100%
+            left: 40%
     .scroll
-        white-space: nowrap
+        left:  -220px
+        z-index: 1010
+        width: 200px
+        @include transition(all 500ms ease)
+    &.o_open .scroll
+        left: 0
     .nav
-        display: inline-block
+        float: none
         border-bottom: none !important
-        vertical-align: middle
-        min-width: 120px
+        margin-bottom: 6px
         > li
             display: block
             float: none
@@ -34,16 +48,16 @@
                 padding: 2px 10px !important
                 width: 100%
                 display: block
+                border-radius: 4px
                 border: 0
-        z-index: 1
+            span
+                font-size: 0.8em
     .pill-content
         border: 0
     .tab-content
-        margin-right: 120px
-        display: inline-block
         white-space: normal
         background: black
-        margin-right: 60px
+        margin-left: 3px
         > div
             background: rgb(0,0,0)
             label