Initial draft of panel section and the cell section working.

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;

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

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');

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);

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 = $('<div/>').attr('id',this.id());
+        this.header = $('<h3>'+this.section_name+'</h3>').
+            addClass('ui-widget ui-state-default section_header');
+        this.content = $('<div/>').
+            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 = $('<div>').
+            append($('<span/>').attr('id','toggle').
+                append( $('<button>Collapse</button>').attr('id','collapse_cell') ).
+                append( $('<button>Expand</button>').attr('id','expand_cell') ) ).
+            append($('<span/>').
+                append($('<button>X</button>').attr('id','delete_cell')));
+        row0.find('#toggle').buttonset();            
+        row0.find('button#delete_cell').button();
+        this.content.append(row0);
+
+        var row1 = $('<div>').
+            append($('<span/>').html('Insert').addClass('button_label')).
+            append($('<span/>').attr('id','insert').
+                append( $('<button>Above</button>').attr('id','insert_cell_above') ).
+                append( $('<button>Below</button>').attr('id','insert_cell_below') ) );
+        row1.find('#insert').buttonset();
+        this.content.append(row1);
+
+        var row2 = $('<div>').
+            append($('<span/>').html('Move').addClass('button_label')).
+            append($('<span/>').attr('id','move').
+                append( $('<button>Up</button>').attr('id','move_cell_up') ).
+                append( $('<button>Down</button>').attr('id','move_cell_down') ) );
+        row2.find('#move').buttonset();
+        this.content.append(row2);
+
+        var row3 = $('<div>').
+            append($('<span/>').html('Cell Type').addClass('button_label')).
+            append($('<span/>').attr('id','cell_type').
+                append( $('<button>Code</button>').attr('id','to_code') ).
+                append( $('<button>Text</button>').attr('id','to_text') ) );
+        row3.find('#cell_type').buttonset();
+        this.content.append(row3)
+    };
+//            <span id="move_cell">
+//                <button id="move_up">Move up</button>
+//                <button id="move_down">Move down</button>
+//            </span>
+//            <span id="insert_delete">
+//                <button id="insert_cell_before">Before</button>
+//                <button id="insert_cell_after">After</button>
+//                <button id="delete_cell">Delete</button>
+//            </span>
+//            <span id="cell_type">
+//                <button id="to_code">Code</button>
+//                <button id="to_text">Text</button>
+//            </span>
+//            <span id="sort">
+//                <button id="sort_cells">Sort</button>
+//            </span>
+//            <span id="toggle">
+//                <button id="collapse">Collapse</button>
+//                <button id="expand">Expand</button>
+//            </span>
+//        </span>
+
+
+    // 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));
+

IPython/frontend/html/notebook/templates/notebook.html

@@ -56,6 +56,7 @@
 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>