[IMP] CSS transparency support

bzr revid: ddm@openerp.com-20130911154502-r2493m71f2x8vvdl

4 files changed, 46 insertions, 36 deletions

diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 0b055aaf350..95845c7d7f0 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -390,6 +390,8 @@ table.editorbar-panel td.selected {
 
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
+  transition: all 0.2s ease-in;
+  opacity: 0.3;
   position: fixed;
   top: 51px;
   right: 0;
@@ -398,33 +400,34 @@ table.editorbar-panel td.selected {
 }
 .oe_ace_view_editor .oe_ace_view_editor_title {
   width: 100%;
-  padding-left: 2px;
-  height: 34px;
-  background-color: #111111;
+  padding-top: 4px;
+  padding-left: 4px;
+  height: 40px;
+  background: #2f3129;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
   width: 50%;
-  height: 34px;
+  height: 32px;
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .btn {
-  height: 34px;
+  height: 32px;
   padding: 0 4px 0 4px;
 }
 .oe_ace_view_editor .ace_editor {
   position: absolute;
-  top: 34px;
+  top: 40px;
   right: 0;
   bottom: 51px;
   left: 0;
   width: 720px;
 }
-
-.oe_ace_closed {
-  width: 0;
-  transition: width 0.4s ease-in;
+.oe_ace_view_editor:hover {
+  opacity: 1;
 }
-
-.oe_ace_open {
+.oe_ace_view_editor.oe_ace_open {
   width: 720px;
-  transition: width 0.4s ease-in;
+}
+.oe_ace_view_editor.oe_ace_closed {
+  width: 0;
+  opacity: 0;
 }
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index c1f4d578b98..7230a14b695 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -340,11 +340,13 @@ $remove_color: $icon_close
 /* ---- ACE EDITOR ---- */
 
 $ace_width: 720px
-$editorbar_height: 34px
+$editorbar_height: 40px
 // TODO Fix => might break with themes
 $navbar_height: 51px
 
 .oe_ace_view_editor
+    transition: all 0.2s ease-in
+    opacity: 0.3
     position: fixed
     top: $navbar_height
     right: 0
@@ -352,14 +354,15 @@ $navbar_height: 51px
     height: 100%
     .oe_ace_view_editor_title
         width: 100%
-        padding-left: 2px
+        padding-top: 4px
+        padding-left: 4px
         height: $editorbar_height
-        background-color: #111
+        background: #2F3129
         .oe_view_list
             width: 50%
-            height: $editorbar_height
+            height: $editorbar_height - 8px
         .btn
-            height: $editorbar_height
+            height: $editorbar_height - 8px
             padding: 0 4px 0 4px
     .ace_editor
         position: absolute
@@ -368,11 +371,10 @@ $navbar_height: 51px
         bottom: $navbar_height
         left: 0
         width: $ace_width
-
-.oe_ace_closed
-    width: 0
-    transition: width 0.4s ease-in
-
-.oe_ace_open
-    width: $ace_width
-    transition: width 0.4s ease-in
+    &:hover
+        opacity: 1
+    &.oe_ace_open
+        width: $ace_width
+    &.oe_ace_closed
+        width: 0
+        opacity: 0
diff --git a/addons/website/static/src/js/website.ace.js b/addons/website/static/src/js/website.ace.js
index 89ab84db493..77d0e30dd70 100644
--- a/addons/website/static/src/js/website.ace.js
+++ b/addons/website/static/src/js/website.ace.js
@@ -1,6 +1,8 @@
 (function () {
     'use strict';
 
+    var globalEditor;
+
     var website = openerp.website;
     website.templates.push('/website/static/src/xml/website.ace.xml');
 
@@ -9,7 +11,12 @@
             'click a[data-action=ace]': 'launchAce',
         }),
         launchAce: function () {
-            new website.ace.ViewEditor(this).appendTo($(document.body));
+            if (globalEditor) {
+                globalEditor.open();
+            } else {
+                globalEditor = new website.ace.ViewEditor(this);
+                globalEditor.appendTo($(document.body));
+            }
         },
     });
 
@@ -63,10 +70,11 @@
             var viewId = $(document.documentElement).data('view-xmlid');
             openerp.jsonRpc('/website/customize_template_get', 'call', {
                 'xml_id': viewId,
-                'optional': false
+                'optional': false,
             }).then(function (views) {
                 self.loadViewList.call(self, views);
             });
+            this.$el.hover();
         },
         selectedViewId: function () {
             return this.$('#ace-view-list').val();
@@ -91,7 +99,7 @@
             openerp.jsonRpc('/web/dataset/call', 'call', {
                 model: 'ir.ui.view',
                 method: 'read',
-                args: [[this.selectedViewId()], ['arch']]
+                args: [[this.selectedViewId()], ['arch']],
             }).then(function(result) {
                 if (result && result.length > 0) {
                     var xml = new website.ace.XmlDocument(result[0].arch)
@@ -115,7 +123,7 @@
                 openerp.jsonRpc('/web/dataset/call', 'call', {
                     model: 'ir.ui.view',
                     method: 'write',
-                    args: [[this.selectedViewId()], { 'arch':  xml.xml }]
+                    args: [[this.selectedViewId()], { 'arch':  xml.xml }],
                 }).then(function(result) {
                     self.reloadPage();
                 }).fail(function (error) {
@@ -134,16 +142,13 @@
             alert("Malformed XML document");
         },
         open: function () {
-            var $close = this.$('.pull-right');
-            this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
-                $close.fadeIn(200);
-            }).removeClass('oe_ace_closed').addClass('oe_ace_open');
+            this.$el.removeClass('oe_ace_closed').addClass('oe_ace_open');
             this.displayView();
         },
         close: function () {
             var self = this;
-            this.$('.pull-right').fadeOut(100);
             this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
+                globalEditor = null;
                 self.destroy.call(self);
             }).removeClass('oe_ace_open').addClass('oe_ace_closed');
         },
diff --git a/addons/website/static/src/xml/website.ace.xml b/addons/website/static/src/xml/website.ace.xml
index cda74164a28..b546d41a7ec 100644
--- a/addons/website/static/src/xml/website.ace.xml
+++ b/addons/website/static/src/xml/website.ace.xml
@@ -8,7 +8,7 @@
                 </select>
                 <button data-action="save" type="submit" class="btn btn-success">Save</button>
                 <button data-action="format" type="button" class="btn btn-warning">Format</button>
-                <button data-action="close" type="button" class="btn btn-info pull-right" style="display:none">Close</button>
+                <button data-action="close" type="button" class="btn btn-info">Close</button>
             </div>
             <div id="ace-view-editor"/>
         </div>