[IMP] website editor: allow click trough on snippet manipulators

bzr revid: fva@openerp.com-20130902091005-pnhb05fxk29z5q0r

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

@@ -96,6 +96,7 @@
   line-height: 120px;
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
 }
 .oe_snippet .oe_snippet_body {
   display: none;
@@ -161,31 +162,56 @@
 .oe_snippet_manipulator {
   display: block;
   position: absolute;
-  background: rgba(153, 0, 255, 0.1);
+  background: transparent;
   border-radius: 3px;
-  border: solid 1px rgba(153, 0, 255, 0.5);
   opacity: 0;
   transition: opacity 100ms linear;
+  box-sizing: border-box;
 }
 .oe_snippet_manipulator > .oe_handle {
   display: none;
 }
-.oe_snippet_manipulator:hover, .oe_snippet_manipulator.oe_hover {
+.oe_snippet_manipulator.oe_hover {
   opacity: 1;
+  cursor: pointer;
 }
-.oe_snippet_manipulator:hover > .oe_handle, .oe_snippet_manipulator.oe_hover > .oe_handle {
+.oe_snippet_manipulator.oe_selected {
+  opacity: 1;
+  pointer-events: none;
+  background: transparent;
+  border: solid 1px rgba(153, 0, 255, 0.5);
+}
+.oe_snippet_manipulator.oe_selected > * {
+  pointer-events: auto;
+}
+.oe_snippet_manipulator.oe_selected > .oe_handle {
   display: block;
 }
+.oe_snippet_manipulator .oe_buttons {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  background: #ad00ff;
+  color: white;
+  padding: 0px 2px;
+  border-radius: 3px;
+}
+.oe_snippet_manipulator .oe_buttons .oe_icon {
+  display: inline-block;
+  padding: 8px;
+  cursor: pointer;
+}
 
 .oe_handle {
+  pointer-events: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   display: block;
   background: white;
-  border: solid 1px rgba(153, 0, 255, 0.5);
+  border: solid 1px #9900ff;
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: 8px;
   width: 16px;
   height: 16px;
   margin: -8px;

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

@@ -89,6 +89,7 @@
         line-height: 120px
         color: white
         text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
+        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 
     .oe_snippet_body
         display: none
@@ -146,27 +147,48 @@
 .oe_snippet_manipulator
     display: block
     position: absolute
-    background: rgba(153, 0, 255, 0.1)
+    background: transparent //rgba(153, 0, 255, 0.05)
     border-radius: 3px
-    border: solid 1px rgba(153, 0, 255, 0.5)
     opacity: 0
     transition: opacity 100ms linear
+    box-sizing: border-box
     & > .oe_handle
         display: none
-    &:hover,&.oe_hover
+    &.oe_hover
         opacity: 1
+        cursor: pointer
+    &.oe_selected
+        opacity: 1
+        pointer-events: none
+        background: transparent
+        border: solid 1px rgba(153, 0, 255, 0.5)
+        & > *
+            pointer-events: auto
         & > .oe_handle
             display: block
+    .oe_buttons
+        position: absolute
+        right: 16px
+        top: 16px
+        background: rgb(173, 0, 255)
+        color: white
+        padding: 0px 2px
+        border-radius: 3px
+        .oe_icon
+            display: inline-block
+            padding: 8px
+            cursor: pointer
 
 .oe_handle
+    pointer-events: auto
     position: absolute
     top: 50%
     left: 50%
     display: block
     background: rgba(255, 255, 255, 1)
-    border: solid 1px rgba(153, 0, 255, 0.5)
+    border: solid 1px rgba(153, 0, 255, 1)
     box-sizing: border-box
-    border-radius: 2px
+    border-radius: 8px
     width: 16px
     height: 16px
     margin: -8px

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

@@ -340,6 +340,9 @@
         template: 'website.snippets',
         init: function () {
             this._super.apply(this, arguments);
+            if(!$('#oe_manipulators').length){
+                $("<div id='oe_manipulators'></div>").appendTo('body');
+            }
         },
         start: function() {
             var self = this;
@@ -549,7 +552,7 @@
                 var $target = $targets.eq(i);
                 var $zone = $(zone_template);
                 this.cover_target($zone,$target);
-                $zone.appendTo('body');
+                $zone.appendTo('#oe_manipulators');
                 $zone.data('target',$target);
             }
         },
@@ -567,8 +570,13 @@
         // activates the manipulator boxes (with resizing handles) for all snippets
         activate_snippet_manipulators: function(){
             var self = this;
+            // we generate overlay drop zones only to get an idea of where the snippet are, the drop
+            // zones are replaced by manipulators
             this.activate_overlay_zones('#wrap .container');
 
+            var $active_manipulator = null;
+            var locked = false;
+
             $('.oe_drop_zone').each(function(){;
 
                 var $zone = $(this);
@@ -577,10 +585,35 @@
 
                 self.cover_target($manipulator, $zone);
                 $manipulator.data('target',$snippet);
-                $manipulator.appendTo('body');
+                $manipulator.appendTo('#oe_manipulators');
                 $zone.remove();
 
+                $manipulator.mouseover(function(){
+                    if(!locked && $active_manipulator != $manipulator){
+                        if($active_manipulator){
+                            $active_manipulator.removeClass('oe_selected');
+                        }
+                        $active_manipulator = $manipulator;
+                        $manipulator.addClass('oe_selected');
+                    }
+                });
+                /*$manipulator.mouseleave(function(){
+                    if(!locked && $active_manipulator){
+                        $active_manipulator.removeClass('oe_selected');
+                        $active_manipulator = null;
+                    }
+                });*/
+                /*
+                $manipulator.click(function(){
+                    if($active_manipulator === $manipulator){
+                        selected = !selected;
+                        $manipulator.toggleClass('oe_selected',selected);
+                    }
+                });
+                */
+
                 $manipulator.find('.oe_handle').mousedown(function(event){
+                    locked = true;
                     var $handle = $(this);
                     var x = event.pageX;
                     var y = event.pageY;
@@ -607,6 +640,7 @@
                     });
 
                     $('body').mouseup(function(){
+                        locked = false;
                         $('body').unbind('mousemove');
                         $('body').unbind('mouseup');
                         self.deactivate_snippet_manipulators();

addons/website/static/src/xml/website.xml

@@ -69,6 +69,10 @@
 
     <t t-name="website.snippet_manipulator">
         <div class='oe_snippet_manipulator'>
+            <div class='oe_buttons'>
+                <i class='icon-move oe_icon js_move'></i>
+                <i class='icon-remove oe_icon js_remove'></i>
+            </div>
             <div class='oe_handle n'></div>
             <div class='oe_handle ne'></div>
             <div class='oe_handle e'></div>