Overhaul settings panel layout

[dragunoff]

This PR lays out the settings panel in a consistent and simple way whilst accommodating any number of any type of settings widgets.

Closes #18952
Closes #18426
Related #16596

RA, D2k, TS

The vertical tabs are a precedent but I think they fit and this layout allows for more tabs to be added. In the "common" UI I decided not to touch it as there isn't enough horizontal space because of the main menu. The settings panels is made larger and is the size of the asset browser.

TD

In TD the vertical vs horizontal tabs dissonance was more apparent so I switched the game info to also use the new vertically stacked layout. And both panels are now the same size.

Settings panel with vertical tabs

Game info panel with vertical tabs

[pchote]

I generally like this, but there are a small number of sharp edges that we should try to polish:

• The group header inside the scroll panel for Audio and Input are redundant and IMO would be better if removed
• The sliders, dropdowns, and hotkeys look good in a single column, but I feel that most (all?) of the checkboxes would be better arranged with sharing two columns
• The control scheme description text feels awkward - maybe moving it right so it is clearly indented below the option would help?
• The frame limiter checkbox and slider are really awkward too (the slider modifies the checkbox that is above it)
• Can we please reduce the vertical stride of the TD tabs from 50 to 45? 50 feels noticeably wrong to me, 45 seems better and also matches the horizontal button separation we use in other places

[dragunoff]

The group header inside the scroll panel for Audio and Input are redundant and IMO would be better if removed

Agreed.

The sliders, dropdowns, and hotkeys look good in a single column, but I feel that most (all?) of the checkboxes would be better arranged with sharing two columns

I'm not against arranging controls in columns in principle but I think that our settings panels are too narrow for that. I'd stick with a single column.

The control scheme description text feels awkward - maybe moving it right so it is clearly indented below the option would help?

I think that it fits better to the left, putting it below the dropdown feels more awkward:

The frame limiter checkbox and slider are really awkward too (the slider modifies the checkbox that is above it)

Yes, this bugs me too. I explored two approaches:

Enable/disable the silder:
https://user-images.githubusercontent.com/1355810/135052112-f385724d-7d06-4b1b-b028-03ae94a7bbcc.mp4

Show/hide the slider:
https://user-images.githubusercontent.com/1355810/135052130-7c97ed43-eb0b-44c7-8587-87697f9271bf.mp4

Can we please reduce the vertical stride of the TD tabs from 50 to 45? 50 feels noticeably wrong to me, 45 seems better and also matches the horizontal button separation we use in other places

Agreed.

[pchote]

The thing that bothers me with the checkboxes is that all the other input types focus their input/attention to the right of the panel, but checkboxes focuses it on the far left, making those tabs feels disjointed.

My first thought was that we could mitigate this by having two checkboxes per row, so at least we have some kind of content in the right half of those rows.

My second thought is that we could instead align the checkboxes to match the dropdowns and sliders:

This is only a problem where there are checkboxes sandwiched between dropdowns, so the advanced panel could keep its checkboxes left aligned. This screenshot also shows a bug: changing the UI Scale makes all the tabs collapse on themselves - DisplaySettingsLogic.RecalculateWidgetLayout will need a hack to skip these like it does for badges.

A more radical option could be to place the labels to the left:

But i don't like how this leaves only a small visible click target to toggle the option.

[dragunoff]

Alright, I see and I agree that the layout can be improved. How about right-aligning all labels:

This has the benefit of bringing the labels closer to the controls. Checkboxes of this kind are a precedent in the OpenRA UI but I don't think they look too out of place. To improve the usability we can make the labels trigger the control that they are describing (like the for attribute in HTML).

An alternative is to make the panel wider, place all labels (except on checkboxes) above the controls and go all out 2-column. Roughly like this screen from BroodWar:

[pchote]

The broodwar approach could potentially work well and IMO is definitely worth at least mockup in our common/TD UI. We could do the same for the lobby options bin, which would let us use 3 columns for dropdowns instead of mixing 2 and 3 columns in the UI.

[dragunoff]

Layout changed to 2-columns:

Also updated the introductory prompts to match:

And a few other things:

• I added the tab container to the hack in DisplaySettingsLogic.RecalculateWidgetLayout.e
• Also fixed a bug with the disabled state of the slider thumb.
• And finally I removed the redundant "This is the default" message for hotkeys. If this is not desired I will drop it.

[dragunoff]

I have some more tweaking to do here so please hold off reviewing for a little while.

[dragunoff]

This is now ready for review.

Updated common game ingame info tabs to match settings layout

Updated lobby options tab layout to match settings layout

[dragunoff]

Update: changed how the settings widget widths and positions are calculated (in YAML). This doesn't alter the appearance, just makes things a little more robust.

[anvilvapre]

Would there be room for a checkbox for GameSettings.EnableDiscordService #19343?

[dragunoff]

EnableDiscordService

Yes, the new layout can accommodate any number of settings widgets. A checkbox for discord seems like a sensible feature but should be added in a follow up PR.

[dragunoff]

Rebased.

[dragunoff]

Rebased after the merge of #19681 so it all comes together.

[pchote]

The darker separator style in RA and (to a lesser extent) TS still feel weird to me, but I imagine i'll get used to them if they go ahead. I do object to these separators having a different style to the separators used in the mission and multiplayer browsers, though. Can we please switch those to the same style, or keep everything using the old style here and open a new PR to update the separators in all four places as a followup?

[pchote]

Perhaps best in a followup PR, but IMO good polish to fix before a release: The labels for the lobby options dropdown buttons should end with a colon to match the settings menu, and be greyed out when disabled (in the ingame menu / for non-admins in the lobby).

[pchote]

LGTM otherwise

[dragunoff]

The darker separator style in RA and (to a lesser extent) TS still feel weird to me, but I imagine i'll get used to them if they go ahead. I do object to these separators having a different style to the separators used in the mission and multiplayer browsers, though. Can we please switch those to the same style, or keep everything using the old style here and open a new PR to update the separators in all four places as a followup?

Agreed. It bugs me too. Let's keep the old style here and defer the new style to a follow up.

Perhaps best in a followup PR, but IMO good polish to fix before a release: The labels for the lobby options dropdown buttons should end with a colon to match the settings menu, and be greyed out when disabled (in the ingame menu / for non-admins in the lobby).

Good catch. I'll add the colons here but leave the greying out to a follow up as it's not so straight forward - we need to establish a link between the label and the dropdown.

Thanks for the review @pchote.

[dragunoff]

Update:

• switched the separator to the old style (button)
• added colons after the labels of lobby dropdowns

[reaperrr]

@pchote not entirely sure, but shouldn't this be Transient Panels?

[pchote]

I think Transients Panel is indeed correct, since this is referring to the new ingame display for transient feedback.

[dragunoff]

It does sound somewhat unclear. Should we change to something like "Show UI Feedback Notifications"? Or add a tooltip description? (not necessarily in this PR)

[pchote]

Show UI Feedback Notifications

👍

[reaperrr]

Sounds good, but I'll merge this first then (there are some other improvements I'd like to see as well, I'll file a follow-up PR or issue about it later).

[reaperrr]

https://github.com/OpenRA/OpenRA/wiki/Changelog-(bleed)/_compare/949e19e2755d36c3db356703dbcdd5100c3af9e1...b03596d690670fe94ebb0f9fbb76a6ed00881bc6