[FIX] website: editor: pointer-events:none for ie doesn't work (because ie). Change snippet overlay to fix this ie bug

bzr revid: chm@openerp.com-20140226175558-2gyix2zgdawf87yz

2 files changed, 77 insertions, 65 deletions

diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css
index 18f3852db2c..a19baa33fd6 100644
--- a/addons/website/static/src/css/snippets.css
+++ b/addons/website/static/src/css/snippets.css
@@ -80,10 +80,8 @@
   -moz-user-select: none;
   user-select: none;
   cursor: move;
-  pointer-events: none;
 }
 .oe_snippet .oe_snippet_thumbnail {
-  pointer-events: auto;
   text-align: center;
   height: 100%;
   background: transparent;
@@ -200,6 +198,7 @@
 
 .oe_overlay {
   display: none;
+  height: 0;
   position: absolute;
   background: transparent;
   -webkit-border-radius: 3px;
@@ -214,20 +213,12 @@
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  pointer-events: none;
 }
 .oe_overlay.oe_active {
   display: block;
-  border-style: dashed;
-  border-width: 1px;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset;
-  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_handle {
   display: block !important;
-  pointer-events: auto;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -238,7 +229,18 @@
   height: 16px;
   margin: -2px;
 }
+.oe_overlay .oe_handle > div {
+  z-index: 1;
+  position: absolute;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: #666666;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button {
+  z-index: 2;
   position: relative;
   top: 50%;
   left: 50%;
@@ -270,56 +272,70 @@
   -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.e, .oe_overlay .oe_handle.w {
+  top: 4px;
+  height: 100%;
+}
 .oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before {
   content: "\f0d9-\f0da";
   line-height: 16px;
 }
+.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div {
+  width: 0;
+  height: 100%;
+  top: 2px;
+  left: 8px;
+}
 .oe_overlay .oe_handle.e {
   left: auto;
-  top: 2px;
-  height: 100%;
   right: -6px;
   cursor: w-resize;
 }
 .oe_overlay .oe_handle.w {
-  top: 2px;
-  height: 100%;
   left: -6px;
   cursor: e-resize;
 }
+.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n {
+  left: 2px;
+  width: 100%;
+}
 .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before {
-  z-index: 0;
   content: "\f07d";
   text-align: center;
   padding: 1px;
 }
+.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div {
+  width: 100%;
+  height: 0;
+  top: 7px;
+  left: 1px;
+}
 .oe_overlay .oe_handle.s {
   top: auto;
-  left: 2px;
-  width: 100%;
-  bottom: -6px;
   cursor: n-resize;
 }
 .oe_overlay .oe_handle.n {
-  left: 2px;
-  width: 100%;
-  top: -6px;
   cursor: s-resize;
 }
+.oe_overlay .oe_handle.n > div {
+  top: 5px;
+}
 .oe_overlay .oe_handle.size {
+  z-index: 3;
   top: auto;
-  left: 2px;
-  width: 100%;
+  left: 50%;
   bottom: -6px;
 }
 .oe_overlay .oe_handle.size .oe_handle_button {
-  z-index: 1;
+  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);
@@ -328,25 +344,20 @@
   -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 div {
-  border-style: dashed;
-  border-width: 0 0 1px 0;
-  border-color: rgba(0, 0, 0, 0.5);
-  position: relative;
-  top: 8px;
-}
 .oe_overlay .icon.btn {
   display: inline-block;
 }
 .oe_overlay .oe_overlay_options {
   position: absolute;
-  width: 100%;
+  left: 50% !important;
   text-align: center;
   top: -11px;
   z-index: 1002;
 }
+.oe_overlay .oe_overlay_options > .btn-group {
+  left: -50%;
+}
 .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a {
-  pointer-events: auto;
   cursor: pointer;
 }
 .oe_overlay .oe_overlay_options .dropdown {
@@ -505,7 +516,6 @@
   box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59);
 }
 .oe_snippet_editor .oe_snippet > * {
-  pointer-events: none;
   margin-top: 16px;
   line-height: 1em;
   zoom: 0.6;
diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass
index d185ddd2932..afdb261a2a5 100644
--- a/addons/website/static/src/css/snippets.sass
+++ b/addons/website/static/src/css/snippets.sass
@@ -64,9 +64,7 @@
     overflow: hidden
     +user-select(none)
     cursor: move
-    pointer-events: none
     .oe_snippet_thumbnail
-        pointer-events: auto
         text-align: center
         height: 100%
         background: transparent
@@ -150,22 +148,17 @@
 
 .oe_overlay
     display: none
+    height: 0
     position: absolute
     background: transparent
     //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
     +border-radius(3px)
     @include transition(opacity 100ms linear)
     +box-sizing(border-box)
-    pointer-events: none
     &.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)
-        border-color: rgba(0, 0, 0, 0.5)
     .oe_handle
         display: block !important
-        pointer-events: auto
         position: absolute
         top: 50%
         left: 50%
@@ -173,7 +166,15 @@
         width: 16px
         height: 16px
         margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
         &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
             position: relative
             top: 50%
             left: 50%
@@ -196,72 +197,74 @@
                 color: #fff
                 +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
         &.e, &.w
+            top: 4px
+            height: 100%
             &:before
                 content: "\f0d9-\f0da"
                 line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
         &.e
             left: auto
-            top: 2px
-            height: 100%
             right: -6px
             cursor: w-resize
         &.w
-            top: 2px
-            height: 100%
             left: -6px
             cursor: e-resize
         &.s, &.n
+            left: 2px
+            width: 100%
             &:before
-                z-index: 0
                 content: "\f07d"
                 text-align: center
                 padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
         &.s
             top: auto
-            left: 2px
-            width: 100%
-            bottom: -6px
             cursor: n-resize
         &.n
-            left: 2px
-            width: 100%
-            top: -6px
             cursor: s-resize
+            > div
+                top: 5px
         &.size
+            z-index: 3
             top: auto
-            left: 2px
-            width: 100%
+            left: 50%
             bottom: -6px
             .oe_handle_button
-                z-index: 1
+                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))
-            div
-                border-style: dashed
-                border-width: 0 0 1px 0
-                border-color: rgba(0, 0, 0, 0.5)
-                position: relative
-                top: 8px
 
     .icon.btn
         display: inline-block
 
     .oe_overlay_options
         position: absolute
-        width: 100%
+        left: 50% !important
         text-align: center
         top: -11px
         z-index: 1002
+        > .btn-group
+            left: -50%
         .btn, a
-            pointer-events: auto
             cursor: pointer
         .dropdown
             display: inline-block
@@ -392,7 +395,6 @@
             border: 2px solid rgb(151, 137, 255)
             box-shadow: 0px 3px 17px rgba(99, 53, 150, 0.59)
         & > *
-            pointer-events: none
             margin-top: 16px
             line-height: 1em
             zoom: 0.6