[IMP] website: layout options

bzr revid: chm@openerp.com-20130912145302-39eme37759sjm3rv

4 files changed, 79 insertions, 49 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 834baff3e35..33845547c46 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;
@@ -24,7 +25,7 @@
   width: 100%;
   padding: 2px;
   margin: 0;
-  z-index: 10000;
+  z-index: 20000;
   background-color: #414141;
   background: -webkit-linear-gradient(#646060, #262626);
   box-sizing: border-box;
@@ -118,7 +119,7 @@ table.editorbar-panel td.selected {
   background: #282828;
   box-shadow: 0px 10px 10px -10px black inset;
   overflow-y: auto;
-  z-index: 100;
+  z-index: 20000;
 }
 #oe_snippets .nav-pills {
   padding: 3px 8px;
@@ -217,7 +218,7 @@ table.editorbar-panel td.selected {
 }
 .oe_drop_zone.oe_hover {
   background: rgba(0, 255, 133, 0.22);
-  z-index: 97;
+  z-index: 1001;
 }
 
 /* ---- SNIPPET MANIPULATOR ---- */
@@ -257,23 +258,33 @@ table.editorbar-panel td.selected {
 }
 .oe_overlay .oe_overlay_options {
   display: none;
-  z-index: 99;
+  z-index: 1002;
 }
 .oe_overlay .oe_overlay_options .oe_option {
+  top: 50%;
+  left: 50%;
   pointer-events: auto;
   position: absolute;
+  display: block;
+  z-index: 1002;
 }
 .oe_overlay .oe_overlay_options .oe_option.n {
-  top: 0px;
+  top: -11px;
 }
 .oe_overlay .oe_overlay_options .oe_option.e {
-  right: 0px;
+  left: auto;
+  right: -6px;
 }
 .oe_overlay .oe_overlay_options .oe_option.s {
-  bottom: 0px;
+  top: auto;
+  bottom: -10px;
 }
 .oe_overlay .oe_overlay_options .oe_option.w {
-  left: 0px;
+  left: -6px;
+}
+.oe_overlay .oe_overlay_options .oe_option > a {
+  text-decoration: none;
+  font-size: 1.2em;
 }
 .oe_overlay.oe_active .oe_overlay_options {
   display: block;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 3c1fe6a47f5..d3a58c91a13 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -25,7 +25,7 @@
     width: 100%
     padding: 2px
     margin: 0
-    z-index: 10000
+    z-index: 20000
     background-color: #414141
     background: -webkit-linear-gradient(#646060, #262626)
     box-sizing: border-box
@@ -109,7 +109,7 @@ table.editorbar-panel
     background: rgb(40,40,40)
     box-shadow: 0px 10px 10px -10px black inset
     overflow-y: auto
-    z-index: 100
+    z-index: 20000
     .nav-pills
         padding: 3px 8px
         background: #444444
@@ -195,7 +195,7 @@ table.editorbar-panel
     border-radius: 3px
     &.oe_hover
         background: rgba(0, 255, 133, 0.22)
-        z-index: 97
+        z-index: 1001
 
 /* ---- SNIPPET MANIPULATOR ---- */
 
@@ -229,18 +229,27 @@ table.editorbar-panel
 
     .oe_overlay_options
         display: none
-        z-index: 99
+        z-index: 1002
         .oe_option
+            top: 50%
+            left: 50%
             pointer-events: auto
             position: absolute
+            display: block
+            z-index: 1002
             &.n
-                top: 0px
+                top: -11px
             &.e
-                right: 0px
+                left: auto
+                right: -6px
             &.s
-                bottom: 0px
+                top: auto
+                bottom: -10px
             &.w
-                left: 0px
+                left: -6px
+            > a
+                text-decoration: none
+                font-size: 1.2em
     &.oe_active .oe_overlay_options
         display: block
 
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index a6f4428b575..398870cd0d8 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -165,19 +165,18 @@
                 if (!self.active) {
                     return;
                 }
-                if (self.editor_busy) {
-                    if($selected_target){
-                        $selected_target.data('overlay').removeClass('oe_selected');
-                    }
-                }
                 var $target = $(event.srcElement).parents("[data-snippet-id]:first");
-                if($target.length && $selected_target != $target){
-                    if($selected_target){
-                        $selected_target.data('overlay').removeClass('oe_selected');
+                if($target.length && !self.editor_busy) {
+                    if($selected_target != $target){
+                        if($selected_target){
+                            $selected_target.data('overlay').removeClass('oe_selected');
+                        }
+                        $selected_target = $target;
+                        self.create_overlay($target);
+                        $target.data('overlay').addClass('oe_selected');
                     }
-                    $selected_target = $target;
-                    self.create_overlay($target);
-                    $target.data('overlay').addClass('oe_selected');
+                } else if($selected_target) {
+                    $selected_target.data('overlay').removeClass('oe_selected');
                 }
             });
         },
@@ -373,14 +372,7 @@
             $targets.each(function () {
                 var $target = $(this);
                 if (!$target.data('overlay')) {
-                    var $zone = $(
-                        '<div class="oe_overlay">'+
-                        '    <div class="oe_overlay_options">'+
-                        '        <ul class="oe_option n w"></ul>'+
-                        '        <ul class="oe_option n"></ul>'+
-                        '        <ul class="oe_option n e"></ul>'+
-                        '    </div>'+
-                        '</div>');
+                    var $zone = $(openerp.qweb.render('website.snippet_overlay'));
                     $zone.appendTo('#oe_manipulators');
                     $zone.data('target',$target);
                     $target.data('overlay',$zone);
@@ -489,7 +481,8 @@
         *  This method is called after init and _readXMLData
         */
         start: function () {
-            if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w"));
+            if(this.$editor) this.$editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul"));
+            else this.$overlay.find(".oe_overlay_options .oe_option.n.w").hide();
         },
 
         /*
@@ -548,7 +541,7 @@
             this.$overlay.append($box.find(".oe_handles").html());
 
             var $editor = $box.find(".oe_snippet_options");
-            $editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w"));
+            $editor.prependTo(this.$overlay.find(".oe_overlay_options .oe_option.n.w ul"));
 
             $editor.on('click', '.js_box_remove', function () {
                 self.$target.detach();
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 502f72eed1c..d58676dbde2 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -21,6 +21,24 @@
         </div>
     </t>
 
+    <t t-name="website.snippet_overlay">
+        <div class="oe_overlay">
+            <div class="oe_overlay_options">
+                <div class="dropdown oe_option n w">
+                    <a data-toggle="dropdown" href="#"><i class="icon icon-cog"></i></a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>
+                </div>
+                <div class="oe_option n"><a href="#" class="js_box_move"><i class="icon icon-move"></i></a></div>
+                <div class="dropdown oe_option n e">
+                    <a data-toggle="dropdown" href="#"><i class="icon icon-remove"></i></a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                        <li><a href="#" class="button js_box_remove">Remove this snippet</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </t>
+
     <t t-name="website.snippet_manipulator">
         <div class='oe_snippet_manipulator'></div>
     </t>
@@ -28,15 +46,6 @@
     <!-- Snippets -->
 
     <div t-name="website.snippets.resize" data-snippet-id='resize'>
-        
-        <!-- editor bar to display inside the top edit bar -->
-        <li class='oe_snippet_options'>
-            <a href="#" class="button js_box_move"><i class='icon icon-move'></i></a>
-        </li>
-        <li class='oe_snippet_options'>
-            <a href="#" class="button js_box_remove"><i class="icon icon-remove"></i></a>
-        </li>
-
         <!-- custom data for the widget -->
         <div class='oe_handles'>
             <div class='oe_handle n'></div>
@@ -50,10 +59,18 @@
         
         <!-- editor bar to display inside the top edit bar -->
         <li class='oe_snippet_options'>
-            <a href="#" class="button js_add"><i class="icon icon-plus-sign"></i></a>
+            <a href="#" class="button js_add">Add layer</a>
         </li>
         <li class='oe_snippet_options'>
-            <a href="#" class="button js_remove"><i class="icon icon-minus-sign"></i></a>
+            <a href="#" class="button js_remove">Remove current layer</a>
+        </li>
+        <li>
+            <div class="dropdown">
+                <a data-toggle="dropdown" href="#">test</a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+                    <li>inside</li>
+                </ul>
+            </div>
         </li>
         <li class='oe_snippet_options'>
             <select name="carousel-background">
@@ -112,7 +129,7 @@
         <div class='oe_snippet_thumbnail oe_label' style='background-image:radial-gradient(red,orange,yellow,green,blue);'>Surprise!</div>
     </div>
 
-    <div t-name="website.snippets.spacer" data-snippet-id='spacer' data-category='structure' data-action='insert' data-selector-siblings='.container'>
+    <div t-name="website.snippets.spacer" data-snippet-id='resize' data-category='structure' data-action='insert' data-selector-siblings='.container'>
         <div class='oe_snippet_thumbnail oe_label'>Spacer</div>
         <div class="oe_snippet_body container mt32"></div>
     </div>