1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Allow notifications to be reused in place rather than stack

For example, clipboard actions now reuse the same notification.
Similarly the Inject node will reuse its notification when
injecting.
This commit is contained in:
Nick O'Leary 2019-01-09 14:02:46 +00:00
parent 81d5b47fce
commit 0ec04a3624
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 85 additions and 12 deletions

View File

@ -142,10 +142,10 @@ RED.comms = (function() {
connectWS(); connectWS();
} else { } else {
var msg = RED._("notification.errors.lostConnectionReconnect",{time: connectCountdown})+' <a href="#">'+ RED._("notification.errors.lostConnectionTry")+'</a>'; var msg = RED._("notification.errors.lostConnectionReconnect",{time: connectCountdown})+' <a href="#">'+ RED._("notification.errors.lostConnectionTry")+'</a>';
errornotification.update(msg); errornotification.update(msg,{silent:true});
$(errornotification).find("a").click(function(e) { $(errornotification).find("a").click(function(e) {
e.preventDefault(); e.preventDefault();
errornotification.update(RED._("notification.errors.lostConnection")); errornotification.update(RED._("notification.errors.lostConnection"),{silent:true});
clearInterval(connectCountdownTimer); clearInterval(connectCountdownTimer);
connectWS(); connectWS();
}) })

View File

@ -72,7 +72,7 @@ RED.clipboard = (function() {
$("#clipboard-export").select(); $("#clipboard-export").select();
document.execCommand("copy"); document.execCommand("copy");
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges();
RED.notify(RED._("clipboard.nodesExported")); RED.notify(RED._("clipboard.nodesExported"),{id:"clipboard"});
$( this ).dialog( "close" ); $( this ).dialog( "close" );
} }
}, },

View File

@ -56,6 +56,11 @@ RED.notifications = (function() {
type = options.type; type = options.type;
} }
if (options.id && persistentNotifications.hasOwnProperty(options.id)) {
persistentNotifications[options.id].update(msg,options);
return persistentNotifications[options.id];
}
if (options.modal) { if (options.modal) {
$("#full-shade").show(); $("#full-shade").show();
} }
@ -181,7 +186,9 @@ RED.notifications = (function() {
if (typeof options === 'number') { if (typeof options === 'number') {
timeout = options; timeout = options;
} else if (options !== undefined) { } else if (options !== undefined) {
timeout = options.timeout; if (!options.fixed) {
timeout = options.timeout || 5000;
}
if (options.buttons) { if (options.buttons) {
var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(nn) var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(nn)
options.buttons.forEach(function(buttonDef) { options.buttons.forEach(function(buttonDef) {
@ -203,6 +210,11 @@ RED.notifications = (function() {
} }
if (nn.hidden) { if (nn.hidden) {
nn.showNotification(); nn.showNotification();
} else if (!options || !options.silent){
$(nn).addClass("notification-shake-horizontal");
setTimeout(function() {
$(nn).removeClass("notification-shake-horizontal");
},300);
} }
} }
@ -221,7 +233,9 @@ RED.notifications = (function() {
currentNotifications.push(n); currentNotifications.push(n);
if (options.id) { if (options.id) {
persistentNotifications[options.id] = n; persistentNotifications[options.id] = n;
notificationButtonWrapper.show(); if (options.fixed) {
notificationButtonWrapper.show();
}
} }
c+=1; c+=1;
return n; return n;

View File

@ -1636,7 +1636,7 @@ RED.view = (function() {
} }
} }
clipboard = JSON.stringify(nns); clipboard = JSON.stringify(nns);
RED.notify(RED._("clipboard.nodeCopied",{count:nns.length})); RED.notify(RED._("clipboard.nodeCopied",{count:nns.length}),{id:"clipboard"});
} }
} }
@ -3255,7 +3255,7 @@ RED.view = (function() {
} }
if (counts.length > 0) { if (counts.length > 0) {
var countList = "<ul><li>"+counts.join("</li><li>")+"</li></ul>"; var countList = "<ul><li>"+counts.join("</li><li>")+"</li></ul>";
RED.notify("<p>"+RED._("clipboard.nodesImported")+"</p>"+countList); RED.notify("<p>"+RED._("clipboard.nodesImported")+"</p>"+countList,{id:"clipboard"});
} }
} }

View File

@ -54,3 +54,65 @@
.notification-error { .notification-error {
border-color: #AD1625; border-color: #AD1625;
} }
.notification-shake-horizontal {
-webkit-animation: notification-shake-horizontal 0.3s steps(2, end) both;
animation: notification-shake-horizontal 0.3s steps(2, end) both;
}
@-webkit-keyframes notification-shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
}
20%,
40%,
60% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
// 80% {
// -webkit-transform: translateX(1px);
// transform: translateX(1px);
// }
// 90% {
// -webkit-transform: translateX(-1px);
// transform: translateX(-1px);
// }
}
@keyframes notification-shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
}
20%,
40%,
60% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
// 80% {
// -webkit-transform: translateX(1px);
// transform: translateX(1px);
// }
// 90% {
// -webkit-transform: translateX(-1px);
// transform: translateX(-1px);
// }
}

View File

@ -483,20 +483,17 @@
var key = RED.utils.parseContextKey(payload); var key = RED.utils.parseContextKey(payload);
payload = this.payloadType+"."+key.key; payload = this.payloadType+"."+key.key;
} }
var label = (this.name||payload); var label = this._def.label.call(this);
if (label.length > 30) { if (label.length > 30) {
label = label.substring(0,50)+"..."; label = label.substring(0,50)+"...";
} }
label = label.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); label = label.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
if (this.payloadType === "date") { label = this._("inject.timestamp"); }
if (this.payloadType === "none") { label = this._("inject.blank"); }
var node = this; var node = this;
$.ajax({ $.ajax({
url: "inject/"+this.id, url: "inject/"+this.id,
type:"POST", type:"POST",
success: function(resp) { success: function(resp) {
RED.notify(node._("inject.success",{label:label}),"success"); RED.notify(node._("inject.success",{label:label}),{type:"success",id:"inject"});
}, },
error: function(jqXHR,textStatus,errorThrown) { error: function(jqXHR,textStatus,errorThrown) {
if (jqXHR.status == 404) { if (jqXHR.status == 404) {