[FIX] website swnippet: button, column

bzr revid: chm@openerp.com-20130920144922-g9121ukw4pqm0heo

4 files changed, 31 insertions, 77 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 2b5de84c05b..7e85339aaaa 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -283,32 +283,19 @@ table.editorbar-panel td.selected {
 
 /* ---- SNIPPET MANIPULATOR ---- */
 .oe_overlay {
-  display: block;
+  display: none;
   position: absolute;
   background: transparent;
   border-radius: 3px;
-  opacity: 0;
   transition: opacity 100ms linear;
   box-sizing: border-box;
   pointer-events: none;
 }
-.oe_overlay.oe_hover {
-  opacity: 1;
-  cursor: pointer;
-}
-.oe_overlay.oe_selected, .oe_overlay.oe_active {
-  opacity: 1;
+.oe_overlay.oe_active {
+  display: block;
   border-style: dashed;
   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;
-}
-.oe_overlay.oe_selected {
-  border-color: rgba(0, 153, 255, 0.5);
-}
-.oe_overlay .oe_handle {
-  display: none !important;
-}
-.oe_overlay.oe_active {
   border-color: rgba(153, 0, 255, 0.5);
 }
 .oe_overlay.oe_active .oe_handle {
@@ -356,39 +343,22 @@ table.editorbar-panel td.selected {
   width: 100%;
   text-align: center;
   top: -11px;
-  display: none;
   z-index: 1002;
 }
-.oe_overlay .oe_overlay_options > * {
-  margin: 0 -2px 0 -3px;
-  display: inline-block;
-}
-.oe_overlay .oe_overlay_options * {
-  border-radius: 0;
-}
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
   pointer-events: auto;
   cursor: pointer;
 }
+.oe_overlay .oe_overlay_options .dropdown {
+  display: inline-block;
+}
 .oe_overlay .oe_overlay_options .dropdown-menu {
   text-align: left;
   min-width: 180px;
 }
-.oe_overlay .oe_overlay_options .oe_label {
-  position: absolute;
-  top: 3px;
-  right: 6px;
-  background: white;
-  font-size: 75%;
-  color: rgba(153, 0, 255, 0.5);
-  padding: 0 5px;
-}
 .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input {
   display: block;
 }
-.oe_overlay.oe_active .oe_overlay_options {
-  display: block;
-}
 
 .oe_handle {
   pointer-events: auto;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 20fa98ec96d..f33b15cdb92 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -249,27 +249,18 @@ table.editorbar-panel
 /* ---- SNIPPET MANIPULATOR ---- */
 
 .oe_overlay
-    display: block
+    display: none
     position: absolute
     background: transparent
     border-radius: 3px
-    opacity: 0
     transition: opacity 100ms linear
     box-sizing: border-box
     pointer-events: none
-    &.oe_hover
-        opacity: 1
-        cursor: pointer
-    &.oe_selected, &.oe_active
-        opacity: 1
+    &.oe_active
+        display: block
         border-style: dashed
         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
-    &.oe_selected
-        border-color: rgba(0, 153, 255, 0.5)
-    .oe_handle
-        display: none !important
-    &.oe_active
         border-color: rgba(153, 0, 255, 0.5)
         .oe_handle
             display: block !important
@@ -310,31 +301,17 @@ table.editorbar-panel
         width: 100%
         text-align: center
         top: -11px
-        display: none
         z-index: 1002
-        > *
-            margin: 0 -2px 0 -3px
-            display: inline-block
-        *
-            border-radius: 0
         .btn, a
             pointer-events: auto
             cursor: pointer
+        .dropdown
+            display: inline-block
         .dropdown-menu
             text-align: left
             min-width: 180px
-        .oe_label
-            position: absolute
-            top: 3px
-            right: 6px
-            background: #fff
-            font-size: 75%
-            color: rgba(153, 0, 255, 0.5)
-            padding: 0 5px
         .dropdown-menu select,.dropdown-menu input
             display: block
-    &.oe_active .oe_overlay_options
-        display: block
 
 .oe_handle
     pointer-events: auto
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index db2545ada29..7defd7b32ad 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -276,14 +276,14 @@
                 if($target.length && !self.editor_busy) {
                     if($selected_target != $target){
                         if($selected_target && $selected_target.data('overlay')){
-                            $selected_target.data('overlay').removeClass('oe_selected');
+                            $selected_target.data('overlay').removeClass('oe_hover');
                         }
                         $selected_target = $target;
                         self.create_overlay($target);
-                        $target.data('overlay').addClass('oe_selected');
+                        $target.data('overlay').addClass('oe_hover');
                     }
                 } else if($selected_target && $selected_target.data('overlay')) {
-                    $selected_target.data('overlay').removeClass('oe_selected');
+                    $selected_target.data('overlay').removeClass('oe_hover');
                 }
             });
         },
@@ -861,7 +861,6 @@
 
                     var cursor = $handle.css("cursor")+'-important';
                     $("body").addClass(cursor);
-                    self.$overlay.addClass('oe_hover');
 
                     var body_mousemove = function (event){
                         event.preventDefault();
@@ -940,10 +939,16 @@
             var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
             var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
             var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
-
+            if (offset < 0) {
+                offset = 0;
+            }
+            var colSize = beginCol - (offset - beginOffset);
+            if (colSize <= 0) {
+                colSize = 1;
+                offset = beginOffset + beginCol - 1;
+            }
             this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, ''));
 
-            var colSize = beginCol - (offset - beginOffset);
             this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
             if (offset > 0) {
                 this.$target.addClass('col-md-offset-' + offset);
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 279a362fec7..67dc7a5696b 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -73,14 +73,16 @@
     <t t-name="website.snippet_overlay">
         <div class="oe_overlay">
             <div class="oe_overlay_options">
-                <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Get Container Block"><span class="glyphicon glyphicon-open"/></a>
-                <div class="dropdown oe_options hidden">
-                    <a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Customize">Customize <span class="caret"/></a>
-                    <ul class="dropdown-menu" role="menu"></ul>
+                <div class="btn-group">
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Get Container Block"><span class="glyphicon glyphicon-open"/></a>
+                    <div class="dropdown oe_options hidden btn-group">
+                        <a href="#" data-toggle="dropdown" class="btn btn-default btn-sm" title="Customize">Customize <span class="caret"/></a>
+                        <ul class="dropdown-menu" role="menu"></ul>
+                    </div>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate"><span class="glyphicon glyphicon-tags"/></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="move"><span class="glyphicon glyphicon-move"/></a>
+                    <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove"><span class="glyphicon glyphicon-remove"/></a>
                 </div>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate"><span class="glyphicon glyphicon-tags"/></a>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="move"><span class="glyphicon glyphicon-move"/></a>
-                <a href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove"><span class="glyphicon glyphicon-remove"/></a>
             </div>
         </div>
     </t>