UIX: allow reversed layout directions

[5H4D0W-X]

Is your feature request related to a problem? Please describe.

In UIX, vertical and horizontal layouts always order items top-to-bottom or left-to-right, taking the order offset of the slots into account. This means that subsequent elements, i.e. elements to the bottom or right of the previous, are by definition lower in the hierarchy and overlap the previous elements. It also means that if a right-to-left layout is desired, there needs to be ProtoFlux to set new children’s order offsets to be lower than the current lowest. This becomes even more complicated if the “flipped” state has to be changeable “at runtime” with existing items adjusting accordingly.

Describe the solution you'd like

An enum or “reverse” bool on horizontal, vertical, circular and grid layouts to set the direction in which items are arranged. The order offset should still have an influence, except in the other direction (lower offset moves items to the right in a right-to-left horizontal layout).

Describe alternatives you've considered

ProtoFlux setups to set order offsets when adding a new element or changing the direction.

Additional Context

This would allow things like the settings screen to be adjusted for RTF layouts very easily, as a single dynamic variable could drive all relevant horizontal layouts to flip their direction in an instant.

Requesters

ShadowX

[Frooxius]

Can you provide some examples of this? Like where would this be useful and such, maybe some UI examples of this in practice?

[art0007i]

@Frooxius Shadow mentioned in the Additional Context, that when localizing for languages which read right to left it is useful to also reverse layouts. This can be seen for example on wikipedia.org when switching to any RTL language such as arabic.

[Frooxius]

@art0007i We do not support right to left languages at the moment though.

Plus I don't understand how would a vertical layout being reversed here help? Horizontal would make sense, but they also mention vertical.

[5H4D0W-X]

I mentioned the GridLayout and VerticalLayout for continuity, it'd be weird if there were features on one but not the other imo. An example of a different use case would be reversing the sorting direction on a list of items, like going from "newest first" to "oldest first" without re-sorting the entire list.

Apart from positional stuff there are also the graphical implications that I mentioned in the original issue. I made a crude drawing to explain it: The top shows the current behavior (I staggered the cards a bit so the depth is easier to see but really it would only be going either right or down). If a creator wants to set up a UI that works like the bottom section, they need to

• make a custom layouting system that arranges items using flux and lots of math
• set the spacing of the layout to a negative value (this doesn't work if the items aren't all the same size)

I would consider both of these methods workarounds

[5H4D0W-X]

The concept shown in the drawing could be used in many different applications:

• "Next Up" indicator on a music player, where the next songs or albums are shown as a stack of overlapping cards with the closest song being on top and to the left

• The "contributors" visual on GitHub is a stack of circles showing all contributors' profile pictures, with the most prominent on the left

• A notes app where most recent notes are shown as a stack with the most recent at the top

[Banane9]

• "Next Up" indicator on a music player, where the next songs or albums are shown as a stack of overlapping cards with the closest song being on top and to the left

Yup, definitely had basically that issue on the Spotify Status player. The list has the currently playing at the bottom, so all the upcoming songs are stacked up from there. But the natural order for them is of course with the next upcoming first, which would place it at the top - so I have to reverse all the order offsets.

[Frooxius]

We could potentially add this given these use-cases, but it shouldn't be that complicated to simply specify the order offset to arrange them in given sequence - that's an intended mechanism that gives you full control over the order of things.