From af2296539b44f667f897f3083a173db90a85577b 2012-01-27 20:31:28
From: Brian Granger <ellisonbg@gmail.com>
Date: 2012-01-27 20:31:28
Subject: [PATCH] First draft of toolbar.

We are adding a thin horizontal toolbar below the menubar. This
commit adds the basic UI elements. Still need to hook up the actions
and make this hidable.

---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 5055677..29886d6 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -55,6 +55,12 @@ span#notebook_name {
     margin: 0.3em 0;
 }
 
+#toolbar {
+    /* Initially hidden to prevent FLOUC */
+    display: none;
+    padding: 3px 15px;
+}
+
 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 ad59393..8e591a2 100644
--- a/IPython/frontend/html/notebook/static/js/layout.js
+++ b/IPython/frontend/html/notebook/static/js/layout.js
@@ -27,7 +27,8 @@ var IPython = (function (IPython) {
         var h = win.height();
         var header_height = $('div#header').outerHeight(true);
         var menubar_height = $('div#menubar').outerHeight(true);
-        var app_height = h-header_height-menubar_height-2;  // content height
+        var 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/notebookmain.js b/IPython/frontend/html/notebook/static/js/notebookmain.js
index 007a89f..bb5fd46 100644
--- a/IPython/frontend/html/notebook/static/js/notebookmain.js
+++ b/IPython/frontend/html/notebook/static/js/notebookmain.js
@@ -88,6 +88,7 @@ $(document).ready(function () {
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.kernel_status_widget = new IPython.KernelStatusWidget('#kernel_status');
     IPython.menubar = new IPython.MenuBar('#menubar')
+    IPython.toolbar = new IPython.ToolBar('#toolbar')
     IPython.kernel_status_widget.status_idle();
 
     IPython.layout_manager.do_resize();
@@ -106,6 +107,7 @@ $(document).ready(function () {
     }
 
     $('div#menubar').css('display','block');
+    $('div#toolbar').css('display','block');
     $('div#main_app').css('display','block');
 
     IPython.layout_manager.do_resize();
diff --git a/IPython/frontend/html/notebook/static/js/toolbar.js b/IPython/frontend/html/notebook/static/js/toolbar.js
new file mode 100644
index 0000000..d76ccd2
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/js/toolbar.js
@@ -0,0 +1,82 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2008-2011  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// ToolBar
+//============================================================================
+
+var IPython = (function (IPython) {
+
+    var ToolBar = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+            this.style();
+            this.bind_events();
+        }
+    };
+
+
+    ToolBar.prototype.style = function () {
+        this.element.addClass('border-box-sizing');
+        this.element.find('#save_b').button({
+            icons : {primary: 'ui-icon-disk'},
+            text : false
+        });
+        this.element.find('#cut_b').button({
+            icons: {primary: 'ui-icon-scissors'},
+            text : false
+        });
+        this.element.find('#copy_b').button({
+            icons: {primary: 'ui-icon-copy'},
+            text : false
+        });
+        this.element.find('#paste_b').button({
+            icons: {primary: 'ui-icon-clipboard'},
+            text : false
+        });
+        this.element.find('#cut_copy_paste').buttonset();
+        this.element.find('#move_up_b').button({
+            icons: {primary: 'ui-icon-arrowthick-1-n'},
+            text : false
+        });
+        this.element.find('#move_down_b').button({
+            icons: {primary: 'ui-icon-arrowthick-1-s'},
+            text : false
+        });
+        this.element.find('#move_up_down').buttonset();
+        this.element.find('#insert_above_b').button({
+            icons: {primary: 'ui-icon-arrowthickstop-1-n'},
+            text : false
+        });
+        this.element.find('#insert_below_b').button({
+            icons: {primary: 'ui-icon-arrowthickstop-1-s'},
+            text : false
+        });
+        this.element.find('#insert_above_below').buttonset();
+        this.element.find('#run_b').button({
+            icons: {primary: 'ui-icon-play'},
+            text : false
+        });
+        this.element.find('#interrupt_b').button({
+            icons: {primary: 'ui-icon-stop'},
+            text : false
+        });
+        this.element.find('#run_int').buttonset();
+    };
+
+
+    ToolBar.prototype.bind_events = function () {
+
+    };
+
+
+    IPython.ToolBar = ToolBar;
+
+    return IPython;
+
+}(IPython));
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 23f6fc1..411a27b 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -141,6 +141,37 @@
 
 </div>
 
+<div id="toolbar">
+
+    <span>
+        <button id="save_b">Save</button>
+    </span>
+    <span id="cut_copy_paste">
+        <button id="cut_b" title="Cut">Cut</button>
+        <button id="copy_b" title="Copy">Copy</button>
+        <button id="paste_b" title="Paste">Paste</button>
+    </span>
+    <span id="move_up_down">
+        <button id="move_up_b" title="Move Up">Move Up</button>
+        <button id="move_down_b" title="Move Down">Move Down</button>
+    </span>
+    <span id="insert_above_below">
+        <button id="insert_above_b" title="Insert Above">Insert Above</button>
+        <button id="insert_below_b" title="Insert Below">Insert Below</button>
+    </span>
+    <span id="run_int">
+        <button id="run_b" title="Run">Run</button>
+        <button id="interrupt_b" title="Interrupt">Interrupt</button>
+    </span>
+    <span>
+        <select id="cell_type">
+             <option value="code">Code</option>
+             <option value="markdown">Markdown</option>
+        </select>
+    </span>
+
+</div>
+
 <div id="main_app">
 
     <div id="notebook_panel">
@@ -181,6 +212,7 @@
 <script src="/static/js/loginwidget.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/menubar.js" type="text/javascript" charset="utf-8"></script>
+<script src="/static/js/toolbar.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/notebookmain.js" type="text/javascript" charset="utf-8"></script>