From 9262f15de7964020e22f7e72d7c848fdd898f3dd 2011-07-21 03:42:35 From: Brian E. Granger Date: 2011-07-21 03:42:35 Subject: [PATCH] Pager is working again. --- diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index ff74106..78e5799 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -122,7 +122,7 @@ div#left_panel { } div#left_panel_splitter { - width: 7px; + width: 8px; top: 0px; left: 202px; margin: 0px; @@ -131,7 +131,7 @@ div#left_panel_splitter { } div#notebook_panel { - margin: 0px 0px 0px 211px; + margin: 0px 0px 0px 209px; padding: 0px; } @@ -139,14 +139,14 @@ div#notebook { overflow-y: scroll; overflow-x: auto; width: 100%; - padding: 0px 0px; + padding: 0px 15px 15px 15px; margin: 0px background-color: white; font-size: 12pt; } div#pager_splitter { - height: 7px; + height: 8px; } div#pager { @@ -161,7 +161,7 @@ div#pager { div.cell { width: 100%; - padding: 0px; + padding: 5px; /* This acts as a spacer between cells, that is outside the border */ margin: 15px 0px 15px 0px; } diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js index 95084c2..ee80f5d 100644 --- a/IPython/frontend/html/notebook/static/js/cell.js +++ b/IPython/frontend/html/notebook/static/js/cell.js @@ -20,23 +20,6 @@ var IPython = (function (IPython) { }; - Cell.prototype.grow = function(element) { - // Grow the cell by hand. This is used upon reloading from JSON, when the - // autogrow handler is not called. - var dom = element.get(0); - var lines_count = 0; - // modified split rule from - // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424 - var lines = dom.value.split(/\r|\r\n|\n/); - lines_count = lines.length; - if (lines_count >= 1) { - dom.rows = lines_count; - } else { - dom.rows = 1; - } - }; - - Cell.prototype.select = function () { this.element.addClass('ui-widget-content ui-corner-all'); this.selected = true; diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js index 493a0f8..bd30ece 100644 --- a/IPython/frontend/html/notebook/static/js/codecell.js +++ b/IPython/frontend/html/notebook/static/js/codecell.js @@ -18,7 +18,7 @@ var IPython = (function (IPython) { CodeCell.prototype.create_element = function () { - var cell = $('
').addClass('cell code_cell vbox'); + var cell = $('
').addClass('cell border-box-sizing code_cell vbox'); var input = $('
').addClass('input hbox'); input.append($('
').addClass('prompt input_prompt monospace-font')); var input_area = $('
').addClass('input_area box-flex1'); diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js index fcc544f..b8232f0 100644 --- a/IPython/frontend/html/notebook/static/js/notebook.js +++ b/IPython/frontend/html/notebook/static/js/notebook.js @@ -81,6 +81,22 @@ var IPython = (function (IPython) { }; }; }); + + this.element.bind('collapse_pager', function () { + var that_height = that.element.outerHeight(true); + var pager_height = $('div#pager').outerHeight(true); + var new_height = that_height + pager_height; + console.log('collapse', that_height, pager_height, new_height); + that.element.animate({height : new_height + 'px'}, 'fast'); + }); + + this.element.bind('expand_pager', function () { + var that_height = that.element.outerHeight(true); + var pager_height = $('div#pager').outerHeight(true); + var new_height = that_height - pager_height; + console.log('expand', that_height, pager_height, new_height); + that.element.animate({height : new_height + 'px'}, 'fast'); + }); }; diff --git a/IPython/frontend/html/notebook/static/js/notebook_main.js b/IPython/frontend/html/notebook/static/js/notebook_main.js index 2d5edd5..d0de7a5 100644 --- a/IPython/frontend/html/notebook/static/js/notebook_main.js +++ b/IPython/frontend/html/notebook/static/js/notebook_main.js @@ -7,10 +7,11 @@ $(document).ready(function () { - $('div#notebook_app').addClass('ui-widget ui-widget-content') - $('div#left_panel').addClass('ui-widget') - $('div#left_panel_splitter').addClass('ui-widget ui-widget-content') - $('div#notebook_panel').addClass('ui-widget') + $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content'); + $('div#left_panel').addClass('border-box-sizing ui-widget'); + $('div#left_panel_splitter').addClass('border-box-sizing ui-widget ui-state-default'); + $('div#notebook_panel').addClass('border-box-sizing ui-widget'); + $('div#notebook').addClass('border-box-sizing'); $('div#left_panel_splitter').click(function () { $('div#left_panel').toggle('fast'); @@ -40,12 +41,16 @@ $(document).ready(function () { var win = $(window); var w = win.width(); var h = win.height(); - var app_height = h - 50; - $('div#notebook_app').height(app_height); + var header_height = $('div#header').outerHeight(true); + var app_height = h - header_height - 2; + var pager_height = $('div#pager').outerHeight(true); + var pager_splitter_height = $('div#pager_splitter').outerHeight(true); + $('div#notebook_app').height(app_height + 2); $('div#left_panel').height(app_height); $('div#left_panel_splitter').height(app_height); $('div#notebook_panel').height(app_height); - $('div#notebook').height(app_height-211); + $('div#notebook').height(app_height-pager_height-pager_splitter_height); + console.log('resize: ', app_height); }; $(window).resize(do_resize); diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js index e294ed0..04965e2 100644 --- a/IPython/frontend/html/notebook/static/js/pager.js +++ b/IPython/frontend/html/notebook/static/js/pager.js @@ -10,22 +10,27 @@ var IPython = (function (IPython) { var Pager = function (pager_selector, pager_toggle_selector) { this.pager_element = $(pager_selector); this.pager_toggle_element = $(pager_toggle_selector); + this.expanded = true; this.style(); this.bind_events(); - this.collapse(); }; Pager.prototype.style = function () { - this.pager_toggle_element.addClass('ui-widget ui-widget-content') - this.pager_element.addClass('') + this.pager_toggle_element.addClass('border-box-sizing ui-widget ui-state-default'); + this.pager_element.addClass('border-box-sizing ui-widget'); }; Pager.prototype.bind_events = function () { var that = this; - this.pager_toggle_element.click(function () { - that.pager_element.toggle('fast'); + + this.pager_element.bind('collapse_pager', function () { + that.pager_element.hide('fast'); + }); + + this.pager_element.bind('expand_pager', function () { + that.pager_element.show('fast'); }); this.pager_toggle_element.hover( @@ -36,16 +41,35 @@ var IPython = (function (IPython) { that.pager_toggle_element.removeClass('ui-state-hover'); } ); + + this.pager_toggle_element.click(function () { + that.toggle(); + }); }; Pager.prototype.collapse = function () { - this.pager_element.hide('fast'); + if (this.expanded === true) { + this.pager_element.add($('div#notebook')).trigger('collapse_pager'); + this.expanded = false; + }; }; Pager.prototype.expand = function () { - this.pager_element.show('fast'); + if (this.expanded !== true) { + this.pager_element.add($('div#notebook')).trigger('expand_pager'); + this.expanded = true; + }; + }; + + + Pager.prototype.toggle = function () { + if (this.expanded === true) { + this.collapse(); + } else { + this.expand(); + }; }; diff --git a/IPython/frontend/html/notebook/static/js/utils.js b/IPython/frontend/html/notebook/static/js/utils.js index 4cb8266..23ce3b2 100644 --- a/IPython/frontend/html/notebook/static/js/utils.js +++ b/IPython/frontend/html/notebook/static/js/utils.js @@ -32,6 +32,7 @@ IPython.utils = (function (IPython) { .replace(/`/g,'&'+'#96;') } + //Map from terminal commands to CSS classes attrib = { "30":"cblack", "31":"cred", @@ -63,9 +64,28 @@ IPython.utils = (function (IPython) { return txt.trim() } + + grow = function(element) { + // Grow the cell by hand. This is used upon reloading from JSON, when the + // autogrow handler is not called. + var dom = element.get(0); + var lines_count = 0; + // modified split rule from + // http://stackoverflow.com/questions/2035910/how-to-get-the-number-of-lines-in-a-textarea/2036424#2036424 + var lines = dom.value.split(/\r|\r\n|\n/); + lines_count = lines.length; + if (lines_count >= 1) { + dom.rows = lines_count; + } else { + dom.rows = 1; + } + }; + + return { uuid : uuid, - fixConsole : fixConsole + fixConsole : fixConsole, + grow : grow } }(IPython)); diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html index ee72098..1a65e11 100644 --- a/IPython/frontend/html/notebook/templates/notebook.html +++ b/IPython/frontend/html/notebook/templates/notebook.html @@ -6,9 +6,9 @@ IPython Notebook - + - +