beginning notification area

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

@@ -51,8 +51,17 @@ span#notebook_name {
     position: relative;
 }
 
-#notification {
+#notification_area {
     position: absolute;
+    right: 0px;
+    top: 0px;
+    height: 25px;
+    padding: 3px 6px;
+    z-index: 10;
+}
+
+.notification{
+    float : right;
     right: 3px;
     top: 3px;
     height: 25px;
@@ -60,6 +69,18 @@ span#notebook_name {
     z-index: 10;
 }
 
+.notification.info
+{color : darkblue;}
+
+.notification.safe
+{color : darkgreen;}
+
+.notification.warning
+{color : darkorange;}
+
+.notification.danger
+{ color : darkred }
+
 #toolbar {
     padding: 3px 15px;
 }

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

@@ -0,0 +1,48 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012 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.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// Notification widget
+//============================================================================
+
+var IPython = (function (IPython) {
+    "use strict";
+    var utils = IPython.utils;
+
+
+    var NotificationArea = function (selector) {
+        this.selector = selector;
+        if (this.selector !== undefined) {
+            this.element = $(selector);
+        }
+    };
+
+    NotificationArea.prototype.temp_message = function (msg, timeout, css_class) {
+        var uuid = utils.uuid();
+        var tdiv = $('<div>')
+            .attr('id',uuid)
+            .addClass('notification ui-widget ui-widget-content ui-corner-all')
+            .addClass('border-box-sizing')
+            .addClass(css_class)
+            .hide()
+            .text(msg);
+
+        $(this.selector).append(tdiv);
+        var tmout = Math.max(1000,timeout);
+        tdiv.fadeIn(100);
+
+        setTimeout(function () {
+                tdiv.fadeOut(100, function () {tdiv.remove();});
+            }, timeout)
+    };
+
+    IPython.NotificationArea = NotificationArea;
+
+    return IPython;
+
+}(IPython));
+

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

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

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

@@ -152,7 +152,9 @@ data-notebook-id={{notebook_id}}
     </ul>
 
 </div>
-<div id="notification"></div>
+    <div id="notification_area">
+        <div id="notification"></div>
+    </div>
 </div>
 
 
@@ -242,6 +244,7 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>