From 0ec04a36243137d6347512e7d894213820388d68 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 9 Jan 2019 14:02:46 +0000 Subject: [PATCH] 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. --- .../@node-red/editor-client/src/js/comms.js | 4 +- .../editor-client/src/js/ui/clipboard.js | 2 +- .../editor-client/src/js/ui/notifications.js | 18 +++++- .../@node-red/editor-client/src/js/ui/view.js | 4 +- .../editor-client/src/sass/notifications.scss | 62 +++++++++++++++++++ .../@node-red/nodes/core/core/20-inject.html | 7 +-- 6 files changed, 85 insertions(+), 12 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/comms.js b/packages/node_modules/@node-red/editor-client/src/js/comms.js index 5f6274cbd..ea128424b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/comms.js +++ b/packages/node_modules/@node-red/editor-client/src/js/comms.js @@ -142,10 +142,10 @@ RED.comms = (function() { connectWS(); } else { var msg = RED._("notification.errors.lostConnectionReconnect",{time: connectCountdown})+' '+ RED._("notification.errors.lostConnectionTry")+''; - errornotification.update(msg); + errornotification.update(msg,{silent:true}); $(errornotification).find("a").click(function(e) { e.preventDefault(); - errornotification.update(RED._("notification.errors.lostConnection")); + errornotification.update(RED._("notification.errors.lostConnection"),{silent:true}); clearInterval(connectCountdownTimer); connectWS(); }) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js index 82118436a..97addf5c5 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js @@ -72,7 +72,7 @@ RED.clipboard = (function() { $("#clipboard-export").select(); document.execCommand("copy"); document.getSelection().removeAllRanges(); - RED.notify(RED._("clipboard.nodesExported")); + RED.notify(RED._("clipboard.nodesExported"),{id:"clipboard"}); $( this ).dialog( "close" ); } }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js index af7fd31b4..7a6a3bbf7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/notifications.js @@ -56,6 +56,11 @@ RED.notifications = (function() { type = options.type; } + if (options.id && persistentNotifications.hasOwnProperty(options.id)) { + persistentNotifications[options.id].update(msg,options); + return persistentNotifications[options.id]; + } + if (options.modal) { $("#full-shade").show(); } @@ -181,7 +186,9 @@ RED.notifications = (function() { if (typeof options === 'number') { timeout = options; } else if (options !== undefined) { - timeout = options.timeout; + if (!options.fixed) { + timeout = options.timeout || 5000; + } if (options.buttons) { var buttonSet = $('
').appendTo(nn) options.buttons.forEach(function(buttonDef) { @@ -203,6 +210,11 @@ RED.notifications = (function() { } if (nn.hidden) { 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); if (options.id) { persistentNotifications[options.id] = n; - notificationButtonWrapper.show(); + if (options.fixed) { + notificationButtonWrapper.show(); + } } c+=1; return n; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 131f49b52..0e0d09171 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -1636,7 +1636,7 @@ RED.view = (function() { } } 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) { var countList = ""; - RED.notify("

"+RED._("clipboard.nodesImported")+"

"+countList); + RED.notify("

"+RED._("clipboard.nodesImported")+"

"+countList,{id:"clipboard"}); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss index 9a66f1683..31a9d62ae 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss @@ -54,3 +54,65 @@ .notification-error { 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); + // } +} diff --git a/packages/node_modules/@node-red/nodes/core/core/20-inject.html b/packages/node_modules/@node-red/nodes/core/core/20-inject.html index 3bebd0b46..b1df9f9a0 100644 --- a/packages/node_modules/@node-red/nodes/core/core/20-inject.html +++ b/packages/node_modules/@node-red/nodes/core/core/20-inject.html @@ -483,20 +483,17 @@ var key = RED.utils.parseContextKey(payload); payload = this.payloadType+"."+key.key; } - var label = (this.name||payload); + var label = this._def.label.call(this); if (label.length > 30) { label = label.substring(0,50)+"..."; } label = label.replace(/&/g,"&").replace(//g,">"); - - if (this.payloadType === "date") { label = this._("inject.timestamp"); } - if (this.payloadType === "none") { label = this._("inject.blank"); } var node = this; $.ajax({ url: "inject/"+this.id, type:"POST", 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) { if (jqXHR.status == 404) {