[IMP] website snippet: icones goto parent snippet, clean css, unactive snippet when click outside

bzr revid: chm@openerp.com-20131203100449-7ups314ffru0kobh

4 files changed, 119 insertions, 107 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index f05db4c88b8..6da7eb01a04 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -441,11 +441,20 @@ ul.oe_menu_editor .disclose {
   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(0, 0, 0, 0.5);
 }
-.oe_overlay.oe_active .oe_handle {
+.oe_overlay .oe_handle {
   display: block !important;
   pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  margin: -2px;
 }
-.oe_overlay.oe_active .oe_handle:before {
+.oe_overlay .oe_handle:before {
   position: relative;
   top: 50%;
   left: 50%;
@@ -470,23 +479,49 @@ ul.oe_menu_editor .disclose {
   -o-transition: background 100ms linear;
   transition: background 100ms linear;
 }
-.oe_overlay.oe_active .oe_handle:hover:before {
+.oe_overlay .oe_handle:hover:before {
   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 {
+.oe_overlay .oe_handle.e {
+  left: auto;
+  top: 2px;
+  height: 100%;
+  right: -4px;
+  cursor: w-resize;
+}
+.oe_overlay .oe_handle.e:before {
   content: "\F061";
 }
-.oe_overlay.oe_active .oe_handle.s:before {
+.oe_overlay .oe_handle.s {
+  top: auto;
+  left: 2px;
+  width: 100%;
+  bottom: -4px;
+  cursor: n-resize;
+}
+.oe_overlay .oe_handle.s:before {
   content: "\F063";
 }
-.oe_overlay.oe_active .oe_handle.w:before {
+.oe_overlay .oe_handle.w {
+  top: 2px;
+  height: 100%;
+  left: -4px;
+  cursor: e-resize;
+}
+.oe_overlay .oe_handle.w:before {
   content: "\F060";
 }
-.oe_overlay.oe_active .oe_handle.n:before {
+.oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+  top: -4px;
+  cursor: s-resize;
+}
+.oe_overlay .oe_handle.n:before {
   content: "\F062";
 }
 .oe_overlay .icon.btn {
@@ -528,36 +563,6 @@ ul.oe_menu_editor .disclose {
   margin: -4px;
 }
 
-.oe_handle.n {
-  left: 2px;
-  width: 100%;
-  top: 0px;
-  cursor: s-resize;
-}
-
-.oe_handle.e {
-  left: auto;
-  top: 2px;
-  height: 100%;
-  right: 0px;
-  cursor: w-resize;
-}
-
-.oe_handle.s {
-  top: auto;
-  left: 2px;
-  width: 100%;
-  bottom: 0px;
-  cursor: n-resize;
-}
-
-.oe_handle.w {
-  top: 2px;
-  height: 100%;
-  left: 0px;
-  cursor: e-resize;
-}
-
 .s-resize-important, .s-resize-important * {
   cursor: s-resize !important;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 1e35c352374..2c775be3b04 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -331,37 +331,66 @@ ul.oe_menu_editor
         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(0, 0, 0, 0.5)
-        .oe_handle
-            display: block !important
-            pointer-events: auto
-            &:before
-                position: relative
-                top: 50%
-                left: 50%
-                display: block
-                background: rgba(255, 255, 255, 1)
-                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
-                font-family: FontAwesome
-                color: rgba(0,0,0,.5)
-                @include transition(background 100ms linear)
-            &:hover:before
-                background: rgba(0, 0, 0, .5)
-                color: #fff
-                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
-        .oe_handle.e:before
+    .oe_handle
+        display: block !important
+        pointer-events: auto
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 12px
+        height: 12px
+        margin: -2px
+        &:before
+            position: relative
+            top: 50%
+            left: 50%
+            display: block
+            background: rgba(255, 255, 255, 1)
+            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
+            font-family: FontAwesome
+            color: rgba(0,0,0,.5)
+            @include transition(background 100ms linear)
+        &:hover:before
+            background: rgba(0, 0, 0, .5)
+            color: #fff
+            +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+    .oe_handle.e
+        left: auto
+        top: 2px
+        height: 100%
+        right: -4px
+        cursor: w-resize
+        &:before
             content: "\F061"
-        .oe_handle.s:before
+    .oe_handle.s
+        top: auto
+        left: 2px
+        width: 100%
+        bottom: -4px
+        cursor: n-resize
+        &:before
             content: "\F063"
-        .oe_handle.w:before
+    .oe_handle.w
+        top: 2px
+        height: 100%
+        left: -4px
+        cursor: e-resize
+        &:before
             content: "\F060"
-        .oe_handle.n:before
+    .oe_handle.n
+        left: 2px
+        width: 100%
+        top: -4px
+        cursor: s-resize
+        &:before
             content: "\F062"
 
     .icon.btn
@@ -395,29 +424,6 @@ ul.oe_menu_editor
     height: 8px
     margin: -4px
 
-.oe_handle.n
-    left: 2px
-    width: 100%
-    top: 0px
-    cursor: s-resize
-.oe_handle.e
-    left: auto
-    top: 2px
-    height: 100%
-    right: 0px
-    cursor: w-resize
-.oe_handle.s
-    top: auto
-    left: 2px
-    width: 100%
-    bottom: 0px
-    cursor: n-resize
-.oe_handle.w
-    top: 2px
-    height: 100%
-    left: 0px
-    cursor: e-resize
-
 .s-resize-important, .s-resize-important *
     cursor: s-resize !important
 .n-resize-important, .n-resize-important *
diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 6d9a2ff0ea1..c083aeea70f 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -184,23 +184,24 @@
         bind_snippet_click_editor: function () {
             var self = this;
             var snipped_event_flag = false;
-            $("body").on('click', "[data-oe-model] [data-snippet-id], [data-oe-model][data-snippet-id]", function (event) {
-                    if (snipped_event_flag) {
-                        return;
-                    }
-                    snipped_event_flag = true;
-                    setTimeout(function () {snipped_event_flag = false;}, 0);
-                    var $target = $(event.currentTarget);
-                    if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
-                        return;
-                    }
-                    self.make_active($target);
-                });
-            $("[data-oe-model]").on('click', function () {
-                    if (!snipped_event_flag && self.$active_snipped_id && !self.$active_snipped_id.parents("[data-snippet-id]:first")) {
-                        self.make_active(false);
-                    }
-                });
+            $("#wrapwrap").on('click', function (event) {
+                if (snipped_event_flag) {
+                    return;
+                }
+                snipped_event_flag = true;
+                setTimeout(function () {snipped_event_flag = false;}, 0);
+                var $target = $(event.srcElement);
+                if (!$target.attr("data-snippet-id")) {
+                    $target = $target.parents("[data-snippet-id]:first");
+                }
+                if (!$target.attr("data-oe-model") && !$target.parents("[data-oe-model]:first").length) {
+                    $target = false;
+                }
+                if (self.$active_snipped_id && self.$active_snipped_id.is($target)) {
+                    return;
+                }
+                self.make_active($target);
+            });
         },
         snippet_blur: function ($snipped_id) {
             if ($snipped_id) {
@@ -233,7 +234,7 @@
                 this.snippet_blur(this.$active_snipped_id);
                 this.$active_snipped_id = false;
             }
-            if ($snipped_id) {
+            if ($snipped_id && $snipped_id.length) {
                 if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) {
                     this.snippets.push($snipped_id.get(0));
                 }
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 549b997e794..ecc3bb8cc38 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -61,7 +61,7 @@
         <div class="oe_overlay">
             <div class="oe_overlay_options">
                 <div class="btn-group">
-                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><span class="icon-upload-alt"/></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"></i></a>
                     <div class="dropdown oe_options hidden btn-group">
                         <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a>
                         <ul class="dropdown-menu" role="menu"></ul>