Notification Class Name

Dashboard
1

Hi guys, I am trying to customize the dashboard notification a bit with css. I'm trying to pass a custom class with msg.className. This works great when using the notifications that don't have OK/Cancel options, I can see the class name in the browser developer tools. However once I try passing the msg.className to an OK/Cancel notification I can't see the classname in the dev tools and so my custom css for that class does not work.

Has anyone been able to set the class for the OK/Cancel notifications?

BTW I am using node-red version 2.0.5 currently.

Here is a simple flow that passes the className to the notification node.

[{"id":"9133062da144d593","type":"ui_toast","z":"ccfccf27b2401ad0","position":"dialog","displayTime":"200","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":750,"y":320,"wires":[[]]},{"id":"4a8ff3aceed24b4a","type":"inject","z":"ccfccf27b2401ad0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":360,"y":320,"wires":[["139bf308cf4a273d"]]},{"id":"139bf308cf4a273d","type":"change","z":"ccfccf27b2401ad0","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"my-custom-nofication","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":320,"wires":[["9133062da144d593"]]}]
2

Not sure why but I agree it doesn't seem to work.

3

I looked into the node-red dashboard code and it looks like the node.className || msg.className is not being used when a dialog toast notification is generated, but it is used when a non-dialog notification is.

I'm looking at the section of code starting at line 595 in main.js

        events.on('show-toast', function (msg) {
            if (msg.raw !== true) {
                var temp = document.createElement('div');
                temp.textContent = msg.message;
                msg.message = temp.innerHTML;
            }
            if (msg.dialog === true) {
                var confirm;
                if (msg.message == "") { $mdDialog.cancel(); return; }
                if (msg.cancel && msg.prompt) {
                    confirm = $mdDialog.prompt()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .initialValue("")
                        .ariaLabel(msg.ok + " or " + msg.cancel)
                        .ok(msg.ok)
                        .cancel(msg.cancel);
                    confirm._options.focusOnOpen = false;
                }
                else if (msg.cancel) {
                    confirm = $mdDialog.confirm()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .ariaLabel(msg.ok + " or " + msg.cancel)
                        .ok(msg.ok)
                        .cancel(msg.cancel);
                    confirm._options.focusOnOpen = false;
                }
                else {
                    confirm = $mdDialog.alert()
                        .title(msg.title)
                        .htmlContent(msg.message)
                        .ariaLabel(msg.ok)
                        .ok(msg.ok)
                }
                confirm._options.template = '<md-dialog md-theme="{{ dialog.theme || dialog.defaultTheme }}" aria-label="{{ dialog.ariaLabel }}" >' +
                    '<md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">' +
                        '<h2 class="md-title">{{ dialog.title }}</h2>' +
                        '<div ng-if="::dialog.mdHtmlContent" class="md-dialog-content-body"ng-bind-html="::dialog.mdHtmlContent | trusted"></div>' +
                        '<div ng-if="::!dialog.mdHtmlContent" class="md-dialog-content-body"><p>{{::dialog.mdTextContent}}</p></div>' +
                        '<md-input-container md-no-float ng-if="::dialog.$type == \'prompt\'" class="md-prompt-input-container"><input ng-keypress="dialog.keypress($event)" md-autofocus ng-model="dialog.result"placeholder="{{::dialog.placeholder}}" ng-required="dialog.required">' +
                        '</md-input-container>' +
                    '</md-dialog-content>' +
                    '<md-dialog-actions>' +
                        '<md-button ng-if="dialog.$type === \'confirm\' || dialog.$type === \'prompt\'"ng-click="dialog.abort()" class="md-primary md-cancel-button">{{ dialog.cancel }}</md-button>' +
                        '<md-button ng-click="dialog.hide()" class="md-primary md-confirm-button" md-autofocus="dialog.$type===\'alert\'" ng-disabled="dialog.required && !dialog.result">{{ dialog.ok }}</md-button>' +
                    '</md-dialog-actions>' +
                '</md-dialog>';
                $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 });
                    }
                );
            }
            else {
                if (msg.hasOwnProperty("message") || msg.hasOwnProperty("title")) {
                    var toastScope = $rootScope.$new();
                    toastScope.toast = msg;
                    if (msg.hasOwnProperty("message") && msg.message == "") { msg.displayTime = 1; }
                    var opts = {
                        scope: toastScope,
                        templateUrl: 'partials/toast.html',
                        hideDelay: msg.displayTime,
                        position: msg.position,
                        toastClass: msg.toastClass
                    };
                    $mdToast.show(opts);
                }
            }
        });

You can see the toastClass is defined as msg.toastClass in the last else (for non-dialog $mdToast notifications) but its not for $mdDialog.

This is my first time looking at this code base so I'll have to familiarize myself more with it before suggesting any changes. Is anyone out there already familiar with this?

4

So yes the dialog is adding panelClass - $mdDialog.show(confirm, { panelClass:'nr-dashboard-dialog' }) instead - so I guess that needs to be optionally variable in some way.

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.