[IMP] Editor flicker+resize (cf. task: [CMS] Source editor)

bzr revid: ddm@openerp.com-20131016091947-5aymhkl1we878bdl

2 files changed, 17 insertions, 29 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index ebcb7f43826..845d77cad2c 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /* ---- CKEditor Minimal Reset ---- */
 .navbar.navbar-inverse .cke_chrome {
   border: none;
@@ -602,17 +603,12 @@ table.editorbar-panel td.selected {
 
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
-  -webkit-transition: all 0.2s ease-in;
-  -moz-transition: all 0.2s ease-in;
-  -o-transition: all 0.2s ease-in;
-  transition: all 0.2s ease-in;
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
-  opacity: 0.3;
   position: fixed;
   top: 51px;
   right: 0;
   z-index: 1000;
   height: 100%;
+  width: 720px;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title {
   width: 100%;
@@ -643,15 +639,11 @@ table.editorbar-panel td.selected {
   left: 0;
   width: 720px;
 }
-.oe_ace_view_editor:hover {
+.oe_ace_view_editor.oe_ace_open {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
 }
-.oe_ace_view_editor.oe_ace_open {
-  width: 720px;
-}
 .oe_ace_view_editor.oe_ace_closed {
-  width: 0;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 1ef6d67bb49..db8b0bbf460 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -4,15 +4,15 @@
 @import "compass/css3/user-interface"
 @import "compass/css3/transition"
 
-//smartphones, iPhone, portrait 480x320 phones 
+//smartphones, iPhone, portrait 480x320 phones
 $smart_phone: 320px
 //portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.*/
-$small-tablet: 481px 
+$small-tablet: 481px
 //portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
-$portrait-tablet: 641px 
-//tablet, landscape iPad, lo-res laptops ands desktops 
+$portrait-tablet: 641px
+//tablet, landscape iPad, lo-res laptops ands desktops
 $tablet: 961px
-//big landscape tablets, laptops, and desktops  
+//big landscape tablets, laptops, and desktops
 $desktop: 1025px
 
 /* ---- CKEditor Minimal Reset ---- */
@@ -179,7 +179,7 @@ table.editorbar-panel
                 background: black !important
             > a
                 padding: 2px 10px !important
-                width: 100% 
+                width: 100%
                 display: block
                 border: 0
         z-index: 1
@@ -189,13 +189,13 @@ table.editorbar-panel
         display: inline-block
         white-space: nowrap
         background: black
-        > div   
+        > div
             background: rgb(0,0,0)
             label
                 width: 44px
                 color: #fff
                 padding-left: 10px
-                
+
                 div
                     width: 100px
                     text-align: center
@@ -267,13 +267,13 @@ table.editorbar-panel
         margin: 0px -24px !important
     &.oe_overlay
         border-radius: 3px
-        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
         //background-size: 100px 100px
         background: rgba(153, 0, 255,.5)
-        
+
 .oe_drop_zone, .oe_drop_zone_style
     border: none
-    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) 
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
     //background-size: 100px 100px
     background: rgba(153, 0, 255, .3)
     +border-radius(4px)
@@ -293,7 +293,7 @@ table.editorbar-panel
     display: none
     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)) 
+    //@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)
@@ -476,13 +476,12 @@ $navbar_height: 51px
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
     line-height: normal
 .oe_ace_view_editor
-    @include transition(all 0.2s ease-in)
-    +opacity(0.3)
     position: fixed
     top: $navbar_height
     right: 0
     z-index: 1000
     height: 100%
+    width: $ace_width
     .oe_ace_view_editor_title
         width: 100%
         padding-top: 4px
@@ -504,12 +503,9 @@ $navbar_height: 51px
         bottom: $navbar_height
         left: 0
         width: $ace_width
-    &:hover
-        +opacity(1)
     &.oe_ace_open
-        width: $ace_width
+        +opacity(1)
     &.oe_ace_closed
-        width: 0
         +opacity(0)
 
 /* ---- EDITOR TOUR ---- */