Merge pull request #3393 from minrk/bootstrap

[WIP] bootstrapify

IPython/frontend/html/notebook/static/base/js/dialog.js

@@ -0,0 +1,75 b''
+//----------------------------------------------------------------------------
+//  Copyright (C) 2013  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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Utility for modal dialogs with bootstrap
+//============================================================================
+
+IPython.namespace('IPython.dialog');
+
+IPython.dialog = (function (IPython) {
+    
+    var modal = function (options) {
+        var dialog = $("<div/>").addClass("modal").attr("role", "dialog");
+        dialog.append(
+            $("<div/>")
+                .addClass("modal-header")
+                .append($("<button>")
+                    .addClass("close")
+                    .attr("data-dismiss", "modal")
+                    .html("&times;")
+                ).append(
+                    $("<h3/>").text(options.title || "")
+                )
+        ).append(
+            $("<div/>").addClass("modal-body").append(
+                options.body || $("<p/>")
+            )
+        );
+        
+        var footer = $("<div/>").addClass("modal-footer");
+        
+        for (var label in options.buttons) {
+            var btn_opts = options.buttons[label];
+            var button = $("<button/>")
+                .addClass("btn")
+                .attr("data-dismiss", "modal")
+                .text(label);
+            if (btn_opts.click) {
+                button.click($.proxy(btn_opts.click, dialog));
+            }
+            if (btn_opts.class) {
+                button.addClass(btn_opts.class);
+            }
+            footer.append(button);
+        }
+        dialog.append(footer);
+        // hook up on-open event
+        dialog.on("shown", function() {
+            setTimeout(function() {
+                footer.find("button").last().focus();
+                if (options.open) {
+                    $.proxy(options.open, dialog)();
+                }
+            }, 0);
+        });
+        
+        // destroy dialog on hide, unless explicitly asked not to
+        if (options.destroy == undefined || options.destroy) {
+            dialog.on("hidden", function () {
+                dialog.remove();
+            });
+        }
+        
+        return dialog.modal(options);
+    }
+    
+    return {
+        modal : modal,
+    };
+
+}(IPython));

IPython/frontend/html/notebook/static/auth/js/loginmain.js

@@ -13,8 +13,7 b''
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-    $('input#login_submit').button();
-    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
+    $('button#login_submit').addClass("btn");
     IPython.page.show();
     $('input#password_input').focus();
 

IPython/frontend/html/notebook/static/auth/js/loginwidget.js

@@ -23,8 +23,7 b' var IPython = (function (IPython) {'
     };
 
     LoginWidget.prototype.style = function () {
-        this.element.find('button#logout').button();
-        this.element.find('button#login').button();
+        this.element.find("button").addClass("btn btn-small");
     };
 
 

IPython/frontend/html/notebook/static/auth/js/logoutmain.js

@@ -13,7 +13,7 b''
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing');
     IPython.page.show();
 
 });

IPython/frontend/html/notebook/static/auth/less/login.less

@@ -1,1 +1,6 b''
 // Custom styles for login.html
+.center-nav {
+  display: inline-block;
+  // pull the lower margin back
+  margin-bottom: -4px;
+}
  No newline at end of file

IPython/frontend/html/notebook/static/base/js/page.js

@@ -17,12 +17,8 b' var IPython = (function (IPython) {'
     };
 
     Page.prototype.style = function () {
-        $('div#header').addClass('border-box-sizing').
-            addClass('ui-widget-content').
-            css('border-top-style','none').
-            css('border-left-style','none').
-            css('border-right-style','none');
-        $('div#site').addClass('border-box-sizing')
+        $('div#header').addClass('border-box-sizing');
+        $('div#site').addClass('border-box-sizing');
     };
 
 

IPython/frontend/html/notebook/static/base/less/page.less

@@ -17,27 +17,19 b' body {'
     overflow: visible;
 }
 
-
 div#header {
     /* Initially hidden to prevent FLOUC */
     display: none;
-    position: relative;
-    height: 40px;
-    padding: 5px;
-    margin: 0px;
-    width: 100%;
 }
 
-span#ipython_notebook {
-    position: absolute;
-    padding: 2px 2px 2px 5px;
+#ipython_notebook {
+    padding-left: 16px;
 }
 
-span#ipython_notebook img {
+#ipython_notebook img {
     font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     height: 24px;
     text-decoration:none;
-    display: inline;
     color: black;
 }
 
@@ -46,15 +38,6 b' span#ipython_notebook img {'
     display: none;
 }
 
-/* We set the fonts by hand here to override the values in the theme */
-.ui-widget {
-    font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-}
-
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
-    font-family: "Lucinda Grande", "Lucinda Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-}
-
 /* Smaller buttons */
 .ui-button .ui-button-text {
     padding: 0.2em 0.8em;
@@ -64,7 +47,27 b' span#ipython_notebook img {'
 input.ui-button {
     padding: 0.3em 0.9em;
 }
+.navbar span {
+  margin-top: 3px;
+}
 
 span#login_widget {
     float: right;
 }
+
+.nav-header {
+    text-transform: none;
+}
+
+.navbar-nobg {
+    background-color: transparent;
+    background-image: none;
+}
+
+#header > span {
+  margin-top: 10px;
+}
+
+.modal-body {
+  max-height: 500px;
+}

IPython/frontend/html/notebook/static/base/less/style.less

@@ -2,3 +2,5 b''
 @import "../base/less/mixins.less";
 @import "../base/less/flexbox.less";
 @import "../base/less/page.less";
+@import "../components/font-awesome/build/assets/font-awesome/less/font-awesome.less";
+@FontAwesomePath:    "../components/font-awesome/build/assets/font-awesome/font";

IPython/frontend/html/notebook/static/base/less/variables.less

@@ -2,9 +2,10 b''
 
 @textColor:             @black;
 @baseFontSize:          13px;
-@baseLineHeight:        1.231;
 @monoFontFamily:		monospace;  // to allow user to customize their fonts
+@navbarHeight:          36px;
 
 // Our own global variables for all pages go here
 
 @corner_radius:					4px;
+@code_line_height:      1.231em;

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

@@ -3,7 +3,6 b' This is only required when different pages style the same element differently. T'
 a hack to deal with our current css styles and no new styling should be added in this file.*/
 
 #ipython-main-app {
-    width: 100%;
     position: relative;
     font-size: 110%;
 }
  No newline at end of file

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

@@ -47,40 +47,36 b''
             lineNumbers: true,
             matchBrackets: true,
         });
-        $(dialogform).dialog({
-                autoOpen: true,
-                height: 300,
-                width: 650,
-                modal: true,
+        IPython.dialog.modal({
+            title: "Edit Cell Metadata",
+            body: dialogform,
                 buttons: {
-                    "Ok": function() {
+                    "OK": { class : "btn-primary",
+                        click: function() {
                         //validate json and set it
                         try {
                            var json = JSON.parse(editor.getValue());
                            cell.metadata = json;
-                           $( this ).dialog( "close" );
-                        }
-                        catch(e)
-                        {
+                        } catch(e) {
                            error_div.text('Warning, invalid json, not saved');
+                           return false;
                         }
-                    },
-                    Cancel: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                close: function() {
-                    //cleanup on close
-                    $(this).remove();
+                    }},
+                    Cancel: {}
                 }
         });
         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;})
+        var button_container = div;
+        var button = $('<button/>')
+            .addClass("btn btn-mini")
+            .text("Raw Edit")
+            .click( function () {
+                raw_edit(cell);
+                return false;
+            });
         button_container.append(button);
     }
 

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

@@ -67,6 +67,7 b' var IPython = (function (IPython) {'
         this.input_prompt_number = null;
         this.collapsed = false;
         this.default_mode = 'ipython';
+        this.cell_type = "code";
 
 
         var cm_overwrite_options  = {

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

@@ -47,11 +47,11 b' var IPython = (function (IPython) {'
 
         var pager_height = IPython.pager.percentage_height*app_height;
         var pager_splitter_height = $('div#pager_splitter').outerHeight(true);
-        $('div#pager').height(pager_height);
+        $('div#pager').outerHeight(pager_height);
         if (IPython.pager.expanded) {
-            $('div#notebook').height(app_height-pager_height-pager_splitter_height);
+            $('div#notebook').outerHeight(app_height-pager_height-pager_splitter_height);
         } else {
-            $('div#notebook').height(app_height-pager_splitter_height);
+            $('div#notebook').outerHeight(app_height-pager_splitter_height);
         }
     };
 

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

@@ -46,8 +46,6 b' function (marked) {'
     IPython.read_only = $('body').data('readOnly') === 'True';
     $('#ipython-main-app').addClass('border-box-sizing');
     $('div#notebook_panel').addClass('border-box-sizing');
-    // The header's bottom border is provided by the menu bar so we remove it.
-    $('div#header').css('border-bottom-style','none');
 
     var baseProjectUrl = $('body').data('baseProjectUrl')
 
@@ -59,7 +57,7 b' function (marked) {'
     IPython.notebook = new IPython.Notebook('div#notebook',{baseProjectUrl:baseProjectUrl, read_only:IPython.read_only});
     IPython.save_widget = new IPython.SaveWidget('span#save_widget');
     IPython.menubar = new IPython.MenuBar('#menubar',{baseProjectUrl:baseProjectUrl})
-    IPython.toolbar = new IPython.MainToolBar('#maintoolbar')
+    IPython.toolbar = new IPython.MainToolBar('#maintoolbar-container')
     IPython.tooltip = new IPython.Tooltip()
     IPython.notification_area = new IPython.NotificationArea('#notification_area')
     IPython.notification_area.init_notification_widgets();

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

@@ -26,7 +26,7 b' 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 b' 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 b' 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 b' 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 b' 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 b' var IPython = (function (IPython) {'
                 {
                     id : 'move_down_b',
                     label : 'Move Cell Down',
-                    icon : 'ui-icon-arrowthick-1-s',
+                    icon : 'icon-arrow-down',
                     callback : function () {
                         IPython.notebook.move_cell_down();
                         }
@@ -82,7 +82,7 b' 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 b' 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 b' 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 b' 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 b' 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 b' 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/mathjaxutils.js

@@ -31,9 +31,9 b' IPython.mathjaxutils = (function (IPython) {'
             MathJax.Hub.Configured();
         } else if (window.mathjax_url != "") {
             // Don't have MathJax, but should. Show dialog.
-            var dialog = $('<div></div>')
+            var message = $('<div/>')
                 .append(
-                    $("<p></p>").addClass('dialog').html(
+                    $("<p/></p>").addClass('dialog').html(
                         "Math/LaTeX rendering will be disabled."
                     )
                 ).append(
@@ -69,11 +69,14 b' IPython.mathjaxutils = (function (IPython) {'
                     $("<p></p>").addClass('dialog').html(
                         "which will prevent this dialog from appearing."
                     )
-                ).dialog({
+                )
+            IPython.dialog.modal({
                     title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
-                    width: "70%",
-                    modal: true,
-                })
+                body : message,
+                buttons : {
+                    OK : {class: "btn-danger"}
+                }
+            });
         } else {
             // No MathJax, but none expected. No dialog.
         };

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

@@ -52,15 +52,13 b' var IPython = (function (IPython) {'
 
     MenuBar.prototype.style = function () {
         this.element.addClass('border-box-sizing');
-        $('ul#menus').menubar({
-            select : function (event, ui) {
+        this.element.find("li").click(function (event, ui) {
                 // The selected cell loses focus when the menu is entered, so we
                 // re-select it upon selection.
                 var i = IPython.notebook.get_selected_index();
                 IPython.notebook.select(i);
             }
-        });
-        this.element.find("#restore_checkpoint").find("ul").find("li").hide();
+        );
     };
 
 
@@ -143,7 +141,8 b' var IPython = (function (IPython) {'
             IPython.layout_manager.do_resize();
         });
         this.element.find('#toggle_toolbar').click(function () {
-            IPython.toolbar.toggle();
+            $('div#maintoolbar').toggle();
+            IPython.layout_manager.do_resize();
         });
         // Insert
         this.element.find('#insert_cell_above').click(function () {

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

@@ -88,13 +88,15 b' var IPython = (function (IPython) {'
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         var that = this;
-        var end_space = $('<div/>').addClass('end_space').height("30%");
+        this.container = $("<div/>").addClass("container").attr("id", "notebook-container");
+        var end_space = $('<div/>').addClass('end_space');
         end_space.dblclick(function (e) {
             if (that.read_only) return;
             var ncells = that.ncells();
             that.insert_cell_below('code',ncells-1);
         });
-        this.element.append(end_space);
+        this.element.append(this.container);
+        this.container.append(end_space);
         $('div#notebook').addClass('border-box-sizing');
     };
 
@@ -414,7 +416,7 b' var IPython = (function (IPython) {'
      * @return {jQuery} A selector of all cell elements
      */
     Notebook.prototype.get_cell_elements = function () {
-        return this.element.children("div.cell");
+        return this.container.children("div.cell");
     };
 
     /**
@@ -1341,21 +1343,18 b' var IPython = (function (IPython) {'
      */
     Notebook.prototype.restart_kernel = function () {
         var that = this;
-        var dialog = $('<div/>');
-        dialog.html('Do you want to restart the current kernel?  You will lose all variables defined in it.');
-        $(document).append(dialog);
-        dialog.dialog({
-            resizable: false,
-            modal: true,
+        IPython.dialog.modal({
             title: "Restart kernel or continue running?",
-            closeText: '',
+            body : $("<p/>").html(
+                'Do you want to restart the current kernel?  You will lose all variables defined in it.'
+            ),
             buttons : {
-                "Restart": function () {
+                "Continue running" : {},
+                "Restart" : {
+                    "class" : "btn-danger",
+                    "click" : function() {
                     that.kernel.restart();
-                    $(this).dialog('close');
-                },
-                "Continue running": function () {
-                    $(this).dialog('close');
+                    }
                 }
             }
         });
@@ -1526,24 +1525,16 b' var IPython = (function (IPython) {'
             };
         };
         if (data.worksheets.length > 1) {
-            var dialog = $('<div/>');
-            dialog.html("This notebook has " + data.worksheets.length + " worksheets, " +
-            "but this version of IPython can only handle the first.  " +
-            "If you save this notebook, worksheets after the first will be lost."
-            );
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            IPython.dialog.modal({
                 title: "Multiple worksheets",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : "This notebook has " + data.worksheets.length + " worksheets, " +
+                    "but this version of IPython can only handle the first.  " +
+                    "If you save this notebook, worksheets after the first will be lost.",
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-danger"
+                    }
                     }
-                },
-                width: 400
             });
         }
     };
@@ -1722,27 +1713,20 b' var IPython = (function (IPython) {'
         this.select(0);
         this.scroll_to_top();
         if (data.orig_nbformat !== undefined && data.nbformat !== data.orig_nbformat) {
-            msg = "This notebook has been converted from an older " +
+            var msg = "This notebook has been converted from an older " +
             "notebook format (v"+data.orig_nbformat+") to the current notebook " +
             "format (v"+data.nbformat+"). The next time you save this notebook, the " +
-            "newer notebook format will be used and older verions of IPython " +
+            "newer notebook format will be used and older versions of IPython " +
             "may not be able to read it. To keep the older version, close the " +
             "notebook without saving it.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            IPython.dialog.modal({
                 title: "Notebook converted",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-primary"
+                    }
                     }
-                },
-                width: 400
             });
         } else if (data.orig_nbformat_minor !== undefined && data.nbformat_minor !== data.orig_nbformat_minor) {
             var that = this;
@@ -1752,21 +1736,14 b' var IPython = (function (IPython) {'
             this_vs + ".  You can still work with this notebook, but some features " +
             "introduced in later notebook versions may not be available."
 
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            IPython.dialog.modal({
                 title: "Newer Notebook",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-danger"
+                    }
                     }
-                },
-                width: 400
             });
 
         }
@@ -1795,21 +1772,13 b' var IPython = (function (IPython) {'
             "this notebook is in a newer format than is supported by this " +
             "version of IPython. This version can load notebook formats " +
             "v"+this.nbformat+" or earlier.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            this.element.append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            
+            IPython.dialog.modal({
                 title: "Error loading notebook",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    "OK": {}
                     }
-                },
-                width: 400
             });
         }
     }
@@ -1917,7 +1886,7 b' var IPython = (function (IPython) {'
             console.log("restore dialog, but no checkpoint to restore to!");
             return;
         }
-        var dialog = $('<div/>').append(
+        var body = $('<div/>').append(
             $('<p/>').addClass("p-space").text(
                 "Are you sure you want to revert the notebook to " +
                 "the latest checkpoint?"
@@ -1934,23 +1903,18 b' var IPython = (function (IPython) {'
             ).css("text-align", "center")
         );
         
-        $(document).append(dialog);
-        
-        dialog.dialog({
-            resizable: false,
-            modal: true,
+        IPython.dialog.modal({
             title: "Revert notebook to checkpoint",
-            closeText: '',
+            body : body,
             buttons : {
-                "Revert": function () {
+                Revert : {
+                    class : "btn-danger",
+                    click : function () {
                     that.restore_checkpoint(checkpoint.checkpoint_id);
-                    $(this).dialog('close');
-                },
-                "Cancel": function () {
-                    $(this).dialog('close');
                 }
             },
-            width: 400
+                Cancel : {}
+                }
         });
     }
     

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

@@ -92,28 +92,24 b' var IPython = (function (IPython) {'
         });
 
         $([IPython.events]).on('status_dead.Kernel',function () {
-            var dialog = $('<div/>');
-            dialog.html('The kernel has died, and the automatic restart has failed.' +
+            var msg = 'The kernel has died, and the automatic restart has failed.' +
                 ' It is possible the kernel cannot be restarted.' +
                 ' If you are not able to restart the kernel, you will still be able to save' +
                 ' the notebook, but running code will no longer work until the notebook' +
-                ' is reopened.'
-            );
-            $(document).append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+                ' is reopened.';
+
+            IPython.dialog.modal({
                 title: "Dead kernel",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body : msg,
                 buttons : {
-                    "Manual Restart": function () {
+                    "Manual Restart": {
+                        class: "btn-danger",
+                        click: function () {
                         $([IPython.events]).trigger('status_restarting.Kernel');
                         IPython.notebook.start_kernel();
-                        $(this).dialog('close');
-                    },
-                    "Don't restart": function () {
-                        $(this).dialog('close');
                     }
+                    },
+                    "Don't restart": {}
                 }
             });
         });
@@ -134,25 +130,18 b' var IPython = (function (IPython) {'
             msg = "A WebSocket connection to could not be established." +
                 " You will NOT be able to run code. Check your" +
                 " network connection or notebook server configuration.";
-            var dialog = $('<div/>');
-            dialog.html(msg);
-            $(document).append(dialog);
-            dialog.dialog({
-                resizable: false,
-                modal: true,
+            IPython.dialog.modal({
                 title: "WebSocket connection failed",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+                body: msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
-                    },
-                    "Reconnect": function () {
+                    "OK": {},
+                    "Reconnect": {
+                        click: function () {
                         knw.set_message('Reconnecting WebSockets', 1000);
                         setTimeout(function () {
                             kernel.start_channels();
                         }, 5000);
-                        $(this).dialog('close');
+                        }
                     }
                 }
             });

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

@@ -30,7 +30,7 b' var IPython = (function (IPython) {'
 
 
     NotificationWidget.prototype.style = function () {
-        this.element.addClass('notification_widget ui-widget ui-widget-content ui-corner-all');
+        this.element.addClass('notification_widget pull-right');
         this.element.addClass('border-box-sizing');
     };
 

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

@@ -59,8 +59,7 b' var IPython = (function (IPython) {'
         this.wrapper.addClass('output_wrapper');
         this.element.addClass('output vbox');
         
-        this.collapse_button.button();
-        this.collapse_button.addClass('output_collapsed vbox');
+        this.collapse_button.addClass("btn output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.html('. . .');
         
@@ -112,11 +111,6 b' var IPython = (function (IPython) {'
         this.collapse_button.click(function () {
             that.expand();
         });
-        this.collapse_button.hover(function () {
-            $(this).addClass("ui-state-hover");
-        }, function () {
-            $(this).removeClass("ui-state-hover");
-        });
     };
 
 
@@ -552,7 +546,7 b' var IPython = (function (IPython) {'
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', 'text')
-                .attr("size", 80)
+                .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
@@ -564,13 +558,15 b' var IPython = (function (IPython) {'
             )
         );
         this.element.append(area);
-        area.find("input.raw_input").focus();
+        // weirdly need double-focus now,
+        // otherwise only the cell will be focused
+        area.find("input.raw_input").focus().focus();
     }
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input");
         var theprompt = container.find("span.input_prompt");
         var theinput = container.find("input.raw_input");
-        var value = theinput.attr("value");
+        var value = theinput.val();
         var content = {
             output_type : 'stream',
             name : 'stdout',

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

@@ -25,7 +25,7 b' var IPython = (function (IPython) {'
                         helper: null ,
                         drag: function(event, ui) {
                             // recalculate the amount of space the pager should take
-                            var pheight = ($(body).height()-event.clientY-4);
+                            var pheight = ($(document.body).height()-event.clientY-4);
                             var downprct = pheight/IPython.layout_manager.app_height();
                                 downprct = Math.min(0.9, downprct);
                             if (downprct < 0.1) {
@@ -70,7 +70,8 b' var IPython = (function (IPython) {'
 
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
-        this.pager_element.addClass('border-box-sizing ui-widget');
+        this.pager_element.addClass('border-box-sizing');
+        this.pager_element.find(".container").addClass('border-box-sizing');
         this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area, drag to Resize');
     };
 
@@ -137,7 +138,7 b' var IPython = (function (IPython) {'
 
 
     Pager.prototype.clear = function (text) {
-        this.pager_element.empty();
+        this.pager_element.find(".container").empty();
     };
 
     Pager.prototype.detach = function(){
@@ -162,7 +163,7 b' var IPython = (function (IPython) {'
     }
 
     Pager.prototype.append_text = function (text) {
-        this.pager_element.append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
+        this.pager_element.find(".container").append($('<pre/>').html(utils.fixCarriageReturn(utils.fixConsole(text))));
     };
 
 

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

@@ -19,12 +19,10 b' var IPython = (function (IPython) {'
         var that = this;
         if ( this.shortcut_dialog ){
             // if dialog is already shown, close it
-            this.shortcut_dialog.dialog("close");
-            this.shortcut_dialog = null;
+            $(this.shortcut_dialog).modal("toggle");
             return;
         }
-        var dialog = $('<div/>');
-        this.shortcut_dialog = dialog;
+        var body = $('<div/>');
         var shortcuts = [
             {key: 'Shift-Enter', help: 'run cell'},
             {key: 'Ctrl-Enter', help: 'run cell in-place'},
@@ -53,16 +51,19 b' var IPython = (function (IPython) {'
             {key: 'Ctrl-m h', help: 'show keyboard shortcuts'}
         ];
         for (var i=0; i<shortcuts.length; i++) {
-            dialog.append($('<div>').
+            body.append($('<div>').
                 append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key)).
                 append($('<span/>').addClass('shortcut_descr').html(' : ' + shortcuts[i].help))
             );
         };
-        dialog.bind('dialogclose', function(event) {
-            // dialog has been closed, allow it to be drawn again.
-            that.shortcut_dialog = null;
+        this.shortcut_dialog = IPython.dialog.modal({
+            title : "Keyboard shortcuts",
+            body : body,
+            destroy : false,
+            buttons : {
+                Close : {}
+            }
         });
-        dialog.dialog({title: 'Keyboard shortcuts', closeText: ''});
     };
 
     // Set module variables

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

@@ -24,12 +24,6 b' var IPython = (function (IPython) {'
 
 
     SaveWidget.prototype.style = function () {
-        this.element.find('span#save_widget').addClass('ui-widget');
-        this.element.find('span#notebook_name').addClass('ui-widget');
-        this.element.find('span#autosave_status').addClass('ui-widget')
-            .css({border: 'none'});
-        this.element.find('span#checkpoint_status').addClass('ui-widget')
-            .css({border: 'none', 'margin-left': '20px'});
     };
 
 
@@ -69,28 +63,26 b' var IPython = (function (IPython) {'
 
     SaveWidget.prototype.rename_notebook = function () {
         var that = this;
-        var dialog = $('<div/>');
-        dialog.append(
-            $('<p/>').html('Enter a new notebook name:')
-            .css({'margin-bottom': '10px'})
-        );
-        dialog.append(
+        var dialog = $('<div/>').append(
+            $("<p/>").addClass("rename-message")
+                .html('Enter a new notebook name:')
+        ).append(
+            $("<br/>")
+        ).append(
             $('<input/>').attr('type','text').attr('size','25')
-            .addClass('ui-widget ui-widget-content')
-            .attr('value',IPython.notebook.get_notebook_name())
+            .val(IPython.notebook.get_notebook_name())
         );
-        // $(document).append(dialog);
-        dialog.dialog({
-            resizable: false,
-            modal: true,
+        IPython.dialog.modal({
             title: "Rename Notebook",
-            closeText: "",
-            close: function(event, ui) {$(this).dialog('destroy').remove();},
+            body: dialog,
             buttons : {
-                "OK": function () {
-                    var new_name = $(this).find('input').attr('value');
+                "Cancel": {},
+                "OK": {
+                    class: "btn-primary",
+                    click: function () {
+                    var new_name = $(this).find('input').val();
                     if (!IPython.notebook.test_notebook_name(new_name)) {
-                        $(this).find('h3').html(
+                        $(this).find('.rename-message').html(
                             "Invalid notebook name. Notebook names must "+
                             "have 1 or more characters and can contain any characters " +
                             "except :/\\. Please enter a new notebook name:"
@@ -98,21 +90,18 b' var IPython = (function (IPython) {'
                     } else {
                         IPython.notebook.set_notebook_name(new_name);
                         IPython.notebook.save_notebook();
-                        $(this).dialog('close');
-                    }
-                },
-                "Cancel": function () {
-                    $(this).dialog('close');
                 }
+                }}
             },
             open : function (event, ui) {
                 var that = $(this);
                 // Upon ENTER, click the OK button.
                 that.find('input[type="text"]').keydown(function (event, ui) {
                     if (event.which === utils.keycodes.ENTER) {
-                        that.parent().find('button').first().click();
+                        that.find('.btn-primary').first().click();
                     }
                 });
+                that.find('input[type="text"]').focus();
             }
         });
     }

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

@@ -39,13 +39,13 b' 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 b' 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/cell.less

@@ -12,7 +12,7 b' 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;
+    margin: 2px 0px 2px 7px;
     outline: none;
 }
 
@@ -25,5 +25,5 b' div.prompt {'
     font-family: @monoFontFamily;
     text-align: right;
     /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: @baseLineHeight;
+    line-height: @code_line_height;
 }

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

@@ -9,7 +9,7 b''
     border-top-left-radius: 3px;
     width:100%;
     -webkit-box-pack: end;
-    height:20px;
+    height:22px;
 }
 
 

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

@@ -25,11 +25,9 b' div.input_prompt {'
 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;
+    .vbox()
 }
 
 /* class for the output area when it should be height-limited */
@@ -46,12 +44,14 b' div.output_scroll {'
 
 /* output div while it is collapsed */
 div.output_collapsed {
-  margin-right: 5px;
+  margin: 0px;
+  padding: 0px;
+  .vbox();
 }
 
 div.out_prompt_overlay {
   height: 100%;
-  padding: 0px;
+  padding: 0px 0.4em;
   position: absolute;
   .corner-all;
 }
@@ -64,6 +64,4 b' div.out_prompt_overlay:hover {'
 
 div.output_prompt {
     color: darkred;
-    /* 5px right shift to account for margin in parent container */
-    margin: 0 5px 0 -5px;
 }

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

@@ -10,7 +10,7 b''
  */
 
 .CodeMirror {
-    line-height: @baseLineHeight;  /* Changed from 1em to our global default */
+    line-height: @code_line_height;  /* Changed from 1em to our global default */
 	height: auto;     /* Changed to auto to autogrow */
 	background: none;  /* Changed from white to allow our bg to show through */
 }

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

@@ -1,25 +1,20 b''
-.ui-menubar-item .ui-button .ui-button-text {
-    padding: 0.4em 1.0em;
-    font-size: 100%;
+#menubar {
 }
 
-.ui-menu {
-	.box-shadow(0px 6px 10px -1px #adadad);
+#menubar .navbar-inner {
+  min-height: 28px;
+  border-top: 1px;
+  border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
 }
 
-.ui-menu .ui-menu-item a {
-    border: 1px solid transparent;
-    padding: 2px 1.6em;
+#menubar .navbar {
+  margin-bottom: 8px;
 }
 
-.ui-menu .ui-menu-item a.ui-state-focus {
-    margin: 0;
+.nav-wrapper {
+  border-bottom: 1px solid @navbarBorder;
 }
 
-.ui-menu hr {
-    margin: 0.3em 0;
-}
-
-#menubar_container {
-    position: relative;
+#menubar li.dropdown {
+  line-height: 12px;
 }
  No newline at end of file

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

@@ -18,8 +18,8 b' span#notebook_name {'
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
+    .box-shadow(0 -1px 10px rgba(0,0,0,.1));
 }
-
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
@@ -27,6 +27,7 b' div#notebook {'
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
+    border-top: 1px solid @border_color;
 }
 
 div.ui-widget-content {
@@ -59,3 +60,6 b' p {'
 	margin-bottom:0;
 }
 
+.end_space {
+  height: 200px;
+}

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

@@ -1,9 +1,3 b''
 #notification_area {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    height: 25px;
-    padding: 3px 0px;
-    padding-right: 3px;
     z-index: 10;
 }

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

@@ -1,8 +1,10 b''
 .notification_widget{
-    float : right;
-    right: 0px;
-    top: 1px;
-    height: 25px;
-    padding: 3px 6px;
+    color: @navbarLinkColor;
+    padding: 1px 12px;
+    margin: 2px 4px;
     z-index: 10;
+    border: 1px solid #ccc;
+    border-radius: @corner_radius;
+    background: rgba(240, 240, 240, 0.5);
+    
 }

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

@@ -25,6 +25,7 b' div.output_area pre {'
    the prompt div. */
 div.output_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
+    margin-left: 6px;
     .box-flex1();
 }
 
@@ -37,7 +38,7 b' div.output_text {'
     color: @textColor;
     font-family: @monoFontFamily;
     /* This has to match that of the the CodeMirror class line-height below */	
-    line-height: @baseLineHeight;
+    line-height: @code_line_height;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */

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

@@ -2,18 +2,18 b' div#pager_splitter {'
     height: 8px;
 }
 
-#pager_container {
+#pager-container {
     position : relative;
+    padding: 15px 0px;
 }
 
 div#pager {
-    padding: 15px;
     overflow: auto;
     display: none;
 	
 	pre {
 		font-size:			@baseFontSize;
-		line-height: 		@baseLineHeight;
+      line-height: @code_line_height;
 		color: 				@textColor;
 		background-color: 	@cell_background;
 		padding:			0.4em;

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

@@ -1,9 +1,34 b''
 span#save_widget {
-    padding: 5px;
-    margin: 0px 0px 0px 300px;
-    display:inline-block;
+    padding: 0px 5px;
+    margin-top: 12px;
 }
 
-span#checkpoint_status span#autosave_status {
+span#checkpoint_status, span#autosave_status {
     font-size: small;
 }
+
+@media (max-width: 767px) {
+    span#save_widget {
+        font-size: small;
+    }
+    span#checkpoint_status, span#autosave_status {
+        font-size: x-small;
+    }
+}
+
+@media (max-width: 767px) {
+    span#checkpoint_status, span#autosave_status {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+    span#checkpoint_status {
+        display: none;
+    }
+    span#autosave_status {
+        font-size: x-small;
+    }
+}
+
+  
  No newline at end of file

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

@@ -1,26 +1,34 b''
 .toolbar {
-    padding: 3px 15px;
-    border-bottom: @border_width @border_color solid;
-
-    button {
-        margin-top:2px;
-        margin-bottom:2px;
-    }
-
+    padding: 0px 10px;
+    margin-top: -5px;
 
     select, label {
-        height : 19px;
+        width: auto;
+        height: @baseLineHeight + 6px;
         vertical-align:middle;
         margin-right:2px;
-        margin-bottom:0;
+        margin-bottom:0px;
         display: inline;
         font-size: 92%;
         margin-left:0.3em;
         margin-right:0.3em;
         padding: 0px;
+        padding-top: 3px;
+    }
+    .btn {
+        padding: 2px 8px;
     }
 }
 
-.toolbar select{
-    width:auto;
+.toolbar .btn-group {
+  margin-top: 0px;
+}
+
+.toolbar-inner {
+  border: none !important;
+  .box-shadow(none) !important;
+}
+
+#maintoolbar {
+  margin-bottom: 0px;
 }
  No newline at end of file

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

@@ -1,5 +1,6 b''
 // Bootstrap
 @import "../components/bootstrap/less/bootstrap.less";
+@import "../components/bootstrap/less/responsive.less";
 
 // base
 @import "../base/less/style.less";