##// END OF EJS Templates
Introduce info/warning/danger to notification area...
Matthias BUSSONNIER -
Show More
@@ -203,7 +203,7 define([
203 203 nnw.set_message("Notebook saved",2000);
204 204 });
205 205 this.events.on('notebook_save_failed.Notebook', function (evt, xhr, status, data) {
206 nnw.set_message(data || "Notebook save failed");
206 nnw.warning(data || "Notebook save failed");
207 207 });
208 208
209 209 // Checkpoint events
@@ -216,19 +216,19 define([
216 216 nnw.set_message(msg, 2000);
217 217 });
218 218 this.events.on('checkpoint_failed.Notebook', function () {
219 nnw.set_message("Checkpoint failed");
219 nnw.warning("Checkpoint failed");
220 220 });
221 221 this.events.on('checkpoint_deleted.Notebook', function () {
222 222 nnw.set_message("Checkpoint deleted", 500);
223 223 });
224 224 this.events.on('checkpoint_delete_failed.Notebook', function () {
225 nnw.set_message("Checkpoint delete failed");
225 nnw.warning("Checkpoint delete failed");
226 226 });
227 227 this.events.on('checkpoint_restoring.Notebook', function () {
228 228 nnw.set_message("Restoring to checkpoint...", 500);
229 229 });
230 230 this.events.on('checkpoint_restore_failed.Notebook', function () {
231 nnw.set_message("Checkpoint restore failed");
231 nnw.warning("Checkpoint restore failed");
232 232 });
233 233
234 234 // Autosave events
@@ -15,7 +15,6 define([
15 15 this.element = $(selector);
16 16 this.style();
17 17 }
18 this.element.button();
19 18 this.element.hide();
20 19 var that = this;
21 20
@@ -25,8 +24,7 define([
25 24 };
26 25
27 26 NotificationWidget.prototype.style = function () {
28 this.element.addClass('notification_widget pull-right');
29 this.element.addClass('border-box-sizing');
27 this.element.addClass('notification_widget');
30 28 };
31 29
32 30 // msg : message to display
@@ -36,13 +34,23 define([
36 34 // click_callback : function called if user click on notification
37 35 // could return false to prevent the notification to be dismissed
38 36 NotificationWidget.prototype.set_message = function (msg, timeout, click_callback, options) {
39 options = options || {};
40 var callback = click_callback || function() {return false;};
37 var options = options || {};
38 var callback = click_callback || function() {return true;};
41 39 var that = this;
40 // unbind potential previous callback
41 this.element.unbind('click');
42 42 this.inner.attr('class', options.icon);
43 43 this.inner.attr('title', options.title);
44 44 this.inner.text(msg);
45 45 this.element.fadeIn(100);
46
47 // reset previous set style
48 this.element.removeClass(),
49 this.style();
50 if (options.class){
51
52 this.element.addClass(options.class)
53 }
46 54 if (this.timeout !== null) {
47 55 clearTimeout(this.timeout);
48 56 this.timeout = null;
@@ -66,11 +74,30 define([
66 74 }
67 75 };
68 76
77
78 NotificationWidget.prototype.info = function (msg, timeout, click_callback, options) {
79 var options = options || {};
80 options.class = options.class +' info';
81 var timeout = timeout || 3500;
82 this.set_message(msg, timeout, click_callback, options);
83 }
84 NotificationWidget.prototype.warning = function (msg, timeout, click_callback, options) {
85 var options = options || {};
86 options.class = options.class +' warning';
87 this.set_message(msg, timeout, click_callback, options);
88 }
89 NotificationWidget.prototype.danger = function (msg, timeout, click_callback, options) {
90 var options = options || {};
91 options.class = options.class +' danger';
92 this.set_message(msg, timeout, click_callback, options);
93 }
94
95
69 96 NotificationWidget.prototype.get_message = function () {
70 97 return this.inner.html();
71 98 };
72 99
73 // For backwards compatability.
100 // For backwards compatibility.
74 101 IPython.NotificationWidget = NotificationWidget;
75 102
76 103 return {'NotificationWidget': NotificationWidget};
@@ -3,11 +3,29
3 3 padding: 1px 12px;
4 4 margin: 2px 4px;
5 5 z-index: 10;
6 border: 1px solid #ccc;
7 6 border-radius: @border-radius-base;
8 7 background: @notification_widget_bg;
8 .pull-right();
9 .border-box-sizing();
10 .btn();
11 .btn-default();
12 .btn-xs();
9 13
10 14 &.span {
11 15 padding-right:2px;
12 16 }
13 17 }
18
19 .notification_widget.warning {
20 .btn-warning()
21 }
22 .notification_widget.success {
23 .btn-success()
24 }
25 .notification_widget.info {
26 .btn-info()
27 }
28 .notification_widget.danger {
29 .btn-danger()
30 }
31
@@ -9588,13 +9588,287 ul#help_menu li a i {
9588 9588 padding: 1px 12px;
9589 9589 margin: 2px 4px;
9590 9590 z-index: 10;
9591 border: 1px solid #ccc;
9592 border-radius: 4px;
9593 9591 background: rgba(240, 240, 240, 0.5);
9592 float: right !important;
9593 float: right;
9594 box-sizing: border-box;
9595 -moz-box-sizing: border-box;
9596 -webkit-box-sizing: border-box;
9597 display: inline-block;
9598 margin-bottom: 0;
9599 font-weight: normal;
9600 text-align: center;
9601 vertical-align: middle;
9602 cursor: pointer;
9603 background-image: none;
9604 border: 1px solid transparent;
9605 white-space: nowrap;
9606 padding: 6px 12px;
9607 font-size: 13px;
9608 line-height: 1.42857143;
9609 border-radius: 4px;
9610 -webkit-user-select: none;
9611 -moz-user-select: none;
9612 -ms-user-select: none;
9613 user-select: none;
9614 color: #333333;
9615 background-color: #ffffff;
9616 border-color: #cccccc;
9617 padding: 1px 5px;
9618 font-size: 12px;
9619 line-height: 1.5;
9620 border-radius: 3px;
9621 }
9622 .notification_widget:focus,
9623 .notification_widget:active:focus,
9624 .notification_widget.active:focus {
9625 outline: thin dotted;
9626 outline: 5px auto -webkit-focus-ring-color;
9627 outline-offset: -2px;
9628 }
9629 .notification_widget:hover,
9630 .notification_widget:focus {
9631 color: #333333;
9632 text-decoration: none;
9633 }
9634 .notification_widget:active,
9635 .notification_widget.active {
9636 outline: 0;
9637 background-image: none;
9638 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
9639 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
9640 }
9641 .notification_widget.disabled,
9642 .notification_widget[disabled],
9643 fieldset[disabled] .notification_widget {
9644 cursor: not-allowed;
9645 pointer-events: none;
9646 opacity: 0.65;
9647 filter: alpha(opacity=65);
9648 -webkit-box-shadow: none;
9649 box-shadow: none;
9650 }
9651 .notification_widget [class^="icon-"].icon-large,
9652 .notification_widget [class*=" icon-"].icon-large {
9653 line-height: .9em;
9654 }
9655 .notification_widget [class^="icon-"].icon-spin,
9656 .notification_widget [class*=" icon-"].icon-spin {
9657 display: inline-block;
9658 }
9659 .notification_widget [class^="icon-"].pull-left.icon-2x,
9660 .notification_widget [class*=" icon-"].pull-left.icon-2x,
9661 .notification_widget [class^="icon-"].pull-right.icon-2x,
9662 .notification_widget [class*=" icon-"].pull-right.icon-2x {
9663 margin-top: .18em;
9664 }
9665 .notification_widget [class^="icon-"].icon-spin.icon-large,
9666 .notification_widget [class*=" icon-"].icon-spin.icon-large {
9667 line-height: .8em;
9668 }
9669 .notification_widget:hover,
9670 .notification_widget:focus,
9671 .notification_widget:active,
9672 .notification_widget.active,
9673 .open .dropdown-toggle.notification_widget {
9674 color: #333333;
9675 background-color: #ebebeb;
9676 border-color: #adadad;
9677 }
9678 .notification_widget:active,
9679 .notification_widget.active,
9680 .open .dropdown-toggle.notification_widget {
9681 background-image: none;
9682 }
9683 .notification_widget.disabled,
9684 .notification_widget[disabled],
9685 fieldset[disabled] .notification_widget,
9686 .notification_widget.disabled:hover,
9687 .notification_widget[disabled]:hover,
9688 fieldset[disabled] .notification_widget:hover,
9689 .notification_widget.disabled:focus,
9690 .notification_widget[disabled]:focus,
9691 fieldset[disabled] .notification_widget:focus,
9692 .notification_widget.disabled:active,
9693 .notification_widget[disabled]:active,
9694 fieldset[disabled] .notification_widget:active,
9695 .notification_widget.disabled.active,
9696 .notification_widget[disabled].active,
9697 fieldset[disabled] .notification_widget.active {
9698 background-color: #ffffff;
9699 border-color: #cccccc;
9700 }
9701 .notification_widget .badge {
9702 color: #ffffff;
9703 background-color: #333333;
9594 9704 }
9595 9705 .notification_widget.span {
9596 9706 padding-right: 2px;
9597 9707 }
9708 .notification_widget.warning {
9709 color: #ffffff;
9710 background-color: #f0ad4e;
9711 border-color: #eea236;
9712 }
9713 .notification_widget.warning:hover,
9714 .notification_widget.warning:focus,
9715 .notification_widget.warning:active,
9716 .notification_widget.warning.active,
9717 .open .dropdown-toggle.notification_widget.warning {
9718 color: #ffffff;
9719 background-color: #ed9c28;
9720 border-color: #d58512;
9721 }
9722 .notification_widget.warning:active,
9723 .notification_widget.warning.active,
9724 .open .dropdown-toggle.notification_widget.warning {
9725 background-image: none;
9726 }
9727 .notification_widget.warning.disabled,
9728 .notification_widget.warning[disabled],
9729 fieldset[disabled] .notification_widget.warning,
9730 .notification_widget.warning.disabled:hover,
9731 .notification_widget.warning[disabled]:hover,
9732 fieldset[disabled] .notification_widget.warning:hover,
9733 .notification_widget.warning.disabled:focus,
9734 .notification_widget.warning[disabled]:focus,
9735 fieldset[disabled] .notification_widget.warning:focus,
9736 .notification_widget.warning.disabled:active,
9737 .notification_widget.warning[disabled]:active,
9738 fieldset[disabled] .notification_widget.warning:active,
9739 .notification_widget.warning.disabled.active,
9740 .notification_widget.warning[disabled].active,
9741 fieldset[disabled] .notification_widget.warning.active {
9742 background-color: #f0ad4e;
9743 border-color: #eea236;
9744 }
9745 .notification_widget.warning .badge {
9746 color: #f0ad4e;
9747 background-color: #ffffff;
9748 }
9749 .notification_widget.success {
9750 color: #ffffff;
9751 background-color: #5cb85c;
9752 border-color: #4cae4c;
9753 }
9754 .notification_widget.success:hover,
9755 .notification_widget.success:focus,
9756 .notification_widget.success:active,
9757 .notification_widget.success.active,
9758 .open .dropdown-toggle.notification_widget.success {
9759 color: #ffffff;
9760 background-color: #47a447;
9761 border-color: #398439;
9762 }
9763 .notification_widget.success:active,
9764 .notification_widget.success.active,
9765 .open .dropdown-toggle.notification_widget.success {
9766 background-image: none;
9767 }
9768 .notification_widget.success.disabled,
9769 .notification_widget.success[disabled],
9770 fieldset[disabled] .notification_widget.success,
9771 .notification_widget.success.disabled:hover,
9772 .notification_widget.success[disabled]:hover,
9773 fieldset[disabled] .notification_widget.success:hover,
9774 .notification_widget.success.disabled:focus,
9775 .notification_widget.success[disabled]:focus,
9776 fieldset[disabled] .notification_widget.success:focus,
9777 .notification_widget.success.disabled:active,
9778 .notification_widget.success[disabled]:active,
9779 fieldset[disabled] .notification_widget.success:active,
9780 .notification_widget.success.disabled.active,
9781 .notification_widget.success[disabled].active,
9782 fieldset[disabled] .notification_widget.success.active {
9783 background-color: #5cb85c;
9784 border-color: #4cae4c;
9785 }
9786 .notification_widget.success .badge {
9787 color: #5cb85c;
9788 background-color: #ffffff;
9789 }
9790 .notification_widget.info {
9791 color: #ffffff;
9792 background-color: #5bc0de;
9793 border-color: #46b8da;
9794 }
9795 .notification_widget.info:hover,
9796 .notification_widget.info:focus,
9797 .notification_widget.info:active,
9798 .notification_widget.info.active,
9799 .open .dropdown-toggle.notification_widget.info {
9800 color: #ffffff;
9801 background-color: #39b3d7;
9802 border-color: #269abc;
9803 }
9804 .notification_widget.info:active,
9805 .notification_widget.info.active,
9806 .open .dropdown-toggle.notification_widget.info {
9807 background-image: none;
9808 }
9809 .notification_widget.info.disabled,
9810 .notification_widget.info[disabled],
9811 fieldset[disabled] .notification_widget.info,
9812 .notification_widget.info.disabled:hover,
9813 .notification_widget.info[disabled]:hover,
9814 fieldset[disabled] .notification_widget.info:hover,
9815 .notification_widget.info.disabled:focus,
9816 .notification_widget.info[disabled]:focus,
9817 fieldset[disabled] .notification_widget.info:focus,
9818 .notification_widget.info.disabled:active,
9819 .notification_widget.info[disabled]:active,
9820 fieldset[disabled] .notification_widget.info:active,
9821 .notification_widget.info.disabled.active,
9822 .notification_widget.info[disabled].active,
9823 fieldset[disabled] .notification_widget.info.active {
9824 background-color: #5bc0de;
9825 border-color: #46b8da;
9826 }
9827 .notification_widget.info .badge {
9828 color: #5bc0de;
9829 background-color: #ffffff;
9830 }
9831 .notification_widget.danger {
9832 color: #ffffff;
9833 background-color: #d9534f;
9834 border-color: #d43f3a;
9835 }
9836 .notification_widget.danger:hover,
9837 .notification_widget.danger:focus,
9838 .notification_widget.danger:active,
9839 .notification_widget.danger.active,
9840 .open .dropdown-toggle.notification_widget.danger {
9841 color: #ffffff;
9842 background-color: #d2322d;
9843 border-color: #ac2925;
9844 }
9845 .notification_widget.danger:active,
9846 .notification_widget.danger.active,
9847 .open .dropdown-toggle.notification_widget.danger {
9848 background-image: none;
9849 }
9850 .notification_widget.danger.disabled,
9851 .notification_widget.danger[disabled],
9852 fieldset[disabled] .notification_widget.danger,
9853 .notification_widget.danger.disabled:hover,
9854 .notification_widget.danger[disabled]:hover,
9855 fieldset[disabled] .notification_widget.danger:hover,
9856 .notification_widget.danger.disabled:focus,
9857 .notification_widget.danger[disabled]:focus,
9858 fieldset[disabled] .notification_widget.danger:focus,
9859 .notification_widget.danger.disabled:active,
9860 .notification_widget.danger[disabled]:active,
9861 fieldset[disabled] .notification_widget.danger:active,
9862 .notification_widget.danger.disabled.active,
9863 .notification_widget.danger[disabled].active,
9864 fieldset[disabled] .notification_widget.danger.active {
9865 background-color: #d9534f;
9866 border-color: #d43f3a;
9867 }
9868 .notification_widget.danger .badge {
9869 color: #d9534f;
9870 background-color: #ffffff;
9871 }
9598 9872 div#pager_splitter {
9599 9873 height: 8px;
9600 9874 }
General Comments 0
You need to be logged in to leave comments. Login now