Dashboard changes hosed me

Dashboard
1

I upgraded my Dashboard instance to 2.10.1 and I have two new issues.

  1. My menu, which I have set to black, suddenly the items on the menu inherit the colors used on

md-list-item._md-button-wrap > div.md-button

  1. Your new icon support sort of hoses me on something I'm doing with icons in a template and I'm unsure how to override it...

I can provide an image of 1 if you'd like, but this just seemed off to me and I'm wondering if its a bug?

For 2, basically I'm using the template node to build a home blueprint overlay of certain state icons, and coloring them red / green for on / off state, etc. My problem is with this update, it looks like we're now setting a new CSS rule that applies color directly to the svg path elements.

.nr-dashboard-theme .nr-dashboard-template path

I'd imagine that this would actually be a problem for people doing any SVG embedding in general as you'd be overriding their colors, etc... In my template, I do something like this:

<div style="top: {{el.top}}px;left: {{el.left}}px;position: absolute;" ng-repeat="el in msg.payload">
    <ng-md-icon icon="{{el.icon}}" style="fill: {{el.color}};border: 2px solid {{el.color}};border-radius:50%;padding: 3px 0px 0px 3px;background: #fff;" size="20"></ng-md-icon>
    <div style="color: {{el.color}};font-size: 10px;padding-top:2px;text-align: center;">{{el.text}}</div>
</div>

This gives you HTML of the following then:

<div style="top: 178px;left: 440px;position: absolute;" ng-repeat="el in msg.payload" class="ng-scope">
        <ng-md-icon icon="lightbulb_outline" style="fill: #a55;border: 2px solid #a55;border-radius:50%;padding: 3px 0px 0px 3px;background: #fff;" size="20">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
                <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z"></path>
                <path d="M14.85 13.1l-.85.6V16h-4v-2.3l-.85-.6A4.997 4.997 0 0 1 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1zM12 2C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"></path>
             </svg>
        </ng-md-icon>
        <div style="color: #a55;font-size: 10px;padding-top:2px;text-align: center;" class="ng-binding"></div>
    </div>

Notice that the fill color here is actually getting set on the wrapping ng-md-icon, and when it generates the HTML it doesn't actually copy the fill color to the svg or path elements? However it DOES inherit said fill color from the parent and thus carries the specified color. But when you specify a global CSS rule like this, it preempts this behavior and you can't override the icon colors.

Is there perhaps a different CSS rule we could use that would still allow this? I'm kind of at the mercy of how angular is going to print out the directive here...

2

Hi,
Have you tried the new option
image
which should turn off "our" overrides inside any ui_template ?

3

Ah ha! That did it. Thanks!