bootstrap toolbar

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

@@ -26,7 +26,7 var IPython = (function (IPython) {
                 {
                     id : 'save_b',
                     label : 'Save and Checkpoint',
-                    icon : 'ui-icon-disk',
+                    icon : 'icon-hdd',
                     callback : function () {
                         IPython.notebook.save_checkpoint();
                         }
@@ -36,7 +36,7 var IPython = (function (IPython) {
                 {
                     id : 'cut_b',
                     label : 'Cut Cell',
-                    icon : 'ui-icon-scissors',
+                    icon : 'icon-cut',
                     callback : function () {
                         IPython.notebook.cut_cell();
                         }
@@ -44,7 +44,7 var IPython = (function (IPython) {
                 {
                     id : 'copy_b',
                     label : 'Copy Cell',
-                    icon : 'ui-icon-copy',
+                    icon : 'icon-copy',
                     callback : function () {
                         IPython.notebook.copy_cell();
                         }
@@ -52,7 +52,7 var IPython = (function (IPython) {
                 {
                     id : 'paste_b',
                     label : 'Paste Cell Below',
-                    icon : 'ui-icon-clipboard',
+                    icon : 'icon-paste',
                     callback : function () {
                         IPython.notebook.paste_cell_below();
                         }
@@ -63,7 +63,7 var IPython = (function (IPython) {
                 {
                     id : 'move_up_b',
                     label : 'Move Cell Up',
-                    icon : 'ui-icon-arrowthick-1-n',
+                    icon : 'icon-arrow-up',
                     callback : function () {
                         IPython.notebook.move_cell_up();
                         }
@@ -71,7 +71,7 var IPython = (function (IPython) {
                 {
                     id : 'move_down_b',
                     label : 'Move Cell Down',
-                    icon : 'ui-icon-arrowthick-1-s',
+                    icon : 'icon-arrow-up',
                     callback : function () {
                         IPython.notebook.move_cell_down();
                         }
@@ -82,7 +82,7 var IPython = (function (IPython) {
                 {
                     id : 'insert_above_b',
                     label : 'Insert Cell Above',
-                    icon : 'ui-icon-arrowthickstop-1-n',
+                    icon : 'icon-circle-arrow-up',
                     callback : function () {
                         IPython.notebook.insert_cell_above('code');
                         }
@@ -90,7 +90,7 var IPython = (function (IPython) {
                 {
                     id : 'insert_below_b',
                     label : 'Insert Cell Below',
-                    icon : 'ui-icon-arrowthickstop-1-s',
+                    icon : 'icon-circle-arrow-down',
                     callback : function () {
                         IPython.notebook.insert_cell_below('code');
                         }
@@ -101,7 +101,7 var IPython = (function (IPython) {
                 {
                     id : 'run_b',
                     label : 'Run Cell',
-                    icon : 'ui-icon-play',
+                    icon : 'icon-play',
                     callback : function () {
                     IPython.notebook.execute_selected_cell();
                         }
@@ -109,7 +109,7 var IPython = (function (IPython) {
                 {
                     id : 'interrupt_b',
                     label : 'Interrupt',
-                    icon : 'ui-icon-stop',
+                    icon : 'icon-stop',
                     callback : function () {
                         IPython.notebook.kernel.interrupt();
                         }
@@ -121,7 +121,7 var IPython = (function (IPython) {
         this.element
             .append($('<select/>')
                 .attr('id','cell_type')
-                .addClass('ui-widget-content')
+                // .addClass('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'))
@@ -136,9 +136,9 var IPython = (function (IPython) {
 
 
     MainToolBar.prototype.add_celltoolbar_list = function () {
-        var label = $('<label/>').text('Cell Toolbar:');
+        var label = $('<span/>').addClass("navbar-text").text('Cell Toolbar:');
         var select = $('<select/>')
-            .addClass('ui-widget-content')
+            // .addClass('ui-widget-content')
             .attr('id', 'ctb_select')
             .append($('<option/>').attr('value', '').text('None'));
         this.element.append(label).append(select);

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

@@ -39,13 +39,13 var IPython = (function (IPython) {
      *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
-     *            icon:'ui-icon-disk',
+     *            icon:'icon-hdd',
      *            callback:function(){alert('hoho')},
      *            id : 'my_button_id',    // this is optional
      *          },
      *          {
      *            label:'my second button',
-     *            icon:'ui-icon-scissors',
+     *            icon:'icon-play',
      *            callback:function(){alert('be carefull I cut')}
      *          }
      *        ],
@@ -56,40 +56,37 var IPython = (function (IPython) {
      *  @param list {List}
      *      List of button of the group, with the following paramter for each :
      *      @param list.label {string} text to show on button hover
-     *      @param list.icon {string} icon to choose from [jQuery ThemeRoller](http://jqueryui.com/themeroller/)
+     *      @param list.icon {string} icon to choose from [Font Awesome](http://fortawesome.github.io/Font-Awesome)
      *      @param list.callback {function} function to be called on button click
      *      @param [list.id] {String} id to give to the button
      *  @param [group_id] {String} optionnal id to give to the group
      *
      */
     ToolBar.prototype.add_buttons_group = function (list, group_id) {
-        var span_group = $('<span/>');
+        var btn_group = $('<div/>').addClass("btn-group");
         if( group_id != undefined ) {
-            span_group.attr('id',group_id);
+            btn_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 button  = $('<button/>')
+                .addClass('btn')
+                .attr("title", list[el].label)
+                .append(
+                    $("<i/>").addClass(list[el].icon)
+                );
             var id = list[el].id;
             if( id != undefined )
                 button.attr('id',id);
             var fun = list[el].callback;
             button.click(fun);
-            span_group.append(button);
+            btn_group.append(button);
         }
-        span_group.buttonset();
-        $(this.selector).append(span_group);
+        $(this.selector).append(btn_group);
     };
 
     ToolBar.prototype.style = function () {
-        this.element.addClass('border-box-sizing').
-            addClass('toolbar').
-            css('border-top-style','none').
-            css('border-left-style','none').
-            css('border-right-style','none');
+        this.element.addClass('border-box-sizing')
+            .addClass('toolbar');
     };
 
     /**

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

@@ -1,15 +1,10
 .toolbar {
-    padding: 3px 15px;
+    padding: 0px 15px;
     border-bottom: @border_width @border_color solid;
 
-    button {
-        margin-top:2px;
-        margin-bottom:2px;
-    }
-
-
     select, label {
-        height : 19px;
+        width: auto;
+        height: @baseLineHeight + 6px;
         vertical-align:middle;
         margin-right:2px;
         margin-bottom:0;
@@ -19,8 +14,7
         margin-right:0.3em;
         padding: 0px;
     }
-}
-
-.toolbar select{
-    width:auto;
+    .btn {
+        padding: 2px 8px;
+    }
 }