node-red-dashboard
node-red-dashboard copied to clipboard
Class Name Not Working for Notification Node with Dialog
What are the steps to reproduce?
Add Notification node to flow, use OK/Cancel Dialog option. Add a class name to Notification node or by send msg.className to Notification node.
What happens?
Class name is not used, so custom CSS cannot be used
What do you expect to happen?
The class should update.
Looks like a simple fix. Node.className or msg.className is already passed along in the msg in ui_toast.js. See below:
node.on('input', function(msg) {
if (node.sendall === true) { delete msg.socketid; }
var dt = node.displayTime || msg.timeout * 1000 || 3000;
if (dt <= 0) { dt = 1; }
//msg.payload = noscript(msg.payload);
ui.emitSocket('show-toast', {
title: node.topic || msg.topic,
toastClass: node.className || msg.className,
message: msg.payload,
highlight: node.highlight || msg.highlight,
displayTime: dt,
position: node.position,
id: node.id,
dialog: (node.position === "dialog" || node.position === "prompt") || false,
prompt: (node.position === "prompt") || false,
ok: node.ok,
cancel: node.cancel,
socketid: msg.socketid,
raw: node.raw,
msg: msg
});
});
Thought it might be easier for someone to make this change than for me to do a pull request.
So it looks like what is needed is for this to pass into the panelClass with a msg.toastClass || 'nr-dashboard-dialog' or something similar.
$mdDialog.show(confirm, { panelClass:'nr-dashboard-dialog' }).then(
function(res) {
msg.msg.payload = msg.ok;
if (res !== true) { msg.msg.payload = res; }
if (res == undefined) { msg.msg.payload = ""; }
events.emit({ id:msg.id, value:msg });
},
function() {
msg.msg.payload = msg.cancel;
events.emit({ id:msg.id, value:msg });
}
);
Please tell us about your environment:
- [x] Node-RED-Dashboard version: 3.0.4
- [x] Node-RED version: 2.2.2
- [x] node.js version: 17.6.0
- [x] npm version: 8.1.1
- [x] Platform/OS: windows 10
- [x] Browser: chrome
totally happy to look at a tested PR :-)