diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index e1dfbd9..f49a2dd 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -74,23 +74,39 @@ body { div#header { - height: 35px; + position: relative; + height: 45px; padding: 5px; margin: 0px; width: 100% } span#ipython_notebook { + position: absolute; } span#ipython_notebook h1 { font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 22pt; + display: inline; +} + +span#save_widget { + position: absolute; + left: 0px; + padding: 5px 0px; + margin: 0px 0px 0px 0px; +} + +input#notebook_name { + height: 1em; + line-height: 1em; + padding: 5px; } span#kernel_status { position: absolute; - top: 12%; + padding: 8px 5px 5px 5px; right: 10px; font-weight: bold; } @@ -129,22 +145,27 @@ div.section_content { padding: 5px; } -#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below, -#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell, -#run_all_cells, #int_kernel, #restart_kernel, #python_help, #ipython_help, -#numpy_help, #matplotlib_help, #scipy_help, #sympy_help { - width: 65px; +/*#expand_cell, #collapse_cell, #insert_cell_above, #insert_cell_below,*/ +/*#move_cell_up, #move_cell_down, #to_code, #to_text, #run_selected_cell,*/ +/*#run_all_cells, #int_kernel, #restart_kernel, #python_help, #ipython_help,*/ +/*#numpy_help, #matplotlib_help, #scipy_help, #sympy_help, #new_notebook,*/ +/*#open_notebook {*/ +/* width: 60px;*/ +/*}*/ + +span.section_row_buttons > button { + width: 60px; } -.cell_section_row { +.section_row { margin: 5px 0px; } -.cell_section_row_buttons { +.section_row_buttons { float: right; } -.cell_section_row_header { +.section_row_header { float: left; font-size: 0.8em; padding: 0.2em 0em; @@ -158,7 +179,7 @@ span.button_label { } /* This is needed because FF was adding a 2px margin top and bottom. */ -.cell_section_row .ui-button { +.section_row .ui-button { margin-top: 0px; margin-bottom: 0px; } diff --git a/IPython/frontend/html/notebook/static/js/kernel.js b/IPython/frontend/html/notebook/static/js/kernel.js index b64c461..b5ec75c 100644 --- a/IPython/frontend/html/notebook/static/js/kernel.js +++ b/IPython/frontend/html/notebook/static/js/kernel.js @@ -73,40 +73,18 @@ var IPython = (function (IPython) { Kernel.prototype.restart = function () { - this.status_restarting(); + IPython.kernel_status_widget.status_restarting(); url = this.kernel_url + "/restart" var that = this; $.post(url, function (kernel_id) { console.log("Kernel restarted: " + kernel_id); that.kernel_id = kernel_id; that.kernel_url = that.base_url + "/" + that.kernel_id; - that.status_idle(); + IPython.kernel_status_widget.status_idle(); }, 'json'); }; - Kernel.prototype.status_busy = function () { - $("#kernel_status").removeClass("status_idle"); - $("#kernel_status").removeClass("status_restarting"); - $("#kernel_status").addClass("status_busy"); - $("#kernel_status").text("Busy"); - }; - - - Kernel.prototype.status_idle = function () { - $("#kernel_status").removeClass("status_busy"); - $("#kernel_status").removeClass("status_restarting"); - $("#kernel_status").addClass("status_idle"); - $("#kernel_status").text("Idle"); - }; - - Kernel.prototype.status_restarting = function () { - $("#kernel_status").removeClass("status_busy"); - $("#kernel_status").removeClass("status_idle"); - $("#kernel_status").addClass("status_restarting"); - $("#kernel_status").text("Restarting"); - }; - IPython.Kernel = Kernel; return IPython; diff --git a/IPython/frontend/html/notebook/static/js/kernelstatus.js b/IPython/frontend/html/notebook/static/js/kernelstatus.js new file mode 100644 index 0000000..e8d54bd --- /dev/null +++ b/IPython/frontend/html/notebook/static/js/kernelstatus.js @@ -0,0 +1,54 @@ + +//============================================================================ +// Kernel Status widget +//============================================================================ + +var IPython = (function (IPython) { + + var utils = IPython.utils; + + var KernelStatusWidget = function (selector) { + this.selector = selector; + if (this.selector !== undefined) { + this.element = $(selector); + this.style(); + } + }; + + + KernelStatusWidget.prototype.style = function () { + this.element.addClass('ui-widget'); + }; + + + KernelStatusWidget.prototype.status_busy = function () { + this.element.removeClass("status_idle"); + this.element.removeClass("status_restarting"); + this.element.addClass("status_busy"); + this.element.text("Busy"); + }; + + + KernelStatusWidget.prototype.status_idle = function () { + this.element.removeClass("status_busy"); + this.element.removeClass("status_restarting"); + this.element.addClass("status_idle"); + this.element.text("Idle"); + }; + + KernelStatusWidget.prototype.status_restarting = function () { + this.element.removeClass("status_busy"); + this.element.removeClass("status_idle"); + this.element.addClass("status_restarting"); + this.element.text("Restarting"); + }; + + + + + IPython.KernelStatusWidget = KernelStatusWidget; + + return IPython; + +}(IPython)); + diff --git a/IPython/frontend/html/notebook/static/js/layout.js b/IPython/frontend/html/notebook/static/js/layout.js index d7fd9a3..2c344d7 100644 --- a/IPython/frontend/html/notebook/static/js/layout.js +++ b/IPython/frontend/html/notebook/static/js/layout.js @@ -28,9 +28,9 @@ var IPython = (function (IPython) { $('div#left_panel_splitter').height(app_height); + $('div#notebook_panel').height(app_height); var left_panel_width = $('div#left_panel').outerWidth(); var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth(); - $('div#notebook_panel').height(app_height); if (IPython.left_panel.expanded) { $('div#notebook_panel').css({marginLeft : left_panel_width+left_panel_splitter_width}); } else { diff --git a/IPython/frontend/html/notebook/static/js/leftpanel.js b/IPython/frontend/html/notebook/static/js/leftpanel.js index ac68852..1d64991 100644 --- a/IPython/frontend/html/notebook/static/js/leftpanel.js +++ b/IPython/frontend/html/notebook/static/js/leftpanel.js @@ -57,15 +57,10 @@ var IPython = (function (IPython) { LeftPanel.prototype.create_children = function () { - this.notebook_section = new IPython.NotebookSection(); - this.left_panel_element.append(this.notebook_section.element); - this.cell_section = new IPython.CellSection(); - this.left_panel_element.append(this.cell_section.element); - this.kernel_section = new IPython.KernelSection(); - this.left_panel_element.append(this.kernel_section.element); - this.help_section = new IPython.HelpSection(); - this.left_panel_element.append(this.help_section.element); - this.help_section.collapse(); + this.notebook_section = new IPython.NotebookSection('div#notebook_section'); + this.cell_section = new IPython.CellSection('div#cell_section'); + this.kernel_section = new IPython.KernelSection('div#kernel_section'); + this.help_section = new IPython.HelpSection('div#help_section'); } LeftPanel.prototype.collapse = function () { diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js index 9b8379f..9491ece 100644 --- a/IPython/frontend/html/notebook/static/js/notebook.js +++ b/IPython/frontend/html/notebook/static/js/notebook.js @@ -474,9 +474,9 @@ var IPython = (function (IPython) { cell.append_pyerr(content.ename, content.evalue, content.traceback); } else if (msg_type === "status") { if (content.execution_state === "busy") { - this.kernel.status_busy(); + IPython.kernel_status_widget.status_busy(); } else if (content.execution_state === "idle") { - this.kernel.status_idle(); + IPython.kernel_status_widget.status_idle(); }; } }; diff --git a/IPython/frontend/html/notebook/static/js/notebook_main.js b/IPython/frontend/html/notebook/static/js/notebook_main.js index 50188a5..1e58375 100644 --- a/IPython/frontend/html/notebook/static/js/notebook_main.js +++ b/IPython/frontend/html/notebook/static/js/notebook_main.js @@ -17,14 +17,17 @@ $(document).ready(function () { } }); + $('div#header').addClass('border-box-sizing'); $('div#notebook_app').addClass('border-box-sizing ui-widget ui-widget-content'); $('div#notebook_panel').addClass('border-box-sizing ui-widget'); IPython.layout_manager = new IPython.LayoutManager(); -// IPython.save_widget = new IPython.SaveWidget('span#save_widget'); IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter'); IPython.left_panel = new IPython.LeftPanel('div#left_panel', 'div#left_panel_splitter'); + IPython.save_widget = new IPython.SaveWidget('span#save_widget'); IPython.notebook = new IPython.Notebook('div#notebook'); + IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status'); + IPython.kernel_status_widget.status_idle(); IPython.notebook.insert_code_cell_after(); IPython.layout_manager.do_resize(); diff --git a/IPython/frontend/html/notebook/static/js/pager.js b/IPython/frontend/html/notebook/static/js/pager.js index bfa3c7c..a6ce743 100644 --- a/IPython/frontend/html/notebook/static/js/pager.js +++ b/IPython/frontend/html/notebook/static/js/pager.js @@ -11,7 +11,7 @@ var IPython = (function (IPython) { this.pager_element = $(pager_selector); this.pager_splitter_element = $(pager_splitter_selector); this.expanded = true; - this.percentage_height = 0.30; + this.percentage_height = 0.40; this.style(); this.bind_events(); }; diff --git a/IPython/frontend/html/notebook/static/js/panelsection.js b/IPython/frontend/html/notebook/static/js/panelsection.js index 6ce07a1..0a2d253 100644 --- a/IPython/frontend/html/notebook/static/js/panelsection.js +++ b/IPython/frontend/html/notebook/static/js/panelsection.js @@ -9,18 +9,25 @@ var IPython = (function (IPython) { // Base PanelSection class - var PanelSection = function () { - if (this.section_name === undefined) { - this.section_name = 'section'; - }; - this.create_element(); - if (this.element !== undefined) { + var PanelSection = function (selector) { + this.selector = selector; + if (this.selector !== undefined) { + this.element = $(selector); + this.header = this.element.find('h3.section_header'); + this.content = this.element.find('div.section_content'); + this.style(); this.bind_events(); } this.expanded = true; }; + PanelSection.prototype.style = function () { + this.header.addClass('ui-widget ui-state-default'); + this.content.addClass('ui-widget section_content'); + }; + + PanelSection.prototype.bind_events = function () { var that = this; this.header.click(function () { @@ -32,27 +39,9 @@ var IPython = (function (IPython) { }; - PanelSection.prototype.create_element = function () { - this.element = $('
').attr('id',this.id()); - this.header = $('