[IMP] Set EditorBar height programmatically

bzr revid: fme@openerp.com-20131218173915-ds5jeyfypbaefrqf

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

@@ -238,7 +238,6 @@ ul.oe_menu_editor .disclose {
   position: fixed;
   left: 0px;
   right: 0px;
-  top: 51px;
   background: #282828;
   -webkit-box-shadow: 0px 10px 10px -10px black inset;
   -moz-box-shadow: 0px 10px 10px -10px black inset;
@@ -677,7 +676,6 @@ ul.oe_menu_editor .disclose {
 /* ---- ACE EDITOR ---- */
 .oe_ace_view_editor {
   position: fixed;
-  top: 51px;
   right: 0;
   z-index: 1000;
   height: 100%;
@@ -707,7 +705,6 @@ ul.oe_menu_editor .disclose {
   position: absolute;
   top: 30px;
   right: 0;
-  bottom: 51px;
   left: 0;
 }
 .oe_ace_view_editor .ace_editor .ace_gutter {

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

@@ -203,7 +203,7 @@ ul.oe_menu_editor
     position: fixed
     left: 0px
     right: 0px
-    top: 51px
+    // top property is set programmatically
     background: rgb(40,40,40)
     +box-shadow(0px 10px 10px -10px black inset)
     z-index: 1010
@@ -520,11 +520,10 @@ $highlighted_text_color: #ffffff
 
 $editorbar_height: 30px
 // TODO Fix => might break with themes
-$navbar_height: 51px
 
 .oe_ace_view_editor
     position: fixed
-    top: $navbar_height
+    // top property is set programmatically
     right: 0
     z-index: 1000
     height: 100%
@@ -546,7 +545,7 @@ $navbar_height: 51px
         position: absolute
         top: $editorbar_height
         right: 0
-        bottom: $navbar_height
+        // bottom property is set programmatically
         left: 0
         .ace_gutter
             cursor: ew-resize

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

@@ -1,35 +1,34 @@
 (function () {
     'use strict';
 
-    var globalEditor;
-
     var hash = "#advanced-view-editor";
 
     var website = openerp.website;
     website.add_template_file('/website/static/src/xml/website.ace.xml');
 
-    website.ready().then(function () {
-        if (window.location.hash.indexOf(hash) >= 0) {
-            launch();
-        }
-    });
-
-    function launch () {
-        if (globalEditor) {
-            globalEditor.open();
-        } else {
-            globalEditor = new website.ace.ViewEditor();
-            globalEditor.appendTo($(document.body));
-        }
-    }
-
     website.EditorBar.include({
         events: _.extend({}, website.EditorBar.prototype.events, {
             'click a[data-action=ace]': 'launchAce',
         }),
+        start: function () {
+            var self = this;
+            this.globalEditor = null;
+            return this._super.apply(this, arguments).then(function () {
+                if (window.location.hash.indexOf(hash) >= 0) {
+                    self.launchAce();
+                }
+            });
+        },
         launchAce: function (e) {
-            e.preventDefault();
-            launch();
+            if (e) {
+                e.preventDefault();
+            }
+            if (this.globalEditor) {
+                this.globalEditor.open();
+            } else {
+                this.globalEditor = new website.ace.ViewEditor(this);
+                this.globalEditor.appendTo($(document.body));
+            }
         },
     });
 
@@ -104,6 +103,10 @@
                 self.aceEditor.resize();
                 self.$el.width(width);
             }
+            function resizeEditorHeight(height) {
+                self.$el.css('top', height);
+                self.$('.ace_editor').css('bottom', height);
+            }
             function storeEditorWidth() {
                 window.localStorage.setItem('ace_editor_width', self.$el.width());
             }
@@ -133,7 +136,9 @@
             $('button[data-action=edit]').click(function () {
                self.close();
             });
+            this.getParent().on('resize', this, resizeEditorHeight);
             resizeEditor(readEditorWidth());
+            resizeEditorHeight(this.getParent().height);
         },
         loadViews: function (views) {
             var self = this;

addons/website/static/src/js/website.editor.js

@@ -374,7 +374,6 @@
                 editor.edit();
             }
         });
-        $body.css('padding-top', '50px'); // Not working properly: editor.$el.outerHeight());
     };
 
     /* ----- TOP EDITOR BAR FOR ADMIN ---- */
@@ -423,7 +422,7 @@
         },
         start: function() {
             var self = this;
-
+            this.height = null;
             this.saving_mutex = new openerp.Mutex();
 
             this.$('#website-top-edit').hide();
@@ -443,12 +442,26 @@
             this.rte.on('rte:ready', this, function () {
                 self.setup_hover_buttons();
                 self.trigger('rte:ready');
+                self.check_height();
             });
 
+            $(window).on('resize', _.debounce(this.check_height.bind(this), 50));
+            this.check_height();
+
             return $.when(
                 this._super.apply(this, arguments),
                 this.rte.appendTo(this.$('#website-top-edit .nav.pull-right'))
-            );
+            ).then(function () {
+                self.check_height();
+            });
+        },
+        check_height: function () {
+            var editor_height = this.$el.outerHeight();
+            if (this.height != editor_height) {
+                this.height = editor_height;
+                $(document.body).css('padding-top', this.height);
+                this.trigger('resize', this.height);
+            }
         },
         edit: function () {
             this.$buttons.edit.prop('disabled', true);
@@ -456,7 +469,7 @@
             this.$('#website-top-edit').show();
             $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden");
 
-            this.rte.start_edition();
+            this.rte.start_edition().then(this.check_height.bind(this));
         },
         rte_changed: function () {
             this.$buttons.save.prop('disabled', false);

addons/website/static/src/js/website.snippets.editor.js

@@ -139,6 +139,10 @@
             $(document).on('click', '.dropdown-submenu a[tabindex]', function (e) {
                 e.preventDefault();
             });
+
+            this.getParent().on('resize', this, function (height) {
+                self.$el.css('top', height);
+            });
         },
         fetch_snippet_templates: function () {
             var self = this;