Feature request: Indent value for label/widget spacing per group

[Christian-Me]

Hello,

I like to discuss a feature for the dashboard to streamline / sort the placement of labels and actual widgets inside one group. currently if you place some widgets the position of the widget is not consistent:

For widgets with a label option the width of the widget is determined by the actual length of the label text.

I like to suggest to add an indent parameter in the group definition do align all widgets (with a label) to one consistent vertical position. I think the indent should be defined by grids and not pixels.

If the ident is not defined or <1 the layout can be as it is now to avoid a breaking change. For widgets like switch or num input I personally prefer the same right aligned position as it is easier to read on wide groups where you can loose the visual relationship between the label and the input. I think the material design likes them right aligned. Perhaps solvable to position the widget left if the size is not auto or width less than the group width.
If suitable a node can have it's own indent value to override the group value.

I tested this feature in the iro-color-picker widget with this result:

It is currently defined by each widget node. It would be nicer if it is defined by group so it could be adjusted easily for all widgets in a group. If a widget wishes to it can overwrite the indent value per node same as the size parameter.

I currently solve that problem with separate text nodes for the labels but this makes the flow little bit messy and many nodes to edit if the design has to change.

Happy to hear your thoughts.
Chris

[dceejay]

As long as it's backwards compatible I don't have a problem with it. It would certainly help things like select boxes and sliders etc...
I think I would add the indent to same line as the width to save vertical space - and indeed there ought to be some logic so the value can only be max width -1 or some such.

[Christian-Me]

Would be great, and yes you are right width -1 is a reasonable upper limit and 0 for no ident = current behaviour as lower limit. It would take some time to propagate that feature. Do you prefer a PR for this? I would do my best

BTW, I was a little bit confused that in the text input widget the label is more the "placeholder text" and not a label like for the other widgets. I like the placeholder as it can give a quick hint what is expected here or something like "leave empty for default" but there should be an option for both as the placeholder should disappear as soon as the user used that input field (and perhaps don't move to the top - a checkbox can let the user determine this function like "check to hide placeholder after input").

And another one: The left padding for the label is all over the shop. Is there a fixed value or style for widgets should use for label text?

[hotNipi]

Probably the problematic will be that custom widgets are treated as in ui-template. It has 2 possible layout situations depending on user choice to use node-red theme or angular theme in ui-template.

.nr-dashboard-template {
    padding: 3px 6px;
}

As the padding is removed without the node-red theme the widget should know and compensate in case of alignment with standard widgets is the design target.

Also the values for ui-template are different from standard widgets and that has been that way a long time. If anybody has done hard work with CSS overrides any changes on that area will affect for sure.

[Christian-Me]

Thank you for the info: padding: 3px 6px 0px 6px; makes is consistent for most other widgets:

Any Idea how to check if "Angular theme everywhere" is selected?
It seams the left padding here is 12px instead of 6px

And yes I still have to tweak the right alignment

[hotNipi]

I do it like this
Inside initcontroller:function( ....

var updateContainerStyle = function (el, padding) {
	if (el) {
		el = el.parentElement
	}
	if (el && el.classList.contains('nr-dashboard-template')) {
		if ($(el).css('paddingLeft') == '0px') {
			el.style.paddingLeft = el.style.paddingRight = padding.hor
			el.style.paddingTop = el.style.paddingBottom = padding.vert
		}
	}
}

Where el is your widgets root element and padding is object with values for horizontal and vertical padding you want to have.

And call it when scope is initialized and element exists for sure.

It is needed when you do size calculations at server side to decide widget look or placement or what ever depends on sizes.

config.exactwidth = parseInt(site.sizes.sx * config.width + site.sizes.cx * (config.width - 1)) - 12;

That 12 is default for node red theme but it fails for others so I always add if they are taken away.

[Christian-Me]

Ok thank you for your quick reply ... more to figure out .. (I thought the hardest part is done as I got the iOS popups are working

[Christian-Me]

I'm still playing around with the indent feature.

One quick question. Is there a easy way to set the max limits of the elementSizer widget?
max = group.width-1

            $("#node-input-sizeWidgetIndent").elementSizer({
                width: "#node-config-input-widgetIndent",
                auto: false
            });

[CreativeWarlock]

Just a quick idea here:

how about a grid object with internal lanes that can be configured via parameter to define individual paddings (per lane). It would have the benefit that the user can configure this once per grid and associated widgets. And if you group neighboured internal lanes together e.g. (A+B) | C then in one line from 2 widgets the 2nd one would be (intuitively) placed at the start of internal lane C (with the appropriate inner padding of course).

[dceejay]

Hi @Christian-Me where is this code ?
most of the actual card sizes are calculated inside src/components/ui=card-panel/ui-card-panel-ctrl.js and the associated ui-card-panel.css and .html files

[Christian-Me]

This is my own code (iro-color-picker)

I like to use the elementSizer to define the indent. For this I like to limit the user input to max group width -1
If I specify the group the input is limited to the group width (one to big) and I get the hight too ... I can validate the input but a hard limit would be more intuitve

[Christian-Me]

Sorry but I don't understand it totally ... It sounds like tabstops where several definitions can be defined and linked to groups ... This will make changes over several groups easier but brings the risk of changing things unintentionally in other groups when you change the indent in one group.

I think this feature should be as simple as possible.

• Normaly the indent value is 0 and everthing is like it is now.
• If you change the value (per group) >0 all widgets with labels that support this feature could allign the lable / widget justification line accordingly.
• If it is suitable for a widget it can decide to overrule this by an own option or 0 (auto) if the group value should be used

There could be a global setting for the dashboard and perhaps another one for each tab. All overrule the setting from the branch above (but again ... many options in to many locations ... could be hard to trace an unexpected behaviour)
I expect one indent per group should be sufficient as similar widgets / labels (Text length) can be expected in one group and I expect a limited amount of widgets per group.
A defined label width have the benefit that the label can warp into mutiple lines if longer text is nessesary.

this is just me playing around with alignments

and location