Merge pull request #2333 from Carreau/metaui

UI For Metadata

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

@@ -0,0 +1,53 b''
+/*Css for the metadata edit area*/
+
+.celltoolbar{
+    border:thin solid #DDD;
+    margin-left:81px;
+    border-bottom:none;
+    background : #EEE;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    display:none;
+}
+
+.code_cell .celltoolbar{
+    margin-left:81px;
+}
+
+.text_cell .celltoolbar{
+    margin-left:0px;
+}
+
+.celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+}
+
+.celltoolbar-on .celltoolbar {
+    display:block;
+}
+
+.celltoolbar ui-button {
+    border :none;
+}
+
+.button_container {
+ float:right;
+}
+
+.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
+    border-radius : 0 0 0 0;
+    border : none;
+}
+
+.celltoolbar select {
+    margin:10px;
+    margin-top:0px;
+    margin-bottom:0px;
+}
+
+.celltoolbar input[type=checkbox] {
+    margin-bottom:1px;
+
+}
+

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

@@ -0,0 +1,358 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// CellToolbar
+//============================================================================
+
+
+/**
+ * A Module to control the per-cell toolbar.
+ * @module IPython
+ * @namespace IPython
+ * @submodule CellToolbar
+ */
+var IPython = (function (IPython) {
+    "use strict";
+
+
+    /**
+     * @constructor
+     * @class CellToolbar
+     * @param {The cell to attach the metadata UI to} cell
+     */
+    var CellToolbar = function (cell) {
+        CellToolbar._instances.push(this);
+        this.inner_element = $('<div/>');
+        this.cell = cell;
+        this.element = $('<div/>').addClass('celltoolbar')
+                .append(this.inner_element)
+        this.rebuild();
+        return this;
+    };
+
+    CellToolbar.dropdown_preset_element = $('<select/>')
+        .addClass('ui-widget ui-widget-content')
+        .attr('id', 'celltoolbar_selector')
+        .append($('<option/>').attr('value', '').text('None'))
+
+    CellToolbar.dropdown_preset_element.change(function(){
+        var val = CellToolbar.dropdown_preset_element.val()
+        if(val ==''){
+            $('body').removeClass('celltoolbar-on')
+        } else {
+            $('body').addClass('celltoolbar-on')
+            CellToolbar.activate_preset(val)
+        }
+    })
+
+
+
+    /**
+     * Class variable that should contain a dict of all availlable callback
+     * we need to think of wether or not we allow nested namespace
+     * @property _callback_dict
+     * @private
+     * @static
+     * @type Dict
+     */
+    CellToolbar._callback_dict = {};
+
+    /**
+     * Class variable that should contain the reverse order list of the button
+     * to add to the toolbar of each cell
+     * @property _ui_controls_list
+     * @private
+     * @static
+     * @type List
+     */
+    CellToolbar._ui_controls_list = [];
+
+    /**
+     * Class variable that should contains the CellToolbar instances for each
+     * cell of the notebook
+     *
+     * @private
+     * @property _instances
+     * @static
+     * @type List
+     */
+    CellToolbar._instances =[]
+
+    /**
+     * keep a list of all the availlabel presets for the toolbar
+     * @private
+     * @property _presets
+     * @static
+     * @type Dict
+     */
+    CellToolbar._presets ={}
+
+    // this is by design not a prototype.
+    /**
+     * Register a callback to create an UI element in a cell toolbar.
+     * @method register_callback
+     * @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  callback {function(div, cell)} callback that will be called to generate the ui element
+     *
+     *
+     * The callback will receive the following element :
+     *
+     *    * a div in which to add element.
+     *    * the cell it is responsible from
+     *
+     * @example
+     *
+     * Example that create callback for a button that toggle between `true` and `false` label,
+     * with the metadata under the key 'foo' to reflect the status of the button.
+     *
+     *      // first param reference to a DOM div
+     *      // second param reference to the cell.
+     *      var toggle =  function(div, cell) {
+     *          var button_container = $(div)
+     *
+     *          // let's create a button that show the  current value of the metadata
+     *          var button = $('<div/>').button({label:String(cell.metadata.foo)});
+     *
+     *          // On click, change the metadata value and update the button label
+     *          button.click(function(){
+     *                      var v = cell.metadata.foo;
+     *                      cell.metadata.foo = !v;
+     *                      button.button("option", "label", String(!v));
+     *                  })
+     *
+     *          // add the button to the DOM div.
+     *          button_container.append(button);
+     *      }
+     *
+     *      // now we register the callback under the name `foo` to give the
+     *      // user the ability to use it later
+     *      CellToolbar.register_callback('foo', toggle);
+     */
+    CellToolbar.register_callback = function(name, callback){
+        // Overwrite if it already exists.
+        CellToolbar._callback_dict[name] = callback;
+    };
+
+    /**
+     * Register a preset of UI element in a cell toolbar.
+     * Not supported Yet.
+     * @method register_preset
+     * @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  preset_list {List of String} reverse order of the button in the toolbar. Each String of the list
+     *          should correspond to a name of a registerd callback.
+     *
+     * @private
+     * @example
+     *
+     *      CellToolbar.register_callback('foo.c1', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c2', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c3', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c4', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c5', function(div, cell){...});
+     *
+     *      CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5'])
+     *      CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5'])
+     */
+    CellToolbar.register_preset = function(name, preset_list){
+        CellToolbar._presets[name] = preset_list
+        CellToolbar.dropdown_preset_element.append(
+           $('<option/>').attr('value', name).text(name)
+        )
+    }
+    /**
+     * Activate an UI preset from `register_preset`
+     *
+     * This does not update the selection UI.
+     *
+     * @method activate_preset
+     * @param preset_name {String} string corresponding to the preset name
+     *
+     * @static
+     * @private
+     * @example
+     *
+     *      CellToolbar.activate_preset('foo.foo_preset1');
+     */
+    CellToolbar.activate_preset= function(preset_name){
+        var preset = CellToolbar._presets[preset_name];
+
+        if(preset != undefined){
+            CellToolbar._ui_controls_list = preset;
+            CellToolbar.rebuild_all();
+        }
+    }
+
+
+    // this is by design not a prototype.
+    /**
+     * This should be called on the class and not on a instance as it will trigger
+     * rebuild of all the instances.
+     * @method rebuild_all
+     * @static
+     *
+     */
+    CellToolbar.rebuild_all = function(){
+        for(var i in CellToolbar._instances){
+            CellToolbar._instances[i].rebuild();
+        }
+    }
+
+    /**
+     * Rebuild all the button on the toolbar to update it's state.
+     * @method rebuild
+     */
+    CellToolbar.prototype.rebuild = function(){
+        // strip evrything from the div
+        // which is probabli metainner.
+        // or this.element.
+        this.inner_element.empty();
+
+        var cdict = CellToolbar._callback_dict;
+        var preset = CellToolbar._ui_controls_list;
+        // Yes we iterate on the class varaible, not the instance one.
+        for ( var index in CellToolbar._ui_controls_list){
+            var local_div = $('<div/>').addClass('button_container');
+            // Note,
+            // do this the other way, wrap in try/catch and don't append if any errors.
+            this.inner_element.append(local_div)
+            cdict[preset[index]](local_div, this.cell)
+        }
+
+    }
+
+
+    /**
+     */
+    CellToolbar.utils = {};
+
+    /**
+     * A utility function to generate bindings between a checkbox and cell/metadata
+     * @method utils.checkbox_ui_generator
+     * @static
+     *
+     * @param name {string} Label in front of the checkbox
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
+     *        A getter methods which return the current value.
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
+     *
+     *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
+     *          // setter
+     *          function(cell, value){
+     *              // we check that the slideshow namespace exist and create it if needed
+     *              if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
+     *              // set the value
+     *              cell.metadata.slideshow.isSectionStart = value
+     *              },
+     *          //geter
+     *          function(cell){ var ns = cell.metadata.slideshow;
+     *              // if the slideshow namespace does not exist return `undefined`
+     *              // (will be interpreted as `false` by checkbox) otherwise
+     *              // return the value
+     *              return (ns == undefined)? undefined: ns.isSectionStart
+     *              }
+     *      );
+     *
+     *      CellToolbar.register_callback('newSlide', newSlide);
+     *
+     */
+    CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){
+         return function(div, cell) {
+            var button_container = $(div)
+
+            var chkb = $('<input/>').attr('type', 'checkbox');
+            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
+            lbl.append(chkb);
+            chkb.attr("checked", getter(cell));
+
+            chkb.click(function(){
+                        var v = getter(cell);
+                        setter(cell, !v);
+                        chkb.attr("checked", !v);
+                    })
+           button_container.append($('<div/>').append(lbl));
+
+        }
+    }
+
+    /**
+     * A utility function to generate bindings between a dropdown list cell
+     * @method utils.select_ui_generator
+     * @static
+     *
+     * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
+     *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
+     *        and second the corresponding value to  be passed to setter/return by getter.
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
+     *        A getter methods which return the current value of the metadata.
+     * @param [label=""] {String} optionnal label for the dropdown menu
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     *      var select_type = CellToolbar.utils.select_ui_generator([
+     *              ["<None>"            , undefined      ],
+     *              ["Header Slide" , "header_slide" ],
+     *              ["Slide"        , "slide"        ],
+     *              ["Fragment"     , "fragment"     ],
+     *              ["Skip"         , "skip"         ],
+     *              ],
+     *              // setter
+     *              function(cell, value){
+     *                  // we check that the slideshow namespace exist and create it if needed
+     *                  if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
+     *                  // set the value
+     *                  cell.metadata.slideshow.slide_type = value
+     *                  },
+     *              //geter
+     *              function(cell){ var ns = cell.metadata.slideshow;
+     *                  // if the slideshow namespace does not exist return `undefined`
+     *                  // (will be interpreted as `false` by checkbox) otherwise
+     *                  // return the value
+     *                  return (ns == undefined)? undefined: ns.slide_type
+     *                  }
+     *      CellToolbar.register_callback('slideshow.select', select_type);
+     *
+     */
+    CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label){
+        label= label? label: "";
+        return function(div, cell) {
+            var button_container = $(div)
+            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
+            var select = $('<select/>');
+            for(var itemn in list_list){
+                var opt = $('<option/>');
+                        opt.attr('value', list_list[itemn][1])
+                        opt.text(list_list[itemn][0])
+                select.append(opt);
+            }
+            select.val(getter(cell));
+            select.change(function(){
+                        setter(cell, select.val());
+                    });
+            button_container.append($('<div/>').append(lbl).append(select));
+
+        }
+    };
+
+
+    IPython.CellToolbar = CellToolbar;
+
+    return IPython;
+}(IPython));

IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js

@@ -0,0 +1,94 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// CellToolbar Default
+//============================================================================
+
+/**
+ * Example Use for the CellToolbar library
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var CellToolbar = IPython.CellToolbar;
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+        var error_div = $('<div/>').css('color','red')
+
+        var textarea = $('<textarea/>')
+            .attr('rows','13')
+            .attr('cols','75')
+            .attr('name','metadata')
+            .text(JSON.stringify(md, null,4)||'');
+        var dialogform = $('<div/>').attr('title','Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text("Manually edit the JSON below to manipulate the metadata for this cell. This assumes you know what you are doing and won't complain if it breaks your notebook. We also recommend putting your metadata attributes in an appropriately named sub-structure, so they don't conflict with those of others.")
+                        )
+                        .append(error_div)
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           error_div.text('Warning, invalid json, not saved');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = div
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('default.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('default.rawedit');
+
+    CellToolbar.register_preset('Default',example_preset);
+    console.log('Default extension for metadata editting loaded.');
+
+}(IPython));

IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js

@@ -0,0 +1,154 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// CellToolbar Example
+//============================================================================
+
+/**
+ * Example Use for the CellToolbar library
+ * add the following to your custom.js to load
+ * Celltoolbar UI for slideshow
+ *
+ * ```
+ * $.getScript('/static/js/celltoolbarpresets/example.js');
+ * ```
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var CellToolbar = IPython.CellToolbar;
+
+    var example_preset = [];
+
+    var simple_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
+        var fun = function(value){
+                try{
+                    if(value){
+                        cell.code_mirror.setOption('readOnly','nocursor')
+                        button.button('option','icons',{primary:'ui-icon-locked'})
+                    } else {
+                        cell.code_mirror.setOption('readOnly',false)
+                        button.button('option','icons',{primary:'ui-icon-unlocked'})
+                    }
+                } catch(e){}
+
+        }
+            fun(cell.metadata.ro)
+            button.click(function(){
+                    var v = cell.metadata.ro;
+                    var locked = !v;
+                    cell.metadata.ro = locked;
+                    fun(locked)
+                    })
+                .css('height','16px')
+                .css('width','35px');
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('example.lock',simple_button);
+    example_preset.push('example.lock');
+
+    var toggle_test =  function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>')
+            .button({label:String(cell.metadata.foo)}).
+            css('width','65px');
+        button.click(function(){
+                    var v = cell.metadata.foo;
+                    cell.metadata.foo = !v;
+                    button.button("option","label",String(!v));
+                })
+       button_container.append(button);
+    }
+
+    CellToolbar.register_callback('example.toggle',toggle_test);
+    example_preset.push('example.toggle');
+
+    var checkbox_test = CellToolbar.utils.checkbox_ui_generator('Yes/No',
+         // setter
+         function(cell, value){
+             // we check that the slideshow namespace exist and create it if needed
+             if (cell.metadata.yn_test == undefined){cell.metadata.yn_test = {}}
+             // set the value
+             cell.metadata.yn_test.value = value
+             },
+         //geter
+         function(cell){ var ns = cell.metadata.yn_test;
+             // if the slideshow namespace does not exist return `undefined`
+             // (will be interpreted as `false` by checkbox) otherwise
+             // return the value
+             return (ns == undefined)? undefined: ns.value
+             }
+    );
+
+
+    CellToolbar.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test = CellToolbar.utils.select_ui_generator([
+            ["-"            ,undefined      ],
+            ["Header Slide" ,"header_slide" ],
+            ["Slide"        ,"slide"        ],
+            ["Fragment"     ,"fragment"     ],
+            ["Skip"         ,"skip"         ],
+            ],
+            // setter
+            function(cell,value){
+                // we check that the slideshow namespace exist and create it if needed
+                if (cell.metadata.test == undefined){cell.metadata.test = {}}
+                // set the value
+                cell.metadata.test.slide_type = value
+                },
+            //geter
+            function(cell){ var ns = cell.metadata.test;
+                // if the slideshow namespace does not exist return `undefined`
+                // (will be interpreted as `false` by checkbox) otherwise
+                // return the value
+                return (ns == undefined)? undefined: ns.slide_type
+                });
+
+    CellToolbar.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    var simple_dialog = function(title,text){
+        var dlg = $('<div/>').attr('title',title)
+            .append($('<p/>').text(text))
+        $(dlg).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+    }
+
+    var add_simple_dialog_button = function(div, cell) {
+        var help_text = ["This is the Metadata editting UI.",
+                         "It heavily rely on plugin to work ",
+                         "and is still under developpement. You shouldn't wait too long before",
+                         " seeing some customisable buttons in those toolbar."
+                        ].join('\n')
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'?'})
+                .click(function(){simple_dialog('help',help_text); return false;})
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('example.help',add_simple_dialog_button)
+    example_preset.push('example.help')
+
+    CellToolbar.register_preset('Example',example_preset);
+    console.log('Example extension for metadata editting loaded.');
+
+}(IPython));

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

@@ -29,6 +29,7 b' span#notebook_name {'
     font-size: 146.5%;
 }
 
+
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
@@ -80,8 +81,11 b' span#notebook_name {'
     padding: 3px 15px;
 }
 
-#cell_type {
+#maintoolbar > select, #maintoolbar label {
     font-size: 85%;
+    margin-left:0.3em;
+    margin-right:0.3em;
+
 }
 
 

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

@@ -50,7 +50,9 b' var IPython = (function (IPython) {'
      * and will be called by Base Class constructor.
      * @method create_element
      */
-    Cell.prototype.create_element = function () {};
+    Cell.prototype.create_element = function () {
+        this.celltoolbar = new IPython.CellToolbar(this);
+    };
 
 
     /**
@@ -163,6 +165,7 b' var IPython = (function (IPython) {'
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
+        this.celltoolbar.rebuild();
     };
 
 

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

@@ -58,7 +58,10 b' var IPython = (function (IPython) {'
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
+        IPython.Cell.prototype.create_element.apply(this, arguments);
+
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));

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

@@ -28,6 +28,18 b''
  *            ]);
  *    });
  *
+ * Example :
+ *
+ *  Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );`
+ *  to load custom script into the notebook.
+ *
+ *    // to load the metadata ui extension example.
+ *    $.getScript('/static/js/celltoolbarpresets/example.js');
+ *    // or
+ *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
+ *    $.getScript('/static/js/celltoolbarpresets/slideshow.js');
+ *
+ *
  * @module IPython
  * @namespace IPython
  * @class customjs

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

@@ -17,6 +17,9 b' var IPython = (function (IPython) {'
         this.construct();
         this.add_drop_down_list();
         this.bind_events();
+        $(this.selector)
+        .append($('<label/>').text('Cell Toolbar:'))
+        .append(IPython.CellToolbar.dropdown_preset_element)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
@@ -115,8 +118,6 b' var IPython = (function (IPython) {'
                         }
                 }
             ],'run_int');
-
-
     };
 
     MainToolBar.prototype.add_drop_down_list = function () {

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

@@ -42,7 +42,9 b' var IPython = (function (IPython) {'
      * @private
      */
     TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        IPython.Cell.prototype.create_element.apply(this, arguments);
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {

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

@@ -36,7 +36,7 b' var IPython = (function (IPython) {'
      *
      *  @example
      *
-     *      IPython.toolbar.add_button_group([
+     *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
      *            icon:'ui-icon-disk',

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

@@ -17,6 +17,7 b' window.mathjax_url = "{{mathjax_url}}";'
 <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/celltoolbar.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" />
 
@@ -203,6 +204,7 b' data-notebook-id={{notebook_id}}'
 <script src="{{ static_url("js/mathjaxutils.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/celltoolbar.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>
@@ -221,7 +223,7 b' data-notebook-id={{notebook_id}}'
 <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>
-{% endblock %}
-
 
+<script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
 
+{% endblock %}