[UX] Flexible templates UI: Allow "visual" region width changing, using left/right drag handles, and width indicators

[klonos]

This has actually been on my mind since the introduction of the flexible layout templates, but never gotten to file an issue for it till now.

Currently, one has to click the "Configure row" button, then click the "Change region widths" link, and then select from the available combinations from the dialog:

How about something like this instead?:

The handle would not increment by steps of 1% or anything like that, rather than "snap in place" while being dragged, allowing the user to select between the same predefined widths as before ...just in a way that is more direct/visual, and where the user can quickly configure region widths without having to open/close dialogs, and click though multiple links/buttons to achieve the same result.

[olafgrabienski]

Interesting! Do you think you can also integrate changing the number of regions in this approach?

[klonos]

Not unless we add delete buttons/icons in each region + another "Add region" button in each row. I haven't really thought of a UI that would accommodate for that 🤔

...an idea off of the top of my head is that we could use something like https://designwithpc.com/Plugins/ddSlick to expose the various combinations of region numbers/widths as a drop-down select in each row. I'll need to think more about it.

In the meantime, if anyone else has ideas, or has seen similar UIs, feel free to chime in.

[indigoxela]

The drag handle reminds me of an annoying UX issue with panels: it wasn't possible to set the values exactly, so it was impossible (without some tricks) to, for instance, cleanly align multiple rows to the same column width - something I currently love about the Layout module.

So if someone implements that drag-thingy, please also provide a way to set exact values.

[klonos]

So if someone implements that drag-thingy, please also provide a way to set exact values.

Having the ability to specify exact region widths would be a change in the current functionality (not opposed to it, but separate issue please). What I'm proposing here is not a "free" drag handle, rather than a handle that would "snap" into specific percentages. That would basically allow resizing both regions in either side of the handle at the same time, to achieve the already existing presets.

...by "presets", I'm referring to the predefined percentages that are available via this UI:

For example, in the screenshot/mockup I provided in the issue summary, the two regions are set to 67% and 33%. Dragging the handle to the left would not set that to 66%/34%, then to 65%/35%, then to 64%/36%, and so on ...it would instead "snap" straight into the next preset, which is 50%/50%, then to the next one (33%/67%), then to 25%/75% etc.

https://refreshless.com/nouislider looks very promising, as it is a range slider that:

• allows specifying multiple handles, and allowed "steps"
• supports IE9 - IE11 (because Backdrop still does that too)
• is accessible, with ARIA and keyboard support ❤️

[indigoxela]

What I'm proposing here is not a "free" drag handle, rather than a handle that would "snap" into specific percentages.

Then my concern was unwarranted. :wink:

[klonos]

Another interesting approach for multi-value sliders: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/