Dropdown list side by side instead of stacked vertically.

[jomixlaf]

Is this a feature relevant to companion itself, and not a specific module?

• I believe this to be a feature for companion, and is not specific to a module

Is there an existing issue for this?

• I have searched for similiar existing issues

Describe the feature

If possible I would like to open the discussion on the positioning of the dropdown in the actions list. It would be good looking if we can choose where to put the dropdown. Let me explain with a picture.

In this example, I have a button that dynamically changes the number of dropdowns based on the number of outputs I want; each output has two values. I would like both dropdowns side by side instead of stacked vertically.
Would it be something the Companion team is interested in having as options? Will it be well received if I spend time on it?

Let me know what you think, I'm sure others may have a good need for this as well.
Thank you for your time.

Usecases

It's a dropdown in this case, but I am imagining a combination of dropdown and checkbox would also be cool.

[Julusian]

I'm leaning towards this not being something that we want.

Currently we support what you are asking for within the connection config, but are in the middle of phasing it out. Reason being that it usually works fine at certain screen sizes, but then doesn't degrade well on smaller screen sizes.
And also as part of some ui reworking everything was else was moved to have the field labels to the left, which doesn't fit well with columns.
So I am hesistant to think about adding a similar concept to the action/feedback edit panel where which is already narrower than connection config.

That said, maybe if this was done in a better way then it wouldnt have the same issues.
So my question of you is how should this look/work?

For the current connection config stuff, we allow the module to provide a 'width' value, following the same behaviour as bootstrap and similar grid systems of 12 columns. With it collapsing into a single column at the 'xs' screen size.
To go with this, the field labels are above the fields, rather than to the left.

So, if you could do some amount of grids, how much flexibility would you want? How should it degrade for narrower screens?
What would happen to the field labels when there are columns?

[jomixlaf]

This is an interesting topic, and I didn't think of scaling and screen resize 🤪. I kinda "assume" everyone is no longer using VGA screen 800x600 and didn't think it would be a problem.

That's why I wanted to open the discussion on this: it's a complex topic. I noticed the ability to side-to-side menu in the connection config, but got an inconsistent result. But I didn't bother much until I created my buttons, which, as you see, would benefit from a side view. I might try something to see what I can achieve with this, but if we are not leaning into it, it's probably not worth the effort. But since I'm curious, I might do it anyway 🙃. Would a parametric grid like Excel work? If we virtually separate that grid into X and Y, then each zone can either be

Text, checkbox, buttons, maybe slider? I don't know I'm just browsing here :)
I drafted a very basic idea in Excel, a 4X11Y grid, so each cell corresponds to a zone that can be one of those functions. Just like Excel, we can merge cells. Let's say, put a label on top. Possibilities are limitless, we can limit it to begin the grid 2,3,4 or we see in the wild what people think? We would still need to support the old method anyway.

Does that make sense?

[Julusian]

This is an interesting topic, and I didn't think of scaling and screen resize 🤪. I kinda "assume" everyone is no longer using VGA screen 800x600 and didn't think it would be a problem.

Its probably been on my mind more than for most because while developing I usually have the browser debugger open, which makes everything narrower; and the exact width varies. But when we get down to ~800px the ui rearranges to not be the two panel layout, so width becomes plentiful again for a bit. Around 1280px wide (which would be 50% width on a 2560x1440 monitor, likely becoming a more usual size) everything feels a bit too tight.

And of course there is a feature request to make all the panels resizable by dragging, which if done will affect these widths.

---

I think that would be giving the modules too much say in how it is arranged, and will make it very hard for us to degrade down to a single column layout when needed. I am worried that it will return to the issues of the connection config, where on some screen sizes the layout looks visibly broken and messy because the widths are too narrow, but we can't really do anything other than ignore all the widths.

A personal preference I have is that I prefer the labels being to the left in a column, I find it makes it much easier to skim read and find something. And in the basic case it also helps reduce the height of everything (we used to have them above)

And I think that having a second label like that in the middle will take too much space from the actual inputs (unless we change the width of the leftmost label column, but that will cause other issues)

I am wondering about a much more limited ability to let the module say to put 2 (or maybe 3 fields) in a row. A single label to the left, perhaps with a smaller label tightly above each field.
Something like this:

Then at whatever breakpoint we feel is appropriate, we can cut that into less columns, and pretend they were never a single row by combining the labels into longer ones like Line 1: Dist.

---

At some point I should probably check with Bitfocus to see what they think about this for Buttons, but as long as we can gracefully degrade into a decent single column layout then I don't imagine any objections. (I don't know if they will or wont want to support columns here, but I believe their panel is by default narrower than ours)

[jomixlaf]

At some point I should probably check with Bitfocus to see what they think about this for Buttons,

I tought bitfocus was you haha.

[dnmeid]

What Julian says. This only sometimes gives the appearance that you had in mind. We prefer to have all options presented in a uniform and manageable way.
I'd also say that the two or three small items in a row idea just adds complexity with small value.