ppy
Detach mod customisation area from the footer and replace with an overlay panel display
Prerequisite for integrating the new ScreenFooter component with the existing mod select overlay screens (alongside other sheared overlays).
The current mod customisation area is ingrained underneath the footer. When replacing the overlay's local footer with ScreenFooter, extra work needs to be put into ScreenFooter to work with the mod customisation area as is (especially since ScreenFooter is global).
Instead, this PR replaces the current mod customisation area with an overlay panel view instead, detaching it from the footer completely. Inspired by the reference design.
Preview:
https://github.com/ppy/osu/assets/22781491/76675355-f191-4576-a8f7-43a7f4c53f9b
Sorry but on a literal five minute inspection this is too broken in its current state.
- If tab is pressed when this is expanded and random's seed text box is focused, focus will be taken away from the random textbox which arguably is indesirable.
- Moreover, pressing backspace in the random seed text box instead causes all mods to be deselected. What's worse, re-selecting random after doing that seems to somehow break the textbox so that it can't accept input anymore.
https://github.com/ppy/osu/assets/20418176/22d08310-d216-4a08-8d3d-334c9998c7cb
- 1px masking artifacts on the dropdown when it is collapsed:
- The expandable attribute display can overlap the dropdown and lead to terrible behaviour like having to drag a slider that's obscured by something else:
https://github.com/ppy/osu/assets/20418176/f1682bad-d7b6-4ec3-90c7-732b0a87c4fc
- Dropdowns work terribly with this because you can get into situations wherein you click the header but can't see the actual dropdown choices:
https://github.com/ppy/osu/assets/20418176/07615c4d-8b79-49ad-be41-1d1f194d280a
Sorry but on a literal five minute inspection this is too broken in its current state.
- If tab is pressed when this is expanded and random's seed text box is focused, focus will be taken away from the random textbox which arguably is indesirable.
- Moreover, pressing backspace in the random seed text box instead causes all mods to be deselected. What's worse, re-selecting random after doing that seems to somehow break the textbox so that it can't accept input anymore.
Whoops, I forgot mod settings based on textboxes exist 😅 (I smile, but I know it doesn't age well when TextBox is involved).
- 1px masking artifacts on the dropdown when it is collapsed:
Classic, not sure how I didn't notice that though. I'm gonna have to dig through the existing workarounds we have for this and hope it works.
- The expandable attribute display can overlap the dropdown and lead to terrible behaviour like having to drag a slider that's obscured by something else:
Decreasing the maximum height should be enough to fix this.
- Dropdowns work terribly with this because you can get into situations wherein you click the header but can't see the actual dropdown choices:
Hmm, this is a tough one. I'll try to add special logic to OsuDropdowns so that it searches for a nearest ScrollContainer parent and make sure it's scrolled into view of the dropdown (probably isolated to mod setting dropdowns).
All concerns should be properly resolved now ~~(hope you spend more than five minutes this time >.>)~~.
Better, but I still see various weirdness:
If you open the customisation dropdown first and then try to add a mod preset, the customisation dropdown will close, but if you try to add a mod preset and then open the customisation dropdown, it will not close:
https://github.com/ppy/osu/assets/20418176/61784e34-1697-4318-b75a-60dcf6c2fb2a
I'm honestly not sure what the correct behaviour is here but the order of open should not matter (either both should be allowed to be open at once, or neither, regardless of order).
If you click away from the customisation menu by clicking on a column background, the search box will regain focus on mouse down and then lose it again on mouse up:
https://github.com/ppy/osu/assets/20418176/f351a4fa-0118-41e5-af6a-9360fd5ccee8
Mod hotkeys work with the customisation menu open. The first mod hotkey press will change active mods and as such close the customisation menu, at which point the search will regain focus, and the second mod hotkey press will start inputting search terms into the search box instead:
https://github.com/ppy/osu/assets/20418176/7a26c87d-0f90-4783-8d88-a4886d25d047
If you open the customisation dropdown first and then try to add a mod preset, the customisation dropdown will close, but if you try to add a mod preset and then open the customisation dropdown, it will not close: I'm honestly not sure what the correct behaviour is here but the order of open should not matter (either both should be allowed to be open at once, or neither, regardless of order).
It's better for the mod preset to be closed in this case, this is supposed to just work but the popover container is placed at a level where it cannot notice clicks on the customisation panel header.
If you click away from the customisation menu by clicking on a column background, the search box will regain focus on mouse down and then lose it again on mouse up:
This is a complicated issue caused by the customisation panel hiding on a mouse-down instead of a click. I've made it as such to match with popovers (dismiss on mouse down), but continuing to work with that behaviour while trying to fix issues with search box focus turned out to be a nightmare, so I'll just change the behaviour to hide on a click instead (which entails dimming the mod columns because the user will no longer be able to select a mod with a single click while the customisation panel is open).
Mod hotkeys work with the customisation menu open. The first mod hotkey press will change active mods and as such close the customisation menu, at which point the search will regain focus, and the second mod hotkey press will start inputting search terms into the search box instead:
I'm gonna have to change the customisation panel to be a complete input-blocking overlay container for this one and call it a day.
I've fixed the content overflowing to the border:
| Before | After |
|---|---|
I've kept the +2 on the top, even if it's not needed anymore (because of the fade out changes), as it looks more visually correct to me (i.e. having the header have some depth). Can just remove if you don't agree with me.
| With margin | Without margin |
|---|---|
