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 = $('

'+this.section_name+'

'). - addClass('ui-widget ui-state-default section_header'); - this.content = $('
'). - addClass('ui-widget section_content'); - this.element.append(this.header).append(this.content); - this.create_children(); - }; - - - PanelSection.prototype.id = function () { - return this.section_name.toLowerCase() + "_section"; - }; - - PanelSection.prototype.expand = function () { if (!this.expanded) { this.content.slideDown('fast'); -// this.header.addClass('ui-state-active'); -// this.header.removeClass('ui-state-default'); this.expanded = true; }; }; @@ -61,8 +50,6 @@ var IPython = (function (IPython) { PanelSection.prototype.collapse = function () { if (this.expanded) { this.content.slideUp('fast'); -// this.header.removeClass('ui-state-active'); -// this.header.addClass('ui-state-default'); this.expanded = false; }; }; @@ -83,7 +70,6 @@ var IPython = (function (IPython) { // NotebookSection var NotebookSection = function () { - this.section_name = "Notebook"; PanelSection.apply(this, arguments); }; @@ -91,10 +77,28 @@ var IPython = (function (IPython) { NotebookSection.prototype = new PanelSection(); + NotebookSection.prototype.style = function () { + PanelSection.prototype.style.apply(this); + this.content.addClass('ui-helper-clearfix'); + this.content.find('div.section_row').addClass('ui-helper-clearfix'); + this.content.find('#new_open').buttonset(); + }; + + + NotebookSection.prototype.bind_events = function () { + PanelSection.prototype.bind_events.apply(this); + this.content.find('#new_notebook').click(function () { + alert('Not Implemented'); + }); + this.content.find('#open_notebook').click(function () { + alert('Not Implemented'); + }); + }; + + // CellSection var CellSection = function () { - this.section_name = "Cell"; PanelSection.apply(this, arguments); }; @@ -102,6 +106,19 @@ var IPython = (function (IPython) { CellSection.prototype = new PanelSection(); + CellSection.prototype.style = function () { + PanelSection.prototype.style.apply(this); + this.content.addClass('ui-helper-clearfix'); + this.content.find('div.section_row').addClass('ui-helper-clearfix'); + this.content.find('#delete_cell').button(); + this.content.find('#insert').buttonset(); + this.content.find('#move').buttonset(); + this.content.find('#cell_type').buttonset(); + this.content.find('#toggle_output').buttonset(); + this.content.find('#run_cells').buttonset(); + }; + + CellSection.prototype.bind_events = function () { PanelSection.prototype.bind_events.apply(this); this.content.find('#collapse_cell').click(function () { @@ -140,63 +157,9 @@ var IPython = (function (IPython) { }; - CellSection.prototype.create_children = function () { - - this.content.addClass('ui-helper-clearfix'); - - var row0 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').addClass('cell_section_row_buttons'). - append($('').attr('id','delete_cell'))). - append($('').html('Actions').addClass('cell_section_row_header')); - row0.find('#delete_cell').button(); - this.content.append(row0); - - var row1 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','insert').addClass('cell_section_row_buttons'). - append( $('').attr('id','insert_cell_above') ). - append( $('').attr('id','insert_cell_below') )). - append($('').html('Insert').addClass('button_label')); - row1.find('#insert').buttonset(); - this.content.append(row1); - - var row2 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','move').addClass('cell_section_row_buttons'). - append( $('').attr('id','move_cell_up') ). - append( $('').attr('id','move_cell_down') ) ). - append($('').html('Move').addClass('button_label')); - row2.find('#move').buttonset(); - this.content.append(row2); - - var row3 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','cell_type').addClass('cell_section_row_buttons'). - append( $('').attr('id','to_code') ). - append( $('').attr('id','to_text') ) ). - append($('').html('Cell Type').addClass('button_label')); - row3.find('#cell_type').buttonset(); - this.content.append(row3); - - var row1 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','toggle_output').addClass('cell_section_row_buttons'). - append( $('').attr('id','collapse_cell') ). - append( $('').attr('id','expand_cell') ) ). - append($('').html('Output').addClass('button_label')); - row1.find('#toggle_output').buttonset(); - this.content.append(row1); - - var row0 = $('
').addClass('cell_section_row'). - append($('').attr('id','run_cells').addClass('cell_section_row_buttons'). - append( $('').attr('id','run_selected_cell') ). - append( $('').attr('id','run_all_cells') ) ). - append($('').html('Run').addClass('button_label')); - row0.find('#run_cells').buttonset(); - this.content.append(row0); - }; - - // KernelSection var KernelSection = function () { - this.section_name = "Kernel"; PanelSection.apply(this, arguments); }; @@ -204,6 +167,14 @@ var IPython = (function (IPython) { KernelSection.prototype = new PanelSection(); + KernelSection.prototype.style = function () { + PanelSection.prototype.style.apply(this); + this.content.addClass('ui-helper-clearfix'); + this.content.find('div.section_row').addClass('ui-helper-clearfix'); + this.content.find('#int_restart').buttonset(); + }; + + KernelSection.prototype.bind_events = function () { PanelSection.prototype.bind_events.apply(this); this.content.find('#restart_kernel').click(function () { @@ -215,24 +186,9 @@ var IPython = (function (IPython) { }; - KernelSection.prototype.create_children = function () { - - this.content.addClass('ui-helper-clearfix'); - - var row0 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','int_restart').addClass('cell_section_row_buttons'). - append( $('').attr('id','int_kernel') ). - append( $('').attr('id','restart_kernel') )). - append($('').html('Actions').addClass('cell_section_row_header')); - row0.find('#int_restart').buttonset(); - this.content.append(row0); - }; - - // HelpSection var HelpSection = function () { - this.section_name = "Help"; PanelSection.apply(this, arguments); }; @@ -240,38 +196,22 @@ var IPython = (function (IPython) { HelpSection.prototype = new PanelSection(); - HelpSection.prototype.bind_events = function () { - PanelSection.prototype.bind_events.apply(this); + HelpSection.prototype.style = function () { + PanelSection.prototype.style.apply(this); + PanelSection.prototype.style.apply(this); + this.content.addClass('ui-helper-clearfix'); + this.content.find('div.section_row').addClass('ui-helper-clearfix'); + this.content.find('#help_buttons0').buttonset(); + this.content.find('#help_buttons1').buttonset(); }; - HelpSection.prototype.create_children = function () { + HelpSection.prototype.bind_events = function () { + PanelSection.prototype.bind_events.apply(this); + }; - this.content.addClass('ui-helper-clearfix'); - var row0 = $('
').addClass('cell_section_row ui-helper-clearfix'). - append($('').attr('id','help_buttons0').addClass('cell_section_row_buttons'). - append( $('').button()); - }; + SaveWidget.prototype.get_notebook_name = function () { + return this.element.find('input#notebook_name').attr('value'); + } + + + SaveWidget.prototype.set_notebook_name = function (name) { + this.element.find('input#notebook_name').attr('value',name); + } + IPython.SaveWidget = SaveWidget; diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html index 6bb43af..2df57a0 100644 --- a/IPython/frontend/html/notebook/templates/notebook.html +++ b/IPython/frontend/html/notebook/templates/notebook.html @@ -31,12 +31,112 @@
-
+
+ +
+

Notebook

+
+
+ + + + + Actions +
+
+
+ +
+

Cell

+
+
+ + + + Actions +
+
+ + + + + Insert +
+
+ + + + + Move +
+
+ + + + + Cell Type +
+
+ + + + + Output +
+
+ + + + + Run +
+
+
+ +
+

Kernel

+
+
+ + + + + Actions +
+
+
+ +
+

Help

+
+
+ + + + + + Links +
+
+ + + + + +
+
+
+ +
@@ -55,6 +155,7 @@ +