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

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

3 files changed, 47 insertions, 34 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 ---- */
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index 1a0417ff11a..d640839acf9 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -66,6 +66,9 @@
     });
 
     website.ace.ViewEditor = openerp.Widget.extend({
+        resizing: false,
+        refX: 0,
+        minWidth: 40,
         template: 'website.ace_view_editor',
         events: {
             'change #ace-view-list': 'displaySelectedView',
@@ -89,6 +92,32 @@
                 self.loadViews.call(self, views);
                 self.open.call(self);
             });
+
+            var $editor = $('.ace_editor');
+            function resizeEditor (target) {
+                var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), self.minWidth));
+                $editor.width(width);
+                self.aceEditor.resize();
+                self.$el.width(width);
+            }
+            function startResizing (e) {
+                self.refX = e.pageX;
+                self.resizing = true;
+            }
+            function stopResizing () {
+                self.resizing = false;
+            }
+            function updateWidth (e) {
+                 if (self.resizing) {
+                    var offset = e.pageX - self.refX;
+                    var width = self.$el.width() - offset;
+                    self.refX = e.pageX;
+                    resizeEditor(width);
+                }
+            }
+            document.body.addEventListener('mouseup', stopResizing, true);
+            self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
+            $(document).mousemove(updateWidth);
         },
         loadViews: function (views) {
             var self = this;
@@ -205,11 +234,7 @@
         },
         close: function () {
             window.location.hash = "";
-            var self = this;
-            this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
-                globalEditor = null;
-                self.destroy.call(self);
-            }).removeClass('oe_ace_open').addClass('oe_ace_closed');
+            this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
         },
     });