Improving the save notification.

* Added last saved with time/date display.
* Reimplemented save widget status updates.

IPython/frontend/html/notebook/static/dateformat/date.format.js

@@ -0,0 +1,125
+/*
+ * Date Format 1.2.3
+ * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
+ * MIT license
+ *
+ * Includes enhancements by Scott Trenda <scott.trenda.net>
+ * and Kris Kowal <cixar.com/~kris.kowal/>
+ *
+ * Accepts a date, a mask, or a date and a mask.
+ * Returns a formatted version of the given date.
+ * The date defaults to the current date/time.
+ * The mask defaults to dateFormat.masks.default.
+ */
+
+var dateFormat = function () {
+    var token = /d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
+        timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
+        timezoneClip = /[^-+\dA-Z]/g,
+        pad = function (val, len) {
+            val = String(val);
+            len = len || 2;
+            while (val.length < len) val = "0" + val;
+            return val;
+        };
+
+    // Regexes and supporting functions are cached through closure
+    return function (date, mask, utc) {
+        var dF = dateFormat;
+
+        // You can't provide utc if you skip other args (use the "UTC:" mask prefix)
+        if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
+            mask = date;
+            date = undefined;
+        }
+
+        // Passing date through Date applies Date.parse, if necessary
+        date = date ? new Date(date) : new Date;
+        if (isNaN(date)) throw SyntaxError("invalid date");
+
+        mask = String(dF.masks[mask] || mask || dF.masks["default"]);
+
+        // Allow setting the utc argument via the mask
+        if (mask.slice(0, 4) == "UTC:") {
+            mask = mask.slice(4);
+            utc = true;
+        }
+
+        var _ = utc ? "getUTC" : "get",
+            d = date[_ + "Date"](),
+            D = date[_ + "Day"](),
+            m = date[_ + "Month"](),
+            y = date[_ + "FullYear"](),
+            H = date[_ + "Hours"](),
+            M = date[_ + "Minutes"](),
+            s = date[_ + "Seconds"](),
+            L = date[_ + "Milliseconds"](),
+            o = utc ? 0 : date.getTimezoneOffset(),
+            flags = {
+                d:    d,
+                dd:   pad(d),
+                ddd:  dF.i18n.dayNames[D],
+                dddd: dF.i18n.dayNames[D + 7],
+                m:    m + 1,
+                mm:   pad(m + 1),
+                mmm:  dF.i18n.monthNames[m],
+                mmmm: dF.i18n.monthNames[m + 12],
+                yy:   String(y).slice(2),
+                yyyy: y,
+                h:    H % 12 || 12,
+                hh:   pad(H % 12 || 12),
+                H:    H,
+                HH:   pad(H),
+                M:    M,
+                MM:   pad(M),
+                s:    s,
+                ss:   pad(s),
+                l:    pad(L, 3),
+                L:    pad(L > 99 ? Math.round(L / 10) : L),
+                t:    H < 12 ? "a"  : "p",
+                tt:   H < 12 ? "am" : "pm",
+                T:    H < 12 ? "A"  : "P",
+                TT:   H < 12 ? "AM" : "PM",
+                Z:    utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip, ""),
+                o:    (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4),
+                S:    ["th", "st", "nd", "rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10]
+            };
+
+        return mask.replace(token, function ($0) {
+            return $0 in flags ? flags[$0] : $0.slice(1, $0.length - 1);
+        });
+    };
+}();
+
+// Some common format strings
+dateFormat.masks = {
+    "default":      "ddd mmm dd yyyy HH:MM:ss",
+    shortDate:      "m/d/yy",
+    mediumDate:     "mmm d, yyyy",
+    longDate:       "mmmm d, yyyy",
+    fullDate:       "dddd, mmmm d, yyyy",
+    shortTime:      "h:MM TT",
+    mediumTime:     "h:MM:ss TT",
+    longTime:       "h:MM:ss TT Z",
+    isoDate:        "yyyy-mm-dd",
+    isoTime:        "HH:MM:ss",
+    isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
+    isoUtcDateTime: "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"
+};
+
+// Internationalization strings
+dateFormat.i18n = {
+    dayNames: [
+        "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
+        "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+    ],
+    monthNames: [
+        "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+        "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
+    ]
+};
+
+// For convenience...
+Date.prototype.format = function (mask, utc) {
+    return dateFormat(this, mask, utc);
+};

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

@@ -973,15 +973,12 var IPython = (function (IPython) {
     Notebook.prototype.notebook_saved = function (data, status, xhr) {
         this.dirty = false;
         IPython.save_widget.notebook_saved();
-        IPython.save_widget.status_save();
+        IPython.save_widget.status_last_saved();
     };
 
 
     Notebook.prototype.notebook_save_failed = function (xhr, status, error_msg) {
-        // Notify the user and reset the save button
-        // TODO: Handle different types of errors (timeout etc.)
-        alert('An unexpected error occured while saving the notebook.');
-        IPython.save_widget.reset_status();
+        IPython.save_widget.status_save_failed();
     };
 
 
@@ -1013,7 +1010,7 var IPython = (function (IPython) {
         if (this.ncells() === 0) {
             this.insert_code_cell_below();
         };
-        IPython.save_widget.status_save();
+        IPython.save_widget.status_last_saved();
         IPython.save_widget.set_notebook_name(data.metadata.name);
         this.dirty = false;
         if (! this.read_only) {

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

@@ -28,6 +28,8 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 ui-widget-content');
+        this.element.find('span#save_status').addClass('ui-widget ui-widget-content')
+            .css({border: 'none', 'margin-left': '20px'});
     };
 
 
@@ -137,24 +139,34 var IPython = (function (IPython) {
     };
 
 
+    SaveWidget.prototype.set_last_saved = function () {
+        var d = new Date();
+        $('#save_status').html('Last saved: '+d.format('mmm dd h:MM TT'));
+        
+    };
+
     SaveWidget.prototype.reset_status = function () {
-        this.is_renaming();
+        this.element.find('span#save_status').html('');
     };
 
 
-    SaveWidget.prototype.status_save = function () {
+    SaveWidget.prototype.status_last_saved = function () {
+        this.set_last_saved();
     };
 
 
     SaveWidget.prototype.status_saving = function () {
+        this.element.find('span#save_status').html('Saving...');
     };
 
 
-    SaveWidget.prototype.status_loading = function () {
+    SaveWidget.prototype.status_save_failed = function () {
+        this.element.find('span#save_status').html('Save failed');
     };
 
 
-    SaveWidget.prototype.status_rename = function () {
+    SaveWidget.prototype.status_loading = function () {
+        this.element.find('span#save_status').html('Loading...');
     };
 
 

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

@@ -45,6 +45,7
     <span id="ipython_notebook"><h1><a href='..' alt='dashboard'><img src='/static/ipynblogo.png' alt='IPython Notebook'/></a></h1></span>
     <span id="save_widget">
         <span id="notebook_name"></span>
+        <span id="save_status"></span>
     </span>
 
     <span id="login_widget">
@@ -159,6 +160,7
 <script src="/static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
 
 <script src="/static/prettify/prettify.js" charset="utf-8"></script>
+<script src="/static/dateformat/date.format.js" charset="utf-8"></script>
 
 <script src="/static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/utils.js" type="text/javascript" charset="utf-8"></script>