Merge pull request #6063 from Carreau/fix-5984

Introduce info/warning/danger to notification area
12 years ago · 925a968840
parent fcb079a255 573c45613d
commit 925a968840
4 changed files with 332 additions and 13 deletions
--- a/IPython/html/static/notebook/js/notificationarea.js
+++ b/IPython/html/static/notebook/js/notificationarea.js
@ -203,7 +203,7 @@ define([
            nnw.set_message("Notebook saved",2000);
        });
        this.events.on('notebook_save_failed.Notebook', function (evt, xhr, status, data) {
-            nnw.set_message(data || "Notebook save failed");
+            nnw.warning(data || "Notebook save failed");
        });
        
        // Checkpoint events
@ -216,19 +216,19 @@ define([
            nnw.set_message(msg, 2000);
        });
        this.events.on('checkpoint_failed.Notebook', function () {
-            nnw.set_message("Checkpoint failed");
+            nnw.warning("Checkpoint failed");
        });
        this.events.on('checkpoint_deleted.Notebook', function () {
            nnw.set_message("Checkpoint deleted", 500);
        });
        this.events.on('checkpoint_delete_failed.Notebook', function () {
-            nnw.set_message("Checkpoint delete failed");
+            nnw.warning("Checkpoint delete failed");
        });
        this.events.on('checkpoint_restoring.Notebook', function () {
            nnw.set_message("Restoring to checkpoint...", 500);
        });
        this.events.on('checkpoint_restore_failed.Notebook', function () {
-            nnw.set_message("Checkpoint restore failed");
+            nnw.warning("Checkpoint restore failed");
        });

        // Autosave events
--- a/IPython/html/static/notebook/js/notificationwidget.js
+++ b/IPython/html/static/notebook/js/notificationwidget.js
@ -15,7 +15,6 @@ define([
            this.element = $(selector);
            this.style();
        }
-        this.element.button();
        this.element.hide();
        var that = this;

@ -25,8 +24,7 @@ define([
    };

    NotificationWidget.prototype.style = function () {
-        this.element.addClass('notification_widget pull-right');
-        this.element.addClass('border-box-sizing');
+        this.element.addClass('notification_widget');
    };

    // msg : message to display
@ -36,13 +34,23 @@ define([
    // click_callback : function called if user click on notification
    // could return false to prevent the notification to be dismissed
    NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) {
-        options = options || {};
-        var callback = click_callback || function() {return false;};
+        var options = options || {};
+        var callback = click_callback || function() {return true;};
        var that = this;
+        // unbind potential previous callback
+        this.element.unbind('click');
        this.inner.attr('class', options.icon);
        this.inner.attr('title', options.title);
        this.inner.text(msg);
        this.element.fadeIn(100);
+
+        // reset previous set style
+        this.element.removeClass();
+        this.style();
+        if (options.class){
+
+            this.element.addClass(options.class)
+        }
        if (this.timeout !== null) {
            clearTimeout(this.timeout);
            this.timeout = null;
@ -66,11 +74,30 @@ define([
        }
    };

+
+    NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) {
+        var options = options || {};
+        options.class = options.class +' info';
+        var timeout = timeout || 3500;
+        this.set_message(msg, timeout, click_callback, options);
+    }
+    NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) {
+        var options = options || {};
+        options.class = options.class +' warning';
+        this.set_message(msg, timeout, click_callback, options);
+    }
+    NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) {
+        var options = options || {};
+        options.class = options.class +' danger';
+        this.set_message(msg, timeout, click_callback, options);
+    }
+
+
    NotificationWidget.prototype.get_message = function () {
        return this.inner.html();
    };

-    // For backwards compatability.
+    // For backwards compatibility.
    IPython.NotificationWidget = NotificationWidget;

    return {'NotificationWidget': NotificationWidget};
--- a/IPython/html/static/notebook/less/notificationwidget.less
+++ b/IPython/html/static/notebook/less/notificationwidget.less
@ -3,11 +3,29 @@
    padding: 1px 12px;
    margin: 2px 4px;
    z-index: 10;
-    border: 1px solid #ccc;
    border-radius: @border-radius-base;
    background: @notification_widget_bg;
+    .pull-right();
+    .border-box-sizing();
+    .btn();
+    .btn-default();
+    .btn-xs();

    &.span {
        padding-right:2px;
    }
 }
+
+.notification_widget.warning {
+    .btn-warning();
+}
+.notification_widget.success {
+    .btn-success();
+}
+.notification_widget.info {
+    .btn-info();
+}
+.notification_widget.danger {
+    .btn-danger();
+}
+
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@ -9588,13 +9588,287 @@ ul#help_menu li a i {
  padding: 1px 12px;
  margin: 2px 4px;
  z-index: 10;
-  border: 1px solid #ccc;
-  border-radius: 4px;
  background: rgba(240, 240, 240, 0.5);
+  float: right !important;
+  float: right;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 12px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #333333;
+  background-color: #ffffff;
+  border-color: #cccccc;
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.notification_widget:focus,
+.notification_widget:active:focus,
+.notification_widget.active:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.notification_widget:hover,
+.notification_widget:focus {
+  color: #333333;
+  text-decoration: none;
+}
+.notification_widget:active,
+.notification_widget.active {
+  outline: 0;
+  background-image: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.notification_widget.disabled,
+.notification_widget[disabled],
+fieldset[disabled] .notification_widget {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.notification_widget [class^="icon-"].icon-large,
+.notification_widget [class*=" icon-"].icon-large {
+  line-height: .9em;
+}
+.notification_widget [class^="icon-"].icon-spin,
+.notification_widget [class*=" icon-"].icon-spin {
+  display: inline-block;
+}
+.notification_widget [class^="icon-"].pull-left.icon-2x,
+.notification_widget [class*=" icon-"].pull-left.icon-2x,
+.notification_widget [class^="icon-"].pull-right.icon-2x,
+.notification_widget [class*=" icon-"].pull-right.icon-2x {
+  margin-top: .18em;
+}
+.notification_widget [class^="icon-"].icon-spin.icon-large,
+.notification_widget [class*=" icon-"].icon-spin.icon-large {
+  line-height: .8em;
+}
+.notification_widget:hover,
+.notification_widget:focus,
+.notification_widget:active,
+.notification_widget.active,
+.open .dropdown-toggle.notification_widget {
+  color: #333333;
+  background-color: #ebebeb;
+  border-color: #adadad;
+}
+.notification_widget:active,
+.notification_widget.active,
+.open .dropdown-toggle.notification_widget {
+  background-image: none;
+}
+.notification_widget.disabled,
+.notification_widget[disabled],
+fieldset[disabled] .notification_widget,
+.notification_widget.disabled:hover,
+.notification_widget[disabled]:hover,
+fieldset[disabled] .notification_widget:hover,
+.notification_widget.disabled:focus,
+.notification_widget[disabled]:focus,
+fieldset[disabled] .notification_widget:focus,
+.notification_widget.disabled:active,
+.notification_widget[disabled]:active,
+fieldset[disabled] .notification_widget:active,
+.notification_widget.disabled.active,
+.notification_widget[disabled].active,
+fieldset[disabled] .notification_widget.active {
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+.notification_widget .badge {
+  color: #ffffff;
+  background-color: #333333;
 }
 .notification_widget.span {
  padding-right: 2px;
 }
+.notification_widget.warning {
+  color: #ffffff;
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+.notification_widget.warning:hover,
+.notification_widget.warning:focus,
+.notification_widget.warning:active,
+.notification_widget.warning.active,
+.open .dropdown-toggle.notification_widget.warning {
+  color: #ffffff;
+  background-color: #ed9c28;
+  border-color: #d58512;
+}
+.notification_widget.warning:active,
+.notification_widget.warning.active,
+.open .dropdown-toggle.notification_widget.warning {
+  background-image: none;
+}
+.notification_widget.warning.disabled,
+.notification_widget.warning[disabled],
+fieldset[disabled] .notification_widget.warning,
+.notification_widget.warning.disabled:hover,
+.notification_widget.warning[disabled]:hover,
+fieldset[disabled] .notification_widget.warning:hover,
+.notification_widget.warning.disabled:focus,
+.notification_widget.warning[disabled]:focus,
+fieldset[disabled] .notification_widget.warning:focus,
+.notification_widget.warning.disabled:active,
+.notification_widget.warning[disabled]:active,
+fieldset[disabled] .notification_widget.warning:active,
+.notification_widget.warning.disabled.active,
+.notification_widget.warning[disabled].active,
+fieldset[disabled] .notification_widget.warning.active {
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+.notification_widget.warning .badge {
+  color: #f0ad4e;
+  background-color: #ffffff;
+}
+.notification_widget.success {
+  color: #ffffff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.notification_widget.success:hover,
+.notification_widget.success:focus,
+.notification_widget.success:active,
+.notification_widget.success.active,
+.open .dropdown-toggle.notification_widget.success {
+  color: #ffffff;
+  background-color: #47a447;
+  border-color: #398439;
+}
+.notification_widget.success:active,
+.notification_widget.success.active,
+.open .dropdown-toggle.notification_widget.success {
+  background-image: none;
+}
+.notification_widget.success.disabled,
+.notification_widget.success[disabled],
+fieldset[disabled] .notification_widget.success,
+.notification_widget.success.disabled:hover,
+.notification_widget.success[disabled]:hover,
+fieldset[disabled] .notification_widget.success:hover,
+.notification_widget.success.disabled:focus,
+.notification_widget.success[disabled]:focus,
+fieldset[disabled] .notification_widget.success:focus,
+.notification_widget.success.disabled:active,
+.notification_widget.success[disabled]:active,
+fieldset[disabled] .notification_widget.success:active,
+.notification_widget.success.disabled.active,
+.notification_widget.success[disabled].active,
+fieldset[disabled] .notification_widget.success.active {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+.notification_widget.success .badge {
+  color: #5cb85c;
+  background-color: #ffffff;
+}
+.notification_widget.info {
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.notification_widget.info:hover,
+.notification_widget.info:focus,
+.notification_widget.info:active,
+.notification_widget.info.active,
+.open .dropdown-toggle.notification_widget.info {
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
+}
+.notification_widget.info:active,
+.notification_widget.info.active,
+.open .dropdown-toggle.notification_widget.info {
+  background-image: none;
+}
+.notification_widget.info.disabled,
+.notification_widget.info[disabled],
+fieldset[disabled] .notification_widget.info,
+.notification_widget.info.disabled:hover,
+.notification_widget.info[disabled]:hover,
+fieldset[disabled] .notification_widget.info:hover,
+.notification_widget.info.disabled:focus,
+.notification_widget.info[disabled]:focus,
+fieldset[disabled] .notification_widget.info:focus,
+.notification_widget.info.disabled:active,
+.notification_widget.info[disabled]:active,
+fieldset[disabled] .notification_widget.info:active,
+.notification_widget.info.disabled.active,
+.notification_widget.info[disabled].active,
+fieldset[disabled] .notification_widget.info.active {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+.notification_widget.info .badge {
+  color: #5bc0de;
+  background-color: #ffffff;
+}
+.notification_widget.danger {
+  color: #ffffff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+.notification_widget.danger:hover,
+.notification_widget.danger:focus,
+.notification_widget.danger:active,
+.notification_widget.danger.active,
+.open .dropdown-toggle.notification_widget.danger {
+  color: #ffffff;
+  background-color: #d2322d;
+  border-color: #ac2925;
+}
+.notification_widget.danger:active,
+.notification_widget.danger.active,
+.open .dropdown-toggle.notification_widget.danger {
+  background-image: none;
+}
+.notification_widget.danger.disabled,
+.notification_widget.danger[disabled],
+fieldset[disabled] .notification_widget.danger,
+.notification_widget.danger.disabled:hover,
+.notification_widget.danger[disabled]:hover,
+fieldset[disabled] .notification_widget.danger:hover,
+.notification_widget.danger.disabled:focus,
+.notification_widget.danger[disabled]:focus,
+fieldset[disabled] .notification_widget.danger:focus,
+.notification_widget.danger.disabled:active,
+.notification_widget.danger[disabled]:active,
+fieldset[disabled] .notification_widget.danger:active,
+.notification_widget.danger.disabled.active,
+.notification_widget.danger[disabled].active,
+fieldset[disabled] .notification_widget.danger.active {
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+.notification_widget.danger .badge {
+  color: #d9534f;
+  background-color: #ffffff;
+}
 div#pager_splitter {
  height: 8px;
 }