Wrong label for custom theme

Dashboard
1

Hello,

In widget settings section of dashboard custom theme sheet, I think there some confusions between labels:

  • "Widget Colour" appears in front of color field input id "widget-backgroundColor", whereas the label should be "Widget Background"
  • "Widget Background" appears in front of color field input id "widget-borderColor", whereas the label should be "Widget Border"

Thierry

2

yes - but the labels are correct.
and we can't change the underlying names as that would break everyone.
so it is what it is.

3

So when changing "Widget Colour" (or "Widget Background"), the css variable "--nr-dashboard-widgetBackgroundColor" ( resp. ""--nr-dashboard-widgetBorderColor" ) is updated accordingly.
These 2 variables could be used in ui_template or custom node => relying on the names of the css variables is very confusing, as it will do the opposite of what the names suggest !

4

Yes, it does, however fixing this now will result in a breaking change for many, many users. So it's not something to fix in a bug release or minor version. If this would be changed at some point in the future, it would likely be in a major release, something like node-red-dashboard v2 v3 if that point ever arrives.

5

it's already 2.16.2 :wink: -

but hmm - indeed those are just variable names that got added fairly recently (2.16) rather than deeply embedded...

1 Like
6

oops you're right, I'm thinking too much of other packages still at 1.x :stuck_out_tongue:

7

So the three in question are...

    --nr-dashboard-widgetBackgroundColor: @widgetBackgroundColor;
    --nr-dashboard-widgetBorderColor: @widgetBorderColor;

as they are just variable names - and we don't have --nr-dashboard-widgetColor yet we can add that as the "correct" alias... and deprecate the other... just need a new / alternative name for the other one... how about --nr-dashboard-widgetBackColor or --nr-dashboard-widgetBgndColor or something else - ideas please...

8

Sounds good to me, then it becomes:

--nr-dashboard-widgetTextColor: @widgetTextColor;
--nr-dashboard-widgetColor: @widgetBackgroundColor;
--nr-dashboard-widgetBgndColor: @widgetBorderColor;
9

Looks good to me - any more opinions on names before i make it so ?