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 @@ - +