Merge pull request #2127 from Carreau/jsToolbar

Ability to build toolbar in JS

IPython/frontend/html/notebook/static/js/maintoolbar.js

@@ -0,0 +1,179 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 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 MainToolBar = function (selector) {
+        this.selector = selector;
+        IPython.ToolBar.apply(this, arguments);
+        this.construct();
+        this.add_drop_down_list();
+        this.bind_events();
+    };
+
+    MainToolBar.prototype = new IPython.ToolBar(); 
+
+    MainToolBar.prototype.construct = function () {
+        this.add_buttons_group([
+                {
+                    id : 'save_b',
+                    label : 'Save',
+                    icon : 'ui-icon-disk',
+                    callback : function () {
+                        IPython.notebook.save_notebook();
+                        }
+                }
+            ]);
+        this.add_buttons_group([
+                {
+                    id : 'cut_b',
+                    label : 'Cut Cell',
+                    icon : 'ui-icon-scissors',
+                    callback : function () {
+                        IPython.notebook.cut_cell();
+                        }
+                },
+                {
+                    id : 'copy_b',
+                    label : 'Copy Cell',
+                    icon : 'ui-icon-copy',
+                    callback : function () {
+                        IPython.notebook.copy_cell();
+                        }
+                },
+                {
+                    id : 'paste_b',
+                    label : 'Paste Cell',
+                    icon : 'ui-icon-clipboard',
+                    callback : function () {
+                        IPython.notebook.paste_cell();
+                        }
+                }
+            ],'cut_copy_paste');
+
+        this.add_buttons_group([
+                {
+                    id : 'move_up_b',
+                    label : 'Move Cell Up',
+                    icon : 'ui-icon-arrowthick-1-n',
+                    callback : function () {
+                        IPython.notebook.move_cell_up();
+                        }
+                },
+                {
+                    id : 'move_down_b',
+                    label : 'Move Cell Down',
+                    icon : 'ui-icon-arrowthick-1-s',
+                    callback : function () {
+                        IPython.notebook.move_cell_down();
+                        }
+                }
+            ],'move_up_down');
+        
+        this.add_buttons_group([
+                {
+                    id : 'insert_above_b',
+                    label : 'Insert Cell Above',
+                    icon : 'ui-icon-arrowthickstop-1-n',
+                    callback : function () {
+                        IPython.notebook.insert_cell_above('code');
+                        }
+                },
+                {
+                    id : 'insert_below_b',
+                    label : 'Insert Cell Below',
+                    icon : 'ui-icon-arrowthickstop-1-s',
+                    callback : function () {
+                        IPython.notebook.insert_cell_below('code');
+                        }
+                }
+            ],'insert_above_below');
+
+        this.add_buttons_group([
+                {
+                    id : 'run_b',
+                    label : 'Run Cell',
+                    icon : 'ui-icon-play',
+                    callback : function () {
+                    IPython.notebook.execute_selected_cell();
+                        }
+                },
+                {
+                    id : 'interrupt_b',
+                    label : 'Interrupt',
+                    icon : 'ui-icon-stop',
+                    callback : function () {
+                        IPython.notebook.kernel.interrupt();
+                        }
+                }
+            ],'run_int');
+
+
+    };
+
+    MainToolBar.prototype.add_drop_down_list = function () {
+        var select = $(this.selector)
+            .append($('<select/>')
+                .attr('id','cell_type')
+                .addClass('ui-widget ui-widget-content')
+                    .append($('<option/>').attr('value','code').text('Code'))
+                    .append($('<option/>').attr('value','markdown').text('Markdown'))
+                    .append($('<option/>').attr('value','raw').text('Raw Text'))
+                    .append($('<option/>').attr('value','heading1').text('Heading 1'))
+                    .append($('<option/>').attr('value','heading2').text('Heading 2'))
+                    .append($('<option/>').attr('value','heading3').text('Heading 3'))
+                    .append($('<option/>').attr('value','heading4').text('Heading 4'))
+                    .append($('<option/>').attr('value','heading5').text('Heading 5'))
+                    .append($('<option/>').attr('value','heading6').text('Heading 6'))
+                    .append($('<option/>').attr('value','heading7').text('Heading 7'))
+                    .append($('<option/>').attr('value','heading8').text('Heading 8'))
+                );
+    };
+
+    MainToolBar.prototype.bind_events = function () {
+        var that = this;
+        
+        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();
+            } else if (cell_type === 'raw')  {
+                IPython.notebook.to_raw();
+            } else if (cell_type === 'heading1')  {
+                IPython.notebook.to_heading(undefined, 1);
+            } else if (cell_type === 'heading2')  {
+                IPython.notebook.to_heading(undefined, 2);
+            } else if (cell_type === 'heading3')  {
+                IPython.notebook.to_heading(undefined, 3);
+            } else if (cell_type === 'heading4')  {
+                IPython.notebook.to_heading(undefined, 4);
+            } else if (cell_type === 'heading5')  {
+                IPython.notebook.to_heading(undefined, 5);
+            } else if (cell_type === 'heading6')  {
+                IPython.notebook.to_heading(undefined, 6);
+            }
+        });
+        $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
+            if (data.cell_type === 'heading') {
+                that.element.find('#cell_type').val(data.cell_type+data.level);
+            } else {
+                that.element.find('#cell_type').val(data.cell_type);
+            }
+        });
+    };
+
+    IPython.MainToolBar = MainToolBar;
+
+    return IPython;
+
+}(IPython));

IPython/frontend/html/notebook/static/css/notebook.css

@@ -1,408 +1,408 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     border: 1px solid transparent;
     padding: 2px 1.6em;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
     margin: 0;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification_area {
     position: absolute;
     right: 0px;
     top: 0px;
     height: 25px;
     padding: 3px 0px;
     padding-right: 3px;
     z-index: 10;
 }
 
 .notification_widget{
     float : right;
     right: 0px;
     top: 1px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
-#toolbar {
+.toolbar {
     padding: 3px 15px;
 }
 
 #cell_type {
     font-size: 85%;
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 #pager_container {
     position : relative;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.ui-widget-content {
     border: 1px solid #aaa;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
 
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
 div.output_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
     margin-left: 5px;
     /* FF needs explicit width to stretch */
     width: 100%;
     /* this position must be relative to enable descendents to be absolute within it */
     position: relative;
 }
 
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   
   overflow: auto;
   border-radius: 3px;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
 }
 
 /* output div while it is collapsed */
 div.output_collapsed {
   margin-right: 5px;
 }
 
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px;
   position: absolute;
   border-radius: 3px;
 }
 
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   box-shadow: inset 0 0 1px #000;
   background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
     color: darkred;
     /* 5px right shift to account for margin in parent container */
     margin: 0 5px 0 -5px;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 0.4em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font. 
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions {
     position: absolute;
     z-index: 10;
     overflow: hidden;
     border: 1px solid grey;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     overflow: auto;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }
 
 #fonttest {
     font-family: monospace;
 }
 
 .js-error {
     color: darkred;
 }

IPython/frontend/html/notebook/static/js/layoutmanager.js

@@ -1,62 +1,62 b''
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Layout
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var LayoutManager = function () {
         this.bind_events();
     };
 
 
     LayoutManager.prototype.bind_events = function () {
         $(window).resize($.proxy(this.do_resize,this));
     };
 
     LayoutManager.prototype.app_height = function() {
         var win = $(window);
         var w = win.width();
         var h = win.height();
         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;
-        if ($('div#toolbar').css('display') === 'none') {
+        if ($('div#maintoolbar').css('display') === 'none') {
             toolbar_height = 0;
         } else {
-            toolbar_height = $('div#toolbar').outerHeight(true);
+            toolbar_height = $('div#maintoolbar').outerHeight(true);
         }
         return h-header_height-menubar_height-toolbar_height;  // content height
     }
 
     LayoutManager.prototype.do_resize = function () {
         var app_height = this.app_height()  // content height
 
         $('div#main_app').height(app_height);  // content+padding+border height
 
         var pager_height = IPython.pager.percentage_height*app_height;
         var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
         $('div#pager').height(pager_height);
         if (IPython.pager.expanded) {
             $('div#notebook').height(app_height-pager_height-pager_splitter_height);
         } else {
             $('div#notebook').height(app_height-pager_splitter_height);
         }
     };
 
     IPython.LayoutManager = LayoutManager;
 
     return IPython;
 
 }(IPython));

IPython/frontend/html/notebook/static/js/notebookmain.js

@@ -1,87 +1,87 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // On document ready
 //============================================================================
 
 
 $(document).ready(function () {
 
     // monkey patch CM to be able to syntax highlight cell magics
     // bug reported upstream,
     // see https://github.com/marijnh/CodeMirror2/issues/670
     if(CodeMirror.getMode(1,'text/plain').indent == undefined ){
         console.log('patching CM for undefined indent');
         CodeMirror.modes.null = function() { return {token: function(stream) {stream.skipToEnd();},indent : function(){return 0}}}
         }
 
     CodeMirror.patchedGetMode = function(config, mode){
             var cmmode = CodeMirror.getMode(config, mode);
             if(cmmode.indent == null)
             {
                 console.log('patch mode "' , mode, '" on the fly');
                 cmmode.indent = function(){return 0};
             }
             return cmmode;
         }
     // end monkey patching CodeMirror
 
     IPython.init_mathjax();
 
     IPython.read_only = $('body').data('readOnly') === 'True';
     $('div#main_app').addClass('border-box-sizing ui-widget');
     $('div#notebook_panel').addClass('border-box-sizing ui-widget');
     // The header's bottom border is provided by the menu bar so we remove it.
     $('div#header').css('border-bottom-style','none');
 
     IPython.page = new IPython.Page();
     IPython.markdown_converter = new Markdown.Converter();
     IPython.layout_manager = new IPython.LayoutManager();
     IPython.pager = new IPython.Pager('div#pager', 'div#pager_splitter');
     IPython.quick_help = new IPython.QuickHelp('span#quick_help_area');
     IPython.login_widget = new IPython.LoginWidget('span#login_widget');
     IPython.notebook = new IPython.Notebook('div#notebook');
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar')
-    IPython.toolbar = new IPython.ToolBar('#toolbar')
+    IPython.toolbar = new IPython.MainToolBar('#maintoolbar')
     IPython.tooltip = new IPython.Tooltip()
     IPython.notification_area = new IPython.NotificationArea('#notification_area')
     IPython.notification_area.init_notification_widgets();
 
     IPython.layout_manager.do_resize();
 
     $('body').append('<div id="fonttest"><pre><span id="test1">x</span>'+
                      '<span id="test2" style="font-weight: bold;">x</span>'+
                      '<span id="test3" style="font-style: italic;">x</span></pre></div>')
     var nh = $('#test1').innerHeight();
     var bh = $('#test2').innerHeight();
     var ih = $('#test3').innerHeight();
     if(nh != bh || nh != ih) {
         $('head').append('<style>.CodeMirror span { vertical-align: bottom; }</style>');
     }
     $('#fonttest').remove();
 
     if(IPython.read_only){
         // hide various elements from read-only view
         $('div#pager').remove();
         $('div#pager_splitter').remove();
 
         // set the notebook name field as not modifiable
         $('#notebook_name').attr('disabled','disabled')
     }
 
     IPython.page.show();
 
     IPython.layout_manager.do_resize();
     $([IPython.events]).on('notebook_loaded.Notebook', function () {
         IPython.layout_manager.do_resize();
     })
     IPython.notebook.load_notebook($('body').data('notebookId'));
 
 });
 

IPython/frontend/html/notebook/static/js/toolbar.js

@@ -1,152 +1,96 b''
 //----------------------------------------------------------------------------
-//  Copyright (C) 2008-2011  The IPython Development Team
+//  Copyright (C) 2008 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();
         }
     };
 
+    // add a group of button into the current toolbar.
+    //
+    // First argument : Mandatory
+    //      list of dict as argument, each dict should contain
+    //      3 mandatory keys and values :
+    //      label : string -- the text to show on hover
+    //      icon  : string -- the jQuery-ui icon to add on this button
+    //      callback : function -- the callback to execute on a click
+    //
+    //      and optionally an 'id' key that is assigned to the button element
+    //
+    // Second Argument, optional,
+    //      string reprensenting the id to give to the button group.
+    //
+    // Example
+    //
+    // IPython.toolbar.add_button_group([
+    //  {label:'my button',
+    //   icon:'ui-icon-disk',
+    //   callback:function(){alert('hoho'),
+    //   id : 'my_button_id',                 // this is optional
+    //   }
+    //  },
+    //  {label:'my second button',
+    //   icon:'ui-icon-scissors',
+    //   callback:function(){alert('be carefull I cut')}
+    //  }
+    //  ],
+    //  "my_button_group_id"
+    //  )
+    //
+    ToolBar.prototype.add_buttons_group = function (list, group_id) {
+        var span_group = $('<span/>');
+        if( group_id != undefined ) {
+            span_group.attr('id',group_id);
+        }
+        for(var el in list) {
+            var button  = $('<button/>').button({
+                icons : {primary : list[el].icon},
+                text  : false,
+                label : list[el].label
+                });
+            var id = list[el].id;
+            if( id != undefined )
+                button.attr('id',id);
+            var fun = list[el].callback;
+            button.click(fun);
+            span_group.append(button);
+        }
+        span_group.buttonset();
+        $(this.selector).append(span_group);
+    };
 
     ToolBar.prototype.style = function () {
         this.element.addClass('border-box-sizing').
-            addClass('ui-widget ui-widget-content').
+            addClass('ui-widget ui-widget-content toolbar').
             css('border-top-style','none').
             css('border-left-style','none').
             css('border-right-style','none');
-        this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
-        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 () {
-        var that = this;
-        this.element.find('#save_b').click(function () {
-            IPython.notebook.save_notebook();
-        });
-        this.element.find('#cut_b').click(function () {
-            IPython.notebook.cut_cell();
-        });
-        this.element.find('#copy_b').click(function () {
-            IPython.notebook.copy_cell();
-        });
-        this.element.find('#paste_b').click(function () {
-            IPython.notebook.paste_cell();
-        });
-        this.element.find('#move_up_b').click(function () {
-            IPython.notebook.move_cell_up();
-        });
-        this.element.find('#move_down_b').click(function () {
-            IPython.notebook.move_cell_down();
-        });
-        this.element.find('#insert_above_b').click(function () {
-            IPython.notebook.insert_cell_above('code');
-        });
-        this.element.find('#insert_below_b').click(function () {
-            IPython.notebook.insert_cell_below('code');
-        });
-        this.element.find('#run_b').click(function () {
-            IPython.notebook.execute_selected_cell();
-        });
-        this.element.find('#interrupt_b').click(function () {
-            IPython.notebook.kernel.interrupt();
-        });
-        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();
-            } else if (cell_type === 'raw')  {
-                IPython.notebook.to_raw();
-            } else if (cell_type === 'heading1')  {
-                IPython.notebook.to_heading(undefined, 1);
-            } else if (cell_type === 'heading2')  {
-                IPython.notebook.to_heading(undefined, 2);
-            } else if (cell_type === 'heading3')  {
-                IPython.notebook.to_heading(undefined, 3);
-            } else if (cell_type === 'heading4')  {
-                IPython.notebook.to_heading(undefined, 4);
-            } else if (cell_type === 'heading5')  {
-                IPython.notebook.to_heading(undefined, 5);
-            } else if (cell_type === 'heading6')  {
-                IPython.notebook.to_heading(undefined, 6);
-            };
-        });
-        $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
-            if (data.cell_type === 'heading') {
-                that.element.find('#cell_type').val(data.cell_type+data.level);
-            } else {
-                that.element.find('#cell_type').val(data.cell_type);
-            }
-        });
     };
 
 
     ToolBar.prototype.toggle = function () {
         this.element.toggle();
+        if (IPython.layout_manager != undefined) {
         IPython.layout_manager.do_resize();
+        }
     };
 
 
     IPython.ToolBar = ToolBar;
 
     return IPython;
 
 }(IPython));

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

@@ -1,259 +1,224 b''
 {% extends page.html %}
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
 {% end %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 <link rel="stylesheet" href="{{ static_url("css/printnotebook.css") }}" type="text/css" media="print"/>
 
 {% end %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% end %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% end %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</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>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
                 <li id="all_outputs"><a href="#">All Output</a>
                     <ul>
                         <li id="expand_all_output"><a href="#">Expand</a></li>
                         <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
                         <li id="collapse_all_output"><a href="#">Collapse</a></li>
                         <li id="clear_all_output"><a href="#">Clear</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
     <div id="notification_area">
     </div>
 </div>
 
 
-<div id="toolbar">
-
-    <span>
-        <button id="save_b">Save</button>
-    </span>
-    <span id="cut_copy_paste">
-        <button id="cut_b" title="Cut Cell">Cut Cell</button>
-        <button id="copy_b" title="Copy Cell">Copy Cell</button>
-        <button id="paste_b" title="Paste Cell">Paste Cell</button>
-    </span>
-    <span id="move_up_down">
-        <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
-        <button id="move_down_b" title="Move Cell Down">Move Down</button>
-    </span>
-    <span id="insert_above_below">
-        <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
-        <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
-    </span>
-    <span id="run_int">
-        <button id="run_b" title="Run Cell">Run Cell</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>
-             <option value="raw">Raw Text</option>
-             <option value="heading1">Heading 1</option>
-             <option value="heading2">Heading 2</option>
-             <option value="heading3">Heading 3</option>
-             <option value="heading4">Heading 4</option>
-             <option value="heading5">Heading 5</option>
-             <option value="heading6">Heading 6</option>
-        </select>
-    </span>
-
-</div>
+<div id="maintoolbar"></div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager_container">
             <div id='pager_button_area'>
             </div>
             <div id="pager"></div>
         </div>
     </div>
 
 </div>
 <div id='tooltip' class='tooltip ui-corner-all' style='display:none'></div>
 
 
 {% end %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/multiplex.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/config.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
 
 {% end %}