bootstrap dialogs

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

@@ -30,9 +30,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(
@@ -68,11 +68,14 b' IPython.mathjaxutils = (function (IPython) {'
                     $("<p></p>").addClass('dialog').html(
                         "which will prevent this dialog from appearing."
                     )
-                ).dialog({
-                    title: "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
-                    width: "70%",
-                    modal: true,
-                })
+                )
+            IPython.dialog.modal({
+                title : "Failed to retrieve MathJax from '" + window.mathjax_url + "'",
+                body : message,
+                buttons : {
+                    OK : {class: "btn-danger"}
+                }
+            });
         } else {
             // No MathJax, but none expected. No dialog.
         };

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

@@ -1341,21 +1341,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.body).append(dialog);
-        dialog.dialog({
-            resizable: false,
-            modal: true,
-            title: "Restart kernel or continue running?",
-            closeText: '',
+        IPython.dialog.modal({
+            title : "Restart kernel or continue running?",
+            body : $("<p/>").html(
+                'Do you want to restart the current kernel?  You will lose all variables defined in it.'
+            ),
             buttons : {
-                "Restart": function () {
-                    that.kernel.restart();
-                    $(this).dialog('close');
-                },
-                "Continue running": function () {
-                    $(this).dialog('close');
+                "Continue running" : {},
+                "Restart" : {
+                    "class" : "btn-danger",
+                    "click" : function() {
+                        that.kernel.restart();
+                    }
                 }
             }
         });
@@ -1526,24 +1523,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,
-                title: "Multiple worksheets",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Multiple worksheets",
+                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 +1711,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,
-                title: "Notebook converted",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Notebook converted",
+                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 +1734,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,
-                title: "Newer Notebook",
-                closeText: "",
-                close: function(event, ui) {$(this).dialog('destroy').remove();},
+            IPython.dialog.modal({
+                title : "Newer Notebook",
+                body : msg,
                 buttons : {
-                    "OK": function () {
-                        $(this).dialog('close');
+                    OK : {
+                        class : "btn-danger"
                     }
-                },
-                width: 400
+                }
             });
 
         }
@@ -1795,21 +1770,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');
-                    }
-                },
-                width: 400
+                    "OK": {}
+                }
             });
         }
     }
@@ -1917,7 +1884,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 +1901,18 b' var IPython = (function (IPython) {'
             ).css("text-align", "center")
         );
         
-        $(document.body).append(dialog);
-        
-        dialog.dialog({
-            resizable: false,
-            modal: true,
-            title: "Revert notebook to checkpoint",
-            closeText: '',
+        IPython.dialog.modal({
+            title : "Revert notebook to checkpoint",
+            body : body,
             buttons : {
-                "Revert": function () {
-                    that.restore_checkpoint(checkpoint.checkpoint_id);
-                    $(this).dialog('close');
+                Revert : {
+                    class : "btn-danger",
+                    click : function () {
+                        that.restore_checkpoint(checkpoint.checkpoint_id);
+                    }
                 },
-                "Cancel": function () {
-                    $(this).dialog('close');
+                Cancel : {}
                 }
-            },
-            width: 400
         });
     }
     

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.body).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 () {
-                        $([IPython.events]).trigger('status_restarting.Kernel');
-                        IPython.notebook.start_kernel();
-                        $(this).dialog('close');
+                    "Manual Restart": {
+                        class: "btn-danger",
+                        click: function () {
+                            $([IPython.events]).trigger('status_restarting.Kernel');
+                            IPython.notebook.start_kernel();
+                        }
                     },
-                    "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.body).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 () {
-                        knw.set_message('Reconnecting WebSockets', 1000);
-                        setTimeout(function () {
-                            kernel.start_channels();
-                        }, 5000);
-                        $(this).dialog('close');
+                    "OK": {},
+                    "Reconnect": {
+                        click: function () {
+                            knw.set_message('Reconnecting WebSockets', 1000);
+                            setTimeout(function () {
+                                kernel.start_channels();
+                            }, 5000);
+                        }
                     }
                 }
             });

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

@@ -69,28 +69,23 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'})
-        );
+        var dialog = $('<div/>').append($("<p/>").addClass("rename-message")
+        .html('Enter a new notebook name:'));
         dialog.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.body).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 +93,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/templates/notebook.html

@@ -220,6 +220,7 b' class="notebook_app"'
 
 <script src="{{ static_url("base/js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("base/js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("base/js/dialog.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("notebook/js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>