[MERGE] website: further work on the snippet editor

bzr revid: fva@openerp.com-20130821163052-8t7nqni7okn555mc

addons/website/static/src/css/editor.css

@@ -63,49 +63,84 @@
   left: 0px;
   right: 0px;
   bottom: 0px;
-  height: 120px;
+  max-height: 280px;
-  background: black;
+  min-height: 140px;
+  background: #282828;
+  box-shadow: 0px 10px 10px -10px black inset;
+  overflow-y: auto;
 }
-.oe_snippets .oe_snippet {
+
-  display: inline;
+.oe_snippet {
-}
-.oe_snippets .oe_snippet .oe_snippet_thumbnail {
   display: inline-block;
-  background: red;
+  vertical-align: top;
-  width: 100px;
+  background: white;
-  height: 100px;
+  width: 120px;
+  height: 120px;
   border-radius: 3px;
   margin: 10px;
+  margin-right: 0px;
   cursor: move;
+  position: relative;
+  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
 }
-.oe_snippets .oe_snippet .oe_snippet_body {
+.oe_snippet .oe_snippet_thumbnail.oe_label {
+  text-align: center;
+  background: #747474;
+  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  height: 100%;
+  line-height: 120px;
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
+}
+.oe_snippet .oe_snippet_body {
   display: none;
 }
+.oe_snippet > * {
+  pointer-events: none;
+}
+.oe_snippet > *:first-child:not(.oe_snippet_thumbnail) {
+  display: block;
+  -webkit-transform-origin-x: 5px;
+  -webkit-transform-origin-y: 10px;
+  -webkit-transform: scale(0.095);
+}
 
 .oe_drop_zone {
   display: block;
-  background: rgba(255, 0, 0, 0.25);
+  background: rgba(153, 0, 255, 0.17);
-  border: solid 1px rgba(255, 0, 0, 0.5);
+  border-radius: 3px;
-  height: 30px;
+  height: 32px;
   margin: -16px 0px;
+  -webkit-transition: margin 250ms linear;
 }
-.oe_drop_zone.oe_inline {
+.oe_drop_zone:first-child:not(:last-child) {
-  display: inline;
+  margin-top: -8px;
-  height: auto;
+  margin-bottom: -24px;
-  width: 30px;
-  margin: 0px -16px;
 }
-.oe_drop_zone.oe_float_left {
+.oe_drop_zone:last-child:not(:first-child) {
-  float: left;
+  margin-top: -24px;
-}
+  margin-bottom: -8px;
-.oe_drop_zone.oe_float_right {
-  float: right;
-}
-.oe_drop_zone:hover {
-  background: rgba(255, 0, 0, 0.5);
-  border: solid 1px red;
 }
 .oe_drop_zone.oe_hover {
-  background: rgba(0, 255, 0, 0.5);
+  background: rgba(0, 255, 133, 0.22);
-  border: solid 1px green;
+  z-index: 100000;
+}
+.oe_drop_zone:before {
+  content: "";
+  display: block;
+  border-top: dashed 2px rgba(209, 178, 255, 0.72);
+  position: relative;
+  top: 16px;
+}
+.oe_drop_zone:first-child:not(:last-child):before {
+  top: 8px;
+}
+.oe_drop_zone:last-child:not(:first-child):before {
+  top: 24px;
+}
+.oe_drop_zone.oe_hover:before {
+  border-top: dashed 2px rgba(116, 255, 161, 0.72);
 }

addons/website/static/src/css/editor.sass

@@ -56,43 +56,76 @@
     left: 0px
     right: 0px
     bottom: 0px
+    max-height: 280px
+    min-height: 140px
+    background: rgb(40,40,40)
+    box-shadow: 0px 10px 10px -10px black inset
+    overflow-y: auto
+
+.oe_snippet
+    display: inline-block
+    vertical-align: top
+    background: white
+    width: 120px
     height: 120px
-    background: black
+    border-radius: 3px
+    margin: 10px
+    margin-right: 0px
+    cursor: move 
+    position: relative
+    box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
+    overflow: hidden
+    -webkit-user-select: none
+    user-select: none
 
-    .oe_snippet
+    .oe_snippet_thumbnail.oe_label
-        display: inline
+        text-align: center
-        .oe_snippet_thumbnail
+        background: rgb(116, 116, 116)
-            display: inline-block
+        background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
-            background: red
+        height: 100%
-            width: 100px
+        line-height: 120px
-            height: 100px
+        color: white
-            border-radius: 3px
+        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
-            margin: 10px
-            cursor: move
 
-        .oe_snippet_body
+    .oe_snippet_body
-            display: none
+        display: none
+    & > *
+        pointer-events: none
+
+    & > *:first-child:not(.oe_snippet_thumbnail)
+        display: block
+        -webkit-transform-origin-x: 5px
+        -webkit-transform-origin-y: 10px
+        -webkit-transform: scale(0.095)
+               
 
 .oe_drop_zone
     display: block
-    background: rgba(255,0,0,0.25)
+    background: rgba(153, 0, 255, 0.17)
-    border: solid 1px rgba(255,0,0,0.5)
+    border-radius: 3px
-    height: 30px
+    height: 32px
     margin: -16px 0px
-    &.oe_inline
+    -webkit-transition: margin 250ms linear
-        display: inline
+    &:first-child:not(:last-child)
-        height: auto
+        margin-top: -8px
-        width: 30px
+        margin-bottom: -24px
-        margin: 0px -16px
+    &:last-child:not(:first-child)
-    &.oe_float_left
+        margin-top: -24px
-        float: left
+        margin-bottom: -8px
-    &.oe_float_right
-        float: right
-    &:hover
-        background: rgba(255,0,0,0.5)
-        border: solid 1px red
     &.oe_hover
-        background: rgba(0,255,0,0.5)
+        background: rgba(0, 255, 133, 0.22)
-        border: solid 1px green
+        z-index: 100000
+    &: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
+    &.oe_hover:before
+        border-top: dashed 2px rgba(116, 255, 161, 0.72)
 
 

addons/website/static/src/js/website.js

@@ -118,7 +118,7 @@
             var $editables = $('[data-oe-model]')
                     .not('link, script')
                     // FIXME: propagation should make "meta" blocks non-editable in the first place...
-                    .not('.oe_snippet_editor')
+                    .not('.oe_snippets,.oe_snippet, .oe_snippet *')
                     .prop('contentEditable', true)
                     .addClass('oe_editable');
             var $rte_ables = $editables.not('[data-oe-type]');
@@ -324,6 +324,7 @@
             
             this.$('.oe_snippet').draggable({
                 helper: 'clone',
+                appendTo: 'body',
                 start: function(){
                     var snippet = $(this);
                  
@@ -333,15 +334,25 @@
                     });
 
                     $('.oe_drop_zone').droppable({
-                        hoverClass: "oe_hover",
+                        over:   function(){
-                        drop:   function(event,ui){
+                            // FIXME: stupid hack to prevent multiple droppable to activate at once ... 
-                            $(this).replaceWith(snippet.find('.oe_snippet_body').clone());
+                            // it's not even working properly but it's better than nothing.
+                            $(".oe_drop_zone.oe_hover").removeClass("oe_hover");
+                            $(this).addClass("oe_hover");
+                        },
+                        out:    function(){
+                            $(this).removeClass("oe_hover");
+                        },
+                        drop:   function(){
+                            $(".oe_drop_zone.oe_hover")
+                                .replaceWith(snippet.find('.oe_snippet_body').clone())
+                                .removeClass('oe_snippet_body');
                         },
                     });
                 },
                 stop: function(){
                     self.deactivate_drop_zones();
-                }
+                },
             });
         },
         // A generic drop zone generator. two css selectors can be provided

addons/website/views/views.xml

@@ -401,22 +401,92 @@
 
         <template id="snippets">
 
-            <div class='oe_snippet' name='FooBar' data-selector-siblings='p,h1,h2,h3,h4,h5'>
+            <div class='oe_snippet' name='Spacer' data-selector-siblings='#wrap .container'>
-                <div class='oe_snippet_thumbnail'>
+                <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
-                    foobar
+                <div class="oe_snippet_body container mt32"></div>
-                </div>
-                <div class='oe_snippet_body'>
-                    FOOBAR
-                </div>
             </div>
 
-            <div class='oe_snippet' name='BarFoo' data-selector-childs='.container'>
+            <div class='oe_snippet' name='FooBar' data-selector-siblings='#wrap .container'>
-                <div class='oe_snippet_thumbnail'>
+                <div class='oe_snippet_thumbnail oe_label'>
-                    barfoo
+                    Main Title
-                </div>
-                <div class='oe_snippet_body'>
-                    BARFOO
                 </div>
+                <section class="oe_snippet_body container">
+                    <div class="row">
+                        <div class="span12 text-center">
+                            <h1 class='mt64'>Welcome To Your New Homepage,</h1>
+                            <h2 class='mt32 subheader'>where <b><em>everything</em></b> can be customized </h2>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            <div class='oe_snippet' name='BarFoo' data-selector-siblings='#wrap .container'>
+                <section class="oe_snippet_body container">
+                    <div class="row">
+                        <div class="span12 text-center">
+                            <h2 class='mt48'>Ut enim ad minim veniam</h2>
+                        </div>
+                    </div>
+                    <div class="row mt32">
+                        <div class="span4">
+                            <img class='img-rounded' src="/website/static/src/img/china_thumb.jpg"/>
+                            <h4 class='mt16'>Cillum Dolore</h4>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+                                sed do eiusmod tempor incididunt ut labore et dolore magna 
+                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
+                                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                            </p>
+                        </div>
+                        <div class="span4">
+                            <img class='img-rounded' src="/website/static/src/img/desert_thumb.jpg"/>
+                            <h4 class='mt16'>Mollit Anim</h4>
+                            <p>
+                                Duis aute irure dolor in reprehenderit in voluptate velit 
+                                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
+                                occaecat cupidatat non proident, sunt in culpa qui officia 
+                                deserunt mollit anim id est laborum
+                            </p>
+                        </div>
+                        <div class="span4">
+                            <img class='img-rounded' src="/website/static/src/img/deers_thumb.jpg"/>
+                            <h4 class='mt16'>Nemo Enim Ipsam</h4>
+                            <p>
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                                quae ab illo inventore veritatis et quasi architecto beatae vitae
+                                dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                            </p>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            <div class='oe_snippet' name='Header' data-selector-siblings='#wrap .container'>
+                <section class="container oe_snippet_body">
+                    <div class="row">
+                        <div class="span5">
+                            <img class='img-rounded' src="/website/static/src/img/island.jpg"/>
+                        </div>
+                        <div class="span6 offset1">
+                            <p class='mt16'>
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+                                sed do eiusmod tempor incididunt ut labore et dolore magna 
+                                aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
+                                ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                            </p>
+                            <p>
+                                Duis aute irure dolor in reprehenderit in voluptate velit 
+                                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
+                                occaecat cupidatat non proident, sunt in culpa qui officia 
+                                deserunt mollit anim id est laborum
+                            </p>
+                            <div class="text-center">
+                                <a href="http://www.openerp.com/start" class="btn mt16 btn-large btn-primary">Call To  <em>Action</em></a>
+                            </div>
+                        </div>
+                    </div>
+                </section>
             </div>
 
         </template>