[WIP] bootstrapify

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

@@ -13,8 +13,7 @@
 $(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 @@ 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 @@
 $(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,6 @@
-// Custom styles for login.html
+// Custom styles for login.html
+.center-nav {
+  display: inline-block;
+  // pull the lower margin back
+  margin-bottom: -4px;
+}

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

@@ -0,0 +1,75 @@
+//----------------------------------------------------------------------------
+//  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/base/js/page.js

@@ -17,12 +17,8 @@ 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 @@ 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 @@ 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 @@ 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 @@
 @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 @@
 
 @textColor:             @black;
 @baseFontSize:          13px;
-@baseLineHeight:        1.231;
-@monoFontFamily:		monospace;  // to allow user to customize their fonts
+@monoFontFamily:        monospace;  // to allow user to customize their fonts
+@navbarHeight:          36px;
 
 // Our own global variables for all pages go here
 
-@corner_radius:					4px;
+@corner_radius:         4px;
+@code_line_height:      1.231em;

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

@@ -3,7 +3,6 @@ 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%;
 }

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

@@ -47,40 +47,36 @@
             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 @@ 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 @@ 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 @@ 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 @@ 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();