[FIX] Proper template filtering + various

bzr revid: ddm@openerp.com-20130911132618-9n599qmiyj3k934p

addons/website/static/src/css/editor.css

@@ -394,6 +394,11 @@ table.editorbar-panel td.selected {
 }
 .oe_ace_view_editor .oe_ace_view_editor_title .oe_view_list {
   width: 50%;
+  height: 34px;
+}
+.oe_ace_view_editor .oe_ace_view_editor_title .btn {
+  height: 34px;
+  padding: 0 4px 0 4px;
 }
 .oe_ace_view_editor .ace_editor {
   position: absolute;

addons/website/static/src/css/editor.sass

@@ -332,31 +332,40 @@ $remove_color: $icon_close
 
 /* ---- ACE EDITOR ---- */
 
+$ace_width: 720px
+$editorbar_height: 34px
+// TODO Fix => might break with themes
+$navbar_height: 51px
+
 .oe_ace_view_editor
     position: fixed
-    top: 51px
+    top: $navbar_height
     right: 0
     z-index: 1000
     height: 100%
     .oe_ace_view_editor_title
         width: 100%
         padding-left: 2px
-        height: 34px
+        height: $editorbar_height
         background-color: #111
         .oe_view_list
             width: 50%
+            height: $editorbar_height
+        .btn
+            height: $editorbar_height
+            padding: 0 4px 0 4px
     .ace_editor
         position: absolute
-        top: 34px
+        top: $editorbar_height
         right: 0
-        bottom: 51px
+        bottom: $navbar_height
         left: 0
-        width: 720px
+        width: $ace_width
 
 .oe_ace_closed
     width: 0
     transition: width 0.4s ease-in
 
 .oe_ace_open
-    width: 720px
+    width: $ace_width
     transition: width 0.4s ease-in

addons/website/static/src/js/website.ace.js

@@ -1,8 +1,6 @@
 (function () {
     'use strict';
 
-    var editor = null;
-
     var website = openerp.website;
     website.templates.push('/website/static/src/xml/website.ace.xml');
 
@@ -11,12 +9,7 @@
             'click a[data-action=ace]': 'launchAce',
         }),
         launchAce: function () {
-            if (!editor) {
-                editor = new website.ace.ViewEditor();
-                editor.appendTo($(document.body));
-            } else {
-                editor.show();
-            }
+            new website.ace.ViewEditor(this).appendTo($(document.body));
         },
     });
 
@@ -63,36 +56,42 @@
             'change #ace-view-list': 'displayView',
             'click button[data-action=save]': 'saveView',
             'click button[data-action=format]': 'formatXml',
-            'click button[data-action=close]': 'hide',
+            'click button[data-action=close]': 'close',
         },
         start: function () {
-            var viewId = $(document.documentElement).data('view-xmlid');
-            this.$viewList = this.$('#ace-view-list');
             var self = this;
-            openerp.jsonRpc('/website/customize_template_get', 'call', { 'xml_id': viewId, 'optional': false })
-                .then(function(result) {
-                    if (result && result.length > 0) {
-                        _.each(result, function (view) {
-                            if (view.id) {
-                                new website.ace.ViewOption(self, view).appendTo(self.$viewList);
-                            }
-                        });
-                        var editor = ace.edit(self.$('#ace-view-editor')[0]);
-                        editor.setTheme("ace/theme/monokai");
-                        self.aceEditor = editor;
-                        self.show();
-                    } else {
-                        throw Error("Could not load view list");
-                    }
-                });
+            var viewId = $(document.documentElement).data('view-xmlid');
+            openerp.jsonRpc('/website/customize_template_get', 'call', {
+                'xml_id': viewId,
+                'optional': false
+            }).then(function (views) {
+                self.loadViewList.call(self, views);
+            });
+        },
+        selectedViewId: function () {
+            return this.$('#ace-view-list').val();
+        },
+        loadViewList: function (views) {
+            var activeViews = _.filter(views, function (view) {
+               return view.active;
+            });
+            var $viewList = this.$('#ace-view-list');
+            _.each(activeViews, function (view) {
+                if (view.id) {
+                    new website.ace.ViewOption(this, view).appendTo($viewList);
+                }
+            });
+            var editor = ace.edit(this.$('#ace-view-editor')[0]);
+            editor.setTheme("ace/theme/monokai");
+            this.aceEditor = editor;
+            this.open();
         },
         displayView: function () {
             var editor = this.aceEditor;
-            var viewId = this.$viewList.val();
             openerp.jsonRpc('/web/dataset/call', 'call', {
                 model: 'ir.ui.view',
                 method: 'read',
-                args: [[viewId], ['arch']]
+                args: [[this.selectedViewId()], ['arch']]
             }).then(function(result) {
                 if (result && result.length > 0) {
                     var xml = new website.ace.XmlDocument(result[0].arch)
@@ -110,33 +109,43 @@
             this.aceEditor.setValue(xml.format());
         },
         saveView: function () {
+            var self = this;
             var xml = new website.ace.XmlDocument(this.aceEditor.getValue());
-            var viewId = this.$viewList.val();
             if (xml.isWellFormed()) {
                 openerp.jsonRpc('/web/dataset/call', 'call', {
                     model: 'ir.ui.view',
                     method: 'write',
-                    args: [[viewId], { 'arch':  xml.xml }]
+                    args: [[this.selectedViewId()], { 'arch':  xml.xml }]
                 }).then(function(result) {
-                    window.location.reload();
+                    self.reloadPage();
+                }).fail(function (error) {
+                    self.displayError(error);
                 });
             } else {
-                // TODO Improve feedback (e.g. update 'Save' button + tooltip)
-                alert("Malformed XML document");
+                self.displayError();
             }
         },
-        hide: function () {
-            this.$el.removeClass('oe_ace_open');
-            this.$el.addClass('oe_ace_closed');
+        reloadPage: function () {
+            // TODO Reload { header + div#wrap + footer } only
+            window.location.reload();
         },
-        show: function () {
-            this.$el.removeClass('oe_ace_closed');
-            this.$el.addClass('oe_ace_open');
+        displayError: function (error) {
+            // TODO Improve feedback (e.g. update 'Save' button + tooltip)
+            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.displayView();
         },
-        destroy: function () {
-            editor = null;
-            this._super();
+        close: function () {
+            var self = this;
+            this.$('.pull-right').fadeOut(100);
+            this.$el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function () {
+                self.destroy.call(self);
+            }).removeClass('oe_ace_open').addClass('oe_ace_closed');
         },
     });
 

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">Close</button>
+                <button data-action="close" type="button" class="btn btn-info pull-right" style="display:none">Close</button>
             </div>
             <div id="ace-view-editor"/>
         </div>