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.

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})+' <a href="#">'+ RED._("notification.errors.lostConnectionTry")+'</a>';
-                        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();
                         })

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" );
                         }
                     },

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 = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').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,8 +233,10 @@ RED.notifications = (function() {
         currentNotifications.push(n);
         if (options.id) {
             persistentNotifications[options.id] = n;
+            if (options.fixed) {
                 notificationButtonWrapper.show();
             }
+        }
         c+=1;
         return n;
     }

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 = "<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"});
                 }
 
             }

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);
+    // }
+}

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,"&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;
                 $.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) {