From c6ab30bb3d81143fccfb4859a51e738232d13e91 2011-07-21 03:42:35 From: Brian E. Granger Date: 2011-07-21 03:42:35 Subject: [PATCH] Initial draft of panel section and the cell section working. --- diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css index 1799139..983b714 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.css +++ b/IPython/frontend/html/notebook/static/css/notebook.css @@ -115,6 +115,25 @@ div#left_panel { position: absolute; } +h3.section_header { + padding: 5px; +} + +div.section_content { + padding: 5px; +} + + +span.button_label { + padding: 0.3em 1em; + font-size: 0.8em; +} + +.ui-button .ui-button-text { + padding: 0.3em 0.9em; + font-size: 0.7em; +} + div#left_panel_splitter { width: 8px; top: 0px; diff --git a/IPython/frontend/html/notebook/static/js/layout.js b/IPython/frontend/html/notebook/static/js/layout.js index 1135ae0..d7fd9a3 100644 --- a/IPython/frontend/html/notebook/static/js/layout.js +++ b/IPython/frontend/html/notebook/static/js/layout.js @@ -46,7 +46,6 @@ var IPython = (function (IPython) { } else { $('div#notebook').height(app_height-pager_splitter_height); } - console.log('resize: ', app_height); }; IPython.LayoutManager = LayoutManager diff --git a/IPython/frontend/html/notebook/static/js/leftpanel.js b/IPython/frontend/html/notebook/static/js/leftpanel.js index 479a0d5..07bdbd7 100644 --- a/IPython/frontend/html/notebook/static/js/leftpanel.js +++ b/IPython/frontend/html/notebook/static/js/leftpanel.js @@ -15,6 +15,7 @@ var IPython = (function (IPython) { this.width = 250; this.style(); this.bind_events(); + this.create_children(); }; @@ -55,6 +56,15 @@ 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); + } + LeftPanel.prototype.collapse = function () { if (this.expanded === true) { this.left_panel_element.add($('div#notebook')).trigger('collapse_left_panel'); diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js index 4100387..ff624f8 100644 --- a/IPython/frontend/html/notebook/static/js/notebook.js +++ b/IPython/frontend/html/notebook/static/js/notebook.js @@ -121,7 +121,6 @@ var IPython = (function (IPython) { var splitter_width = $('div#left_panel_splitter').outerWidth(true); var left_panel_width = IPython.left_panel.width; var new_margin = splitter_width + left_panel_width; - console.log('expand', splitter_width, left_panel_width, new_margin); $('div#notebook_panel').animate({marginLeft : new_margin + 'px'}, 'fast'); }); }; @@ -433,7 +432,7 @@ var IPython = (function (IPython) { var header = reply.header; var content = reply.content; var msg_type = header.msg_type; - console.log(reply); + // console.log(reply); var cell = this.cell_for_msg(reply.parent_header.msg_id); if (msg_type === "execute_reply") { cell.set_input_prompt(content.execution_count); diff --git a/IPython/frontend/html/notebook/static/js/panelsection.js b/IPython/frontend/html/notebook/static/js/panelsection.js new file mode 100644 index 0000000..5450cbd --- /dev/null +++ b/IPython/frontend/html/notebook/static/js/panelsection.js @@ -0,0 +1,214 @@ + +//============================================================================ +// Cell +//============================================================================ + +var IPython = (function (IPython) { + + var utils = IPython.utils; + + // Base PanelSection class + + var PanelSection = function () { + if (this.section_name === undefined) { + this.section_name = 'section'; + }; + this.create_element(); + if (this.element !== undefined) { + this.bind_events(); + } + this.expanded = true; + }; + + + PanelSection.prototype.bind_events = function () { + var that = this; + this.header.click(function () { + that.toggle(); + }); + this.header.hover(function () { + that.header.toggleClass('ui-state-hover'); + }); + }; + + + 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; + }; + }; + + + 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; + }; + }; + + + PanelSection.prototype.toggle = function () { + if (this.expanded === true) { + this.collapse(); + } else { + this.expand(); + }; + }; + + + PanelSection.prototype.create_children = function () {}; + + + // NotebookSection + + var NotebookSection = function () { + this.section_name = "Notebook"; + PanelSection.apply(this, arguments); + }; + + + NotebookSection.prototype = new PanelSection(); + + + // CellSection + + var CellSection = function () { + this.section_name = "Cell"; + PanelSection.apply(this, arguments); + }; + + + CellSection.prototype = new PanelSection(); + + + CellSection.prototype.bind_events = function () { + PanelSection.prototype.bind_events.apply(this); + this.content.find('#collapse_cell').click(function () { + IPython.notebook.collapse(); + }); + this.content.find('#expand_cell').click(function () { + IPython.notebook.expand(); + }); + this.content.find('#delete_cell').click(function () { + IPython.notebook.delete_cell(); + }); + this.content.find('#insert_cell_above').click(function () { + IPython.notebook.insert_code_cell_before(); + }); + this.content.find('#insert_cell_below').click(function () { + IPython.notebook.insert_code_cell_after(); + }); + this.content.find('#move_cell_up').click(function () { + IPython.notebook.move_cell_up(); + }); + this.content.find('#move_cell_down').click(function () { + IPython.notebook.move_cell_down(); + }); + this.content.find('#to_code').click(function () { + IPython.notebook.text_to_code(); + }); + this.content.find('#to_text').click(function () { + IPython.notebook.code_to_text(); + }); + }; + + + CellSection.prototype.create_children = function () { + var row0 = $('
'). + append($('').attr('id','toggle'). + append( $('').attr('id','collapse_cell') ). + append( $('').attr('id','expand_cell') ) ). + append($(''). + append($('').attr('id','delete_cell'))); + row0.find('#toggle').buttonset(); + row0.find('button#delete_cell').button(); + this.content.append(row0); + + var row1 = $('
'). + append($('').html('Insert').addClass('button_label')). + append($('').attr('id','insert'). + append( $('').attr('id','insert_cell_above') ). + append( $('').attr('id','insert_cell_below') ) ); + row1.find('#insert').buttonset(); + this.content.append(row1); + + var row2 = $('
'). + append($('').html('Move').addClass('button_label')). + append($('').attr('id','move'). + append( $('').attr('id','move_cell_up') ). + append( $('').attr('id','move_cell_down') ) ); + row2.find('#move').buttonset(); + this.content.append(row2); + + var row3 = $('
'). + append($('').html('Cell Type').addClass('button_label')). + append($('').attr('id','cell_type'). + append( $('').attr('id','to_code') ). + append( $('').attr('id','to_text') ) ); + row3.find('#cell_type').buttonset(); + this.content.append(row3) + }; +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// + + + // KernelSection + + var KernelSection = function () { + this.section_name = "Kernel"; + PanelSection.apply(this, arguments); + }; + + + KernelSection.prototype = new PanelSection(); + + + IPython.PanelSection = PanelSection; + IPython.NotebookSection = NotebookSection; + IPython.CellSection = CellSection; + IPython.KernelSection = KernelSection; + + return IPython; + +}(IPython)); + diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html index 9b50163..d6166e1 100644 --- a/IPython/frontend/html/notebook/templates/notebook.html +++ b/IPython/frontend/html/notebook/templates/notebook.html @@ -56,6 +56,7 @@ +