[IMP] website: snippet editor: change size automatic button into a cross between resize handler

bzr revid: chm@openerp.com-20140318130414-yb29wtm7oo4bammz

addons/website/static/src/css/snippets.css

@@ -328,14 +328,10 @@
 }
 .oe_overlay .oe_handle.size .oe_handle_button {
   z-index: 3;
-  content: "Resize";
-  width: 64px;
   text-align: center;
   margin-left: -32px;
   margin-top: -10px;
-  cursor: row-resize;
   left: 0px;
-  top: 9px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button:hover {
   background: rgba(30, 30, 30, 0.8);
@@ -344,6 +340,18 @@
   -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_handle.size .size {
+  width: 64px;
+  cursor: row-resize;
+  top: 9px;
+}
+.oe_overlay .oe_handle.size .auto_size {
+  width: 20px;
+  padding: 0 5px;
+  top: 1px;
+  margin-left: 36px;
+  cursor: pointer;
+}
 .oe_overlay .oe_handle.readonly {
   cursor: auto !important;
 }

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

@@ -240,18 +240,24 @@
             bottom: -6px
             .oe_handle_button
                 z-index: 3
-                content: "Resize"
-                width: 64px
                 text-align: center
                 margin-left: -32px
                 margin-top: -10px
-                cursor: row-resize
                 left: 0px
-                top: 9px
                 &:hover
                     background: rgba(30, 30, 30, .8)
                     color: #fff
                     +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+            .size
+                width: 64px
+                cursor: row-resize
+                top: 9px
+            .auto_size
+                width: 20px
+                padding: 0 5px
+                top: 1px
+                margin-left: 36px
+                cursor: pointer
         &.readonly
             cursor: auto !important
             &:before, &.size

addons/website/static/src/js/website.snippets.editor.js

@@ -1021,7 +1021,7 @@
             if (resize_values.w) this.$overlay.find(".oe_handle.w").removeClass("readonly");
             if (resize_values.size) this.$overlay.find(".oe_handle.size").removeClass("readonly");
 
-            this.$overlay.find(".oe_handle:not(:has(.oe_handle_button)), .oe_handle .oe_handle_button").on('mousedown', function (event){
+            this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event){
                 event.preventDefault();
 
                 var $handle = $(this);
@@ -1123,6 +1123,11 @@
                 $body.mousemove(body_mousemove);
                 $body.mouseup(body_mouseup);
             });
+            this.$overlay.find(".oe_handle.size .auto_size").on('click', function (event){
+                self.$target.css("height", "");
+                self.BuildingBlock.cover_target(self.$overlay, self.$target);
+                return false;
+            });
         },
         getSize: function () {
             this.grid = {};
@@ -1286,15 +1291,6 @@
             this.grid.size = 8;
             return this.grid;
         },
-        start: function () {
-            var self = this;
-            this._super();
-            this.$el.find(".js_size_auto").on('click', function (event){
-                self.$target.css("height", "");
-                self.BuildingBlock.cover_target(self.$overlay, self.$target);
-                return false;
-            });
-        },
     });
 
     website.snippet.options.parallax = website.snippet.Option.extend({

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

@@ -38,7 +38,10 @@
                 <div class='oe_handle n readonly'><div></div></div>
                 <div class='oe_handle e readonly'><div></div></div>
                 <div class='oe_handle w readonly'><div></div></div>
-                <div class='oe_handle size readonly'><div class="oe_handle_button size">Resize</div></div>
+                <div class='oe_handle size readonly'>
+                    <div class="oe_handle_button size">Resize</div>
+                    <div class="oe_handle_button auto_size">x</div>
+                </div>
                 <div class='oe_handle s readonly'><div></div></div>
             </div>
         </div>

addons/website/views/snippets.xml

@@ -952,9 +952,6 @@
     <div data-snippet-option-id='resize'
         data-selector="section, .carousel, .parallax"
         data-selector-children=".oe_structure, [data-oe-type=html]">
-        <li>
-            <a href="#" class="button js_size_auto">Size Automatic</a>
-        </li>
     </div>
 
     <div data-snippet-option-id='margin-x'