From c10567d6808de156dbdbe6cde70611fafe705c65 2012-01-27 21:45:43
From: Brian Granger <ellisonbg@gmail.com>
Date: 2012-01-27 21:45:43
Subject: [PATCH] Further work on the toolbar UI.

* Cell type selection box is wired up and styled.
* New View menu that allows toolbar/header to be toggled.

---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 29886d6..73bc5be 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -61,6 +61,10 @@ span#notebook_name {
     padding: 3px 15px;
 }
 
+#cell_type {
+    font-size: 85%;
+}
+
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
diff --git a/IPython/frontend/html/notebook/static/js/layout.js b/IPython/frontend/html/notebook/static/js/layout.js
index 8e591a2..e6f27b8 100644
--- a/IPython/frontend/html/notebook/static/js/layout.js
+++ b/IPython/frontend/html/notebook/static/js/layout.js
@@ -25,9 +25,19 @@ var IPython = (function (IPython) {
         var win = $(window);
         var w = win.width();
         var h = win.height();
-        var header_height = $('div#header').outerHeight(true);
+        var header_height;
+        if ($('div#header').css('display') === 'none') {
+            header_height = 0;
+        } else {
+            header_height = $('div#header').outerHeight(true);
+        }
         var menubar_height = $('div#menubar').outerHeight(true);
-        var toolbar_height = $('div#toolbar').outerHeight(true);
+        var toolbar_height;
+        if ($('div#toolbar').css('display') === 'none') {
+            toolbar_height = 0;
+        } else {
+            toolbar_height = $('div#toolbar').outerHeight(true);
+        }
         var app_height = h-header_height-menubar_height-toolbar_height-2;  // content height
 
         $('div#main_app').height(app_height + 2);  // content+padding+border height
diff --git a/IPython/frontend/html/notebook/static/js/menubar.js b/IPython/frontend/html/notebook/static/js/menubar.js
index 367744b..5ddf5f0 100644
--- a/IPython/frontend/html/notebook/static/js/menubar.js
+++ b/IPython/frontend/html/notebook/static/js/menubar.js
@@ -98,6 +98,14 @@ var IPython = (function (IPython) {
         this.element.find('#select_next').click(function () {
             IPython.notebook.select_next();
         });
+        // View
+        this.element.find('#toggle_header').click(function () {
+            $('div#header').toggle();
+            IPython.layout_manager.do_resize();
+        });
+        this.element.find('#toggle_toolbar').click(function () {
+            IPython.toolbar.toggle();
+        });
         // Insert
         this.element.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_cell_above('code');
diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js
index 3b22f5c..c8d74c2 100644
--- a/IPython/frontend/html/notebook/static/js/notebook.js
+++ b/IPython/frontend/html/notebook/static/js/notebook.js
@@ -357,7 +357,9 @@ var IPython = (function (IPython) {
             if (sindex !== null && index !== sindex) {
                 this.get_cell(sindex).unselect();
             };
-            this.get_cell(index).select();
+            var cell = this.get_cell(index)
+            cell.select();
+            IPython.toolbar.set_cell_type(cell.cell_type);
         };
         return this;
     };
diff --git a/IPython/frontend/html/notebook/static/js/toolbar.js b/IPython/frontend/html/notebook/static/js/toolbar.js
index d76ccd2..7db0b43 100644
--- a/IPython/frontend/html/notebook/static/js/toolbar.js
+++ b/IPython/frontend/html/notebook/static/js/toolbar.js
@@ -23,6 +23,7 @@ var IPython = (function (IPython) {
 
     ToolBar.prototype.style = function () {
         this.element.addClass('border-box-sizing');
+        this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
         this.element.find('#save_b').button({
             icons : {primary: 'ui-icon-disk'},
             text : false
@@ -71,7 +72,26 @@ var IPython = (function (IPython) {
 
 
     ToolBar.prototype.bind_events = function () {
+        this.element.find('#cell_type').change(function () {
+            var cell_type = $(this).val();
+            if (cell_type === 'code') {
+                IPython.notebook.to_code();
+            } else if (cell_type === 'markdown')  {
+                IPython.notebook.to_markdown();
+            };
+        });
+
+    };
+
+
+    ToolBar.prototype.set_cell_type = function (cell_type) {
+        this.element.find('#cell_type').val(cell_type);
+    };
+
 
+    ToolBar.prototype.toggle = function () {
+        this.element.toggle();
+        IPython.layout_manager.do_resize();
     };
 
 
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 411a27b..914f19d 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -99,6 +99,12 @@
                 <li id="select_next"><a href="#">Select Next</a></li>
             </ul>
         </li>
+        <li><a href="#">View</a>
+            <ul>
+                <li id="toggle_header"><a href="#">Toggle Header</a></li>
+                <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
+            </ul>
+        </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>