AngularJS Material style issues

[kodaniel]

Hi!

I tried to use the dashboard's Template node with the angular material design according to the documentation (link), but in the most cases the style is buggy.

How it looks:

And how should it looks:

Is it a bug, or I just do something wrong?

Node-Red-Dashboard version: v2.8.2
Node-Red version: v0.18.4
NodeJs version: v8.10.0

Sample nodes here

[cinhcet]

the css of the dashboard
https://github.com/node-red/node-red-dashboard/blob/master/src/theme.less#L225
sets the background color for md-button

[kodaniel]

How could I do this in the node-red editor?

[dceejay]

in the Dashboard Tab - Theme - Custom

widget background

though I think the actual button colour is widget-colour
and can also be set by the background colour setting in the edit config

[kodaniel]

The widget background changes the widget's background. But how does it solve the problem?
Where can I find the edit config?

[dceejay]

the edit config opens when you double click the node in the editor.

In general we prefer how-to type questions via the mailing list or slack channel so the widest possible community are able to see them and help.

[kodaniel]

Then I think you didn't really understand the problem.

The Dashboard uses the https://material.angularjs.org/ UI framework which has several components like lists, dialogs, inputs, progress bars, etc... I want to use these components in the Template node, but I can't because the UI elements look bad (see the pictures above).
I think it is not only a "how-to".

[cinhcet]

in the css file https://github.com/node-red/node-red-dashboard/blob/master/src/theme.less#L225
(sorry, I clicked on the wrong line in the post above, is edited) you see that the background of md-button and other things are set. A hacky way to get the default behavior would be to comment out line 224-240 in this file. (you need to install the dasboard from git and run gulp, of course).

Acutally, the problem you describe was the reason I started https://github.com/cinhcet/node-red-contrib-component-dashboard because I wanted to use angularjs elements in the template which was not possible without hacks. Another workaround would be to set those properties in a style tag inside the template

[dceejay]

OK - getting there... I think that CSS should only affect buttons in the template so they default to being like other buttons... so other items ought to be ok ?
And indeed you should be able to override it in the template as inline style should take priority.

[cinhcet]

yes, I can confirm that inline style works (used this a while ago).

The problem with angularjs is that the list items he is showing above are using md-buttons internally, therefore those are also affected. But this can also be fixed with inline style.

[dceejay]

hmm - is there a way I could use less to optionally not add any style ? - (based on a "not yet implemented" flag in ui-template config)

[cinhcet]

I can remember roughly that there are so called "guarded mixins" (but I am not a less expert)

[dceejay]

top tip - thanks - looks like the thing we need... will have a play.

[dceejay]

Have pushed a possible way out to master for you to try... give feedback. I have now added an option to the Dashboard Site global options to remove the styling from ui_template nodes. So you can take control if you turn this off..

[kodaniel]

Maybe a dumb question but I am new to this nodejs world. So how can I update to the 2.9.0 version? The latest one at the npm is the 2.8.2.

[dceejay]

cd ~/.node-red
npm i node-red/node-red-dashboard

[knolleary]

Worth pointing out, as @kodaniel is new to the nodejs world, running npm i node-red/node-red-dashboard will cause npm to install the code from this git repository rather than using the published release from the main npm repository. This is a way to install the latest code, albeit code that has not been formally released yet.

[kodaniel]

Works fine, thank you for everybody!

[dceejay]

I didn't try all the "lists, dialogs, inputs, progress bars, etc..." that you mentioned, so please do so and let us know :-)
And indeed if they work a simple test page with them on would be a good thing to add to http://flows.nodered.org - Thanks

[kodaniel]

Ok, I tested all components which does not require additional angularjs code. Everything looks good, I just found a little bug at the Tabs. The content inherits the theme base color instead of black.

[dceejay]

can you share that part of the flow ? thanks

[kodaniel]

AngularMaterialThemeDemo.zip

[dceejay]

Hi - grab it again - and give it a whirl...

[kodaniel]

Fixed :)

[dceejay]

closed by b369e2b