[MERGE] from trunk

bzr revid: xmo@openerp.com-20131014085459-dhbypq0hg3lzzf3j

4 files changed, 177 insertions, 96 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 5604c62af75..d0b0b34d180 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -169,7 +168,7 @@ table.editorbar-panel td.selected {
   position: fixed;
   left: 0px;
   right: 0px;
-  top: 50px;
+  top: 51px;
   background: #282828;
   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   -moz-box-shadow: 0px 10px 10px -10px black inset;
@@ -182,17 +181,21 @@ table.editorbar-panel td.selected {
 }
 #oe_snippets .scroll {
   white-space: nowrap;
-  overflow-y: auto;
+  overflow-y: none;
 }
 #oe_snippets .nav {
-  position: fixed;
+  display: inline-block;
+  border-bottom: none !important;
+  vertical-align: middle;
+  min-width: 120px;
   z-index: 1;
-  border: 0;
 }
 #oe_snippets .nav > li {
-  display: inline-block;
+  display: block;
   float: none;
-  font-size: 13px;
+}
+#oe_snippets .nav > li.active {
+  background: black !important;
 }
 #oe_snippets .nav > li > a {
   padding: 2px 10px !important;
@@ -200,18 +203,19 @@ table.editorbar-panel td.selected {
   display: block;
   border: 0;
 }
+#oe_snippets .pill-content {
+  border: 0;
+}
 #oe_snippets .tab-content {
-  margin-top: 24px;
   display: inline-block;
   white-space: nowrap;
+  background: black;
 }
 #oe_snippets .tab-content > div {
   background: black;
-  padding: 5px;
 }
 #oe_snippets .tab-content > div label {
   width: 44px;
-  height: 100%;
   color: white;
   padding-left: 10px;
 }
@@ -231,11 +235,10 @@ table.editorbar-panel td.selected {
 }
 
 .oe_snippet {
-  display: inline-block;
+  float: left;
   vertical-align: top;
-  width: 100px;
-  height: 100px;
-  margin: 1px;
+  width: 93px;
+  margin-left: 1px;
   margin-top: 0px;
   position: relative;
   overflow: hidden;
@@ -253,14 +256,32 @@ table.editorbar-panel td.selected {
   color: white;
   position: relative;
 }
+.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img {
+  -webkit-transform: scale(0.95, 0.95);
+  -moz-transform: scale(0.95, 0.95);
+  -ms-transform: scale(0.95, 0.95);
+  -o-transform: scale(0.95, 0.95);
+  transform: scale(0.95, 0.95);
+}
 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title {
   font-size: 12px;
   display: block;
+  text-shadow: 0 0 2px black;
 }
 .oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img {
+  height: 74px;
+  -webkit-transition: all 150ms linear;
+  -moz-transition: all 150ms linear;
+  -o-transition: all 150ms linear;
+  transition: all 150ms linear;
   -webkit-box-shadow: inset 0px 0px 0px 3px #333333;
   -moz-box-shadow: inset 0px 0px 0px 3px #333333;
   box-shadow: inset 0px 0px 0px 3px #333333;
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -o-transform: scale(1, 1);
+  transform: scale(1, 1);
 }
 .oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div {
   line-height: 18px;
@@ -309,20 +330,21 @@ table.editorbar-panel td.selected {
   margin: 0px -24px !important;
 }
 .oe_drop_zone.oe_insert.oe_overlay {
-  background: rgba(153, 0, 255, 0.17);
   border-radius: 3px;
+  background: rgba(153, 0, 255, 0.5);
 }
 
 .oe_drop_zone, .oe_drop_zone_style {
-  background: rgba(153, 0, 255, 0.17);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
+  border: none;
+  background: rgba(153, 0, 255, 0.3);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
 }
 .oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover {
-  background: rgba(0, 255, 133, 0.22);
+  background: rgba(0, 255, 133, 0.3);
   z-index: 1001;
 }
 
@@ -359,7 +381,7 @@ table.editorbar-panel td.selected {
   -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
   -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  border-color: rgba(153, 0, 255, 0.5);
+  border-color: rgba(0, 0, 0, 0.5);
 }
 .oe_overlay.oe_active .oe_handle {
   display: block !important;
@@ -371,39 +393,43 @@ table.editorbar-panel td.selected {
   left: 50%;
   display: block;
   background: white;
-  border: solid 1px #9900ff;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  -ms-border-radius: 8px;
-  -o-border-radius: 8px;
-  border-radius: 8px;
-  width: 16px;
-  height: 16px;
-  margin: -8px;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  width: 18px;
+  height: 18px;
+  margin: -9px;
   padding-left: 1px;
   font-size: 14px;
   line-height: 14px;
-  color: #9900ff;
+  font-family: FontAwesome;
+  color: rgba(0, 0, 0, 0.5);
   -webkit-transition: background 100ms linear;
   -moz-transition: background 100ms linear;
   -o-transition: background 100ms linear;
   transition: background 100ms linear;
 }
 .oe_overlay.oe_active .oe_handle:hover:before {
-  background: #9900ff;
+  background: rgba(0, 0, 0, 0.5);
   color: white;
+  -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
+  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
 }
 .oe_overlay.oe_active .oe_handle.e:before {
-  content: "⇨";
+  content: "\F061";
 }
 .oe_overlay.oe_active .oe_handle.s:before {
-  content: "⇩";
+  content: "\F063";
 }
 .oe_overlay.oe_active .oe_handle.w:before {
-  content: "⇦";
+  content: "\F060";
 }
 .oe_overlay.oe_active .oe_handle.n:before {
-  content: "⇧";
+  content: "\F062";
 }
 .oe_overlay .icon.btn {
   display: inline-block;
@@ -568,18 +594,6 @@ table.editorbar-panel td.selected {
   -o-border-radius: 0.4em;
   border-radius: 0.4em;
 }
-.oe_seo_configuration .keyword-in-title {
-  background-color: #5cb85cpointer;
-  color: white;
-}
-.oe_seo_configuration .keyword-in-description {
-  background-color: #428bca;
-  color: white;
-}
-.oe_seo_configuration .keyword-in-body {
-  background-color: #5bc0de;
-  color: white;
-}
 
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
@@ -636,3 +650,12 @@ table.editorbar-panel td.selected {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
 }
+
+/* ---- EDITOR TOUR ---- */
+div.tour-backdrop {
+  z-index: 2009;
+}
+
+.popover.tour {
+  z-index: 2010;
+}
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 7b2800bd849..51bae3dcf3a 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -4,6 +4,17 @@
 @import "compass/css3/user-interface"
 @import "compass/css3/transition"
 
+//smartphones, iPhone, portrait 480x320 phones 
+$smart_phone: 320px
+//portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
+$small-tablet: 481px 
+//portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
+$portrait-tablet: 641px 
+//tablet, landscape iPad, lo-res laptops ands desktops 
+$tablet: 961px
+//big landscape tablets, laptops, and desktops  
+$desktop: 1025px
+
 /* ---- CKEditor Minimal Reset ---- */
 
 .navbar.navbar-inverse .cke_chrome
@@ -141,7 +152,7 @@ table.editorbar-panel
     position: fixed
     left: 0px
     right: 0px
-    top: 50px
+    top: 51px
     background: rgb(40,40,40)
     +box-shadow(0px 10px 10px -10px black inset)
     z-index: 1010
@@ -150,44 +161,47 @@ table.editorbar-panel
         height: auto
     .scroll
         white-space: nowrap
-        overflow-y: auto
+        overflow-y: none
     .nav
+        display: inline-block
+        border-bottom: none !important
+        vertical-align: middle
+        min-width: 120px
         > li
-            display: inline-block
+            display: block
             float: none
-            font-size: 13px
+            &.active
+                background: black !important
             > a
                 padding: 2px 10px !important
-                width: 100%
+                width: 100% 
                 display: block
                 border: 0
-        position: fixed
         z-index: 1
+    .pill-content
         border: 0
     .tab-content
-        margin-top: 24px
         display: inline-block
         white-space: nowrap
-        > div
+        background: black
+        > div   
             background: rgb(0,0,0)
-            padding: 5px
             label
                 width: 44px
-                height: 100%
                 color: #fff
                 padding-left: 10px
+                
                 div
                     width: 100px
                     text-align: center
-                    @include transform( translate(-39px, 44px) , rotate(-90deg) ) 
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
                     @include transform-origin(50% 50%)
 
 .oe_snippet
-    display: inline-block
+    float: left
     vertical-align: top
-    width: 100px
-    height: 100px
-    margin: 1px
+    width: 93px
+    margin-left: 1px
     margin-top: 0px
     position: relative
     overflow: hidden
@@ -201,11 +215,18 @@ table.editorbar-panel
         background: transparent
         color: white
         position: relative
+        &:hover
+            .oe_snippet_thumbnail_img
+                @include transform( scale(.95,.95))
         .oe_snippet_thumbnail_title
             font-size: 12px
             display: block
+            +text-shadow(0 0 2px rgb(0,0,0))
         .oe_snippet_thumbnail_img
+            height: 74px
+            @include transition(all 150ms linear)
             +box-shadow(inset 0px 0px 0px 3px #333333)
+            @include transform( scale(1,1))
         span, div
             line-height: 18px
     & > :not(.oe_snippet_thumbnail)
@@ -240,14 +261,19 @@ table.editorbar-panel
         position: relative
         margin: 0px -24px !important
     &.oe_overlay
-        background: rgba(153, 0, 255, 0.17)
         border-radius: 3px
-
+        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+        //background-size: 100px 100px
+        background: rgba(153, 0, 255,.5)
+        
 .oe_drop_zone, .oe_drop_zone_style
-    background: rgba(153, 0, 255, 0.17)
-    +border-radius(3px)
+    border: none
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+    //background-size: 100px 100px
+    background: rgba(153, 0, 255, .3)
+    +border-radius(4px)
     &.oe_hover
-        background: rgba(0, 255, 133, 0.22)
+        background: rgba(0, 255, 133, .3)
         z-index: 1001
 
 .oe_drop_zone_style
@@ -262,6 +288,7 @@ table.editorbar-panel
     display: none
     position: absolute
     background: transparent
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) 
     +border-radius(3px)
     @include transition(opacity 100ms linear)
     +box-sizing(border-box)
@@ -271,7 +298,7 @@ table.editorbar-panel
         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)
-        border-color: rgba(153, 0, 255, 0.5)
+        border-color: rgba(0, 0, 0, 0.5)
         .oe_handle
             display: block !important
             pointer-events: auto
@@ -281,27 +308,29 @@ table.editorbar-panel
                 left: 50%
                 display: block
                 background: rgba(255, 255, 255, 1)
-                border: solid 1px rgba(153, 0, 255, 1)
-                +border-radius(8px)
-                width: 16px
-                height: 16px
-                margin: -8px
+                border: solid 1px rgba(0, 0, 0, .2)
+                +border-radius(5px)
+                width: 18px
+                height: 18px
+                margin: -9px
                 padding-left: 1px
                 font-size: 14px
                 line-height: 14px
-                color: rgba(153, 0, 255, 1)
+                font-family: FontAwesome
+                color: rgba(0,0,0,.5)
                 @include transition(background 100ms linear)
             &:hover:before
-                background: rgba(153, 0, 255, 1)
+                background: rgba(0, 0, 0, .5)
                 color: #fff
+                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
         .oe_handle.e:before
-            content: "⇨"
+            content: "\F061"
         .oe_handle.s:before
-            content: "⇩"
+            content: "\F063"
         .oe_handle.w:before
-            content: "⇦"
+            content: "\F060"
         .oe_handle.n:before
-            content: "⇧"
+            content: "\F062"
 
     .icon.btn
         display: inline-block
@@ -436,10 +465,6 @@ $ace_width: 720px
 $editorbar_height: 40px
 // TODO Fix => might break with themes
 $navbar_height: 51px
-@mixin pointer-events($type: none)
-    $type: unquote($type)
-    @include experimental(pointer-events, $type,-moz, -webkit, not -o, not -ms, -khtml, official)
-
 
 @mixin editor-font
     font-size: 14px
@@ -481,4 +506,10 @@ $navbar_height: 51px
     &.oe_ace_closed
         width: 0
         +opacity(0)
+
+/* ---- EDITOR TOUR ---- */
+div.tour-backdrop
+    z-index: 2009
+.popover.tour
+    z-index: 2010
 // vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:
diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 6af2e7485fe..ce87e592136 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -223,11 +223,15 @@ footer {
 }
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
+.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
   background-image: url("/website/static/src/img/drag_here.png");
+}
+
+.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
+  background-image: url("/website/static/src/img/edit_here.png");
   background-repeat: no-repeat;
-  background-position: center top;
-  height: 200px !important;
+  background-position: center;
+  height: 220px !important;
 }
 
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child {
@@ -238,8 +242,8 @@ footer {
   content: "Click Edit To Create Content";
   text-align: center;
   display: block;
-  padding-top: 100px;
-  padding-bottom: 50px;
+  padding-top: 160px;
+  padding-bottom: 30px;
   color: grey;
   font-size: 24px;
 }
@@ -345,6 +349,17 @@ footer {
 }
 
 /* Parallax Theme */
+.parallax_quote {
+  background: url("/website/static/src/img/parallax/quote.png") center center no-repeat fixed;
+  background-size: contain;
+}
+.parallax_quote .carousel-indicators li {
+  border: 1px solid grey;
+}
+.parallax_quote .carousel-indicators .active {
+  background-color: grey;
+}
+
 .parallax_full {
   background: #eeeeee bottom center repeat fixed;
   min-height: 650px;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 997b45a0253..5197653429c 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -151,11 +151,14 @@ footer
 
 /* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */
 
-.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
+.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     background-image: url('/website/static/src/img/drag_here.png')
+
+.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
+    background-image: url('/website/static/src/img/edit_here.png')
     background-repeat: no-repeat
-    background-position: center top
-    height: 200px !important
+    background-position: center
+    height: 220px !important
 
 .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
     position: static
@@ -164,8 +167,8 @@ footer
     content: 'Click Edit To Create Content'
     text-align: center
     display: block
-    padding-top: 100px
-    padding-bottom: 50px
+    padding-top: 160px
+    padding-bottom: 30px
     color: grey
     font-size: 24px
 
@@ -263,6 +266,15 @@ footer
 
 /* Parallax Theme */
 
+.parallax_quote
+    background: url('/website/static/src/img/parallax/quote.png') center center no-repeat fixed
+    background-size: contain
+    .carousel-indicators
+        li
+            border: 1px solid grey
+        .active
+            background-color: grey
+
 .parallax_full
     background: #eee bottom center repeat fixed
     min-height: 650px