Improved notebook renaming.

There is not a rename dialog that is available in the File menu and
when you click on the notebook name.

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

@@ -18,23 +18,25 b' body {'
 }
 
 span#save_widget {
-    padding: 2px 0px;
+    padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
+span#notebook_name {
+    height: 1em;
+    line-height: 1em;
+    padding: 3px;
+    border: none;
+    font-size: 146.5%;
+}
+
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
-input#notebook_name {
-    height: 1em;
-    line-height: 1em;
-    padding: 5px;
-}
-
 span#kernel_status {
     position: absolute;
     padding: 8px 5px 5px 5px;
@@ -245,7 +247,7 b' div.text_cell_render {'
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
-.completions , .tooltip{
+.completions , .tooltip {
     position: absolute;
     z-index: 10;
     overflow: auto;

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

@@ -52,6 +52,9 b' var IPython = (function (IPython) {'
         this.element.find('#open_notebook').click(function () {
             window.open($('body').data('baseProjectUrl'));
         });
+        this.element.find('#rename_notebook').click(function () {
+            IPython.save_widget.rename_notebook();
+        });
         this.element.find('#save_notebook').click(function () {
             IPython.save_widget.save_notebook();
         });

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

@@ -26,20 +26,20 b' var IPython = (function (IPython) {'
 
 
     SaveWidget.prototype.style = function () {
-        this.element.find('input#notebook_name').addClass('ui-widget ui-widget-content');
-        this.element.find('input#notebook_name').attr('tabindex','1');
-        this.element.find('button#save_notebook').button();
-        this.element.find('button#save_notebook').attr('title', 'Save the Notebook');
+        this.element.find('span#save_widget').addClass('ui-widget');
+        this.element.find('span#notebook_name').addClass('ui-widget ui-widget-content');
     };
 
 
     SaveWidget.prototype.bind_events = function () {
         var that = this;
-        this.element.find('button#save_notebook').click(function () {
-            that.save_notebook();
+        this.element.find('span#notebook_name').click(function () {
+            that.rename_notebook();
         });
-        this.element.find('input#notebook_name').keyup(function () {
-            that.is_renaming();
+        this.element.find('span#notebook_name').hover(function () {
+            $(this).addClass("ui-state-hover");
+        }, function () {
+            $(this).removeClass("ui-state-hover");
         });
     };
 
@@ -49,28 +49,59 b' var IPython = (function (IPython) {'
     };
 
 
+    SaveWidget.prototype.rename_notebook = function () {
+        var that = this;
+        var dialog = $('<div/>');
+        dialog.append(
+            $('<h3/>').html('Enter a new notebook name:')
+            .css({'margin-bottom': '10px'})
+        );
+        dialog.append(
+            $('<input/>').attr('type','text')
+            .attr('value',this.get_notebook_name()).wijtextbox()
+        );
+        $(document).append(dialog);
+        dialog.dialog({
+            resizable: false,
+            modal: true,
+            title: "Rename Notebook",
+            closeText: "",
+            buttons : {
+                "OK": function () {
+                    var new_name = $(this).find('input').attr('value');
+                    if (!that.test_notebook_name(new_name)) {
+                        $(this).find('h3').html(
+                            "Invalid notebook name. " +
+                            "Notebook names can contain any characters " +
+                            "except / and \\. Please enter a new notebook name:"
+                        );
+                    } else {
+                        that.set_notebook_name(new_name);
+                        that.save_notebook();
+                        $(this).dialog('close');
+                    }
+                },
+                "Cancel": function () {
+                    $(this).dialog('close');
+                }
+            }
+        });
+    }
+
+
     SaveWidget.prototype.notebook_saved = function () {
         this.set_document_title();
         this.last_saved_name = this.get_notebook_name();
     };
 
 
-    SaveWidget.prototype.is_renaming = function () {
-        if (this.get_notebook_name() !== this.last_saved_name) {
-            this.status_rename();
-        } else {
-            this.status_save();
-        };
-    };
-
-
     SaveWidget.prototype.get_notebook_name = function () {
-        return this.element.find('input#notebook_name').attr('value');
+        return this.element.find('span#notebook_name').html();
     };
 
 
     SaveWidget.prototype.set_notebook_name = function (nbname) {
-        this.element.find('input#notebook_name').attr('value',nbname);
+        this.element.find('span#notebook_name').html(nbname);
         this.set_document_title();
         this.last_saved_name = nbname;
     };
@@ -95,18 +126,10 b' var IPython = (function (IPython) {'
     };
 
 
-    SaveWidget.prototype.test_notebook_name = function () {
-        var nbname = this.get_notebook_name();
+    SaveWidget.prototype.test_notebook_name = function (nbname) {
         if (this.notebook_name_blacklist_re.test(nbname) == false) {
             return true;
         } else {
-            var bad_name = $('<div/>');
-            bad_name.html(
-                "The notebook name you entered (" +
-                nbname +
-                ") is not valid. Notebook names can contain any characters except / and \\."
-            );
-            bad_name.dialog({title: 'Invalid name', modal: true});
             return false;
         };
     };
@@ -118,26 +141,18 b' var IPython = (function (IPython) {'
 
 
     SaveWidget.prototype.status_save = function () {
-        this.element.find('button#save_notebook').button('option', 'label', '<u>S</u>ave');
-        this.element.find('button#save_notebook').button('enable');
     };
 
 
     SaveWidget.prototype.status_saving = function () {
-        this.element.find('button#save_notebook').button('option', 'label', 'Saving');
-        this.element.find('button#save_notebook').button('disable');
     };
 
 
     SaveWidget.prototype.status_loading = function () {
-        this.element.find('button#save_notebook').button('option', 'label', 'Loading');
-        this.element.find('button#save_notebook').button('disable');
-    };    
+    };
 
 
     SaveWidget.prototype.status_rename = function () {
-        this.element.find('button#save_notebook').button('option', 'label', 'Rename');
-        this.element.find('button#save_notebook').button('enable');
     };
 
 

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

@@ -45,8 +45,7 b''
 <div id="header">
     <span id="ipython_notebook"><h1><a href='..' alt='dashboard'><img src='/static/ipynblogo.png' alt='IPython Notebook'/></a></h1></span>
     <span id="save_widget">
-        <input type="text" id="notebook_name" size="20"></textarea>
-        <button id="save_notebook"><u>S</u>ave</button>
+        <span id="notebook_name"></span>
     </span>
 
     <span id="login_widget">
@@ -67,8 +66,9 b''
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><span class="wijmo-wijmenu-text">New</span></li>
-                <li id="open_notebook"><span class="wijmo-wijmenu-text">Open</span></li>
+                <li id="open_notebook"><span class="wijmo-wijmenu-text">Open...</span></li>
                 <li></li>
+                <li id="rename_notebook"><span class="wijmo-wijmenu-text">Rename...</span></li>
                 <li id="save_notebook">
                     <div>
                         <span class="wijmo-wijmenu-text">Save</span>