feat(ui): fade the HUD while a full screen view is open (fixes #2092) - #3217
Open
woahwhattheheck wants to merge 1 commit into
Open
feat(ui): fade the HUD while a full screen view is open (fixes #2092)#3217woahwhattheheck wants to merge 1 commit into
woahwhattheheck wants to merge 1 commit into
Conversation
Opening the dash, scoreboard or music player left the queue, side panels and unit hover panel at full strength behind the view, competing with it for attention. Fade those panels back while any of the three is open. The rule keys off each view's own open state (#dash.active, #scoreboard:not(.hide), #musicplayerwrapper:not(.hide)) rather than a class set from JS, so no close path can leave the HUD stuck dim, and every route that opens or closes a view is covered without touching interface.ts. Purely visual: the panels keep their existing pointer-events, and the fade is dropped under prefers-reduced-motion. fixes FreezingMoon#2092
|
@woahwhattheheck is attempting to deploy a commit to the FreezingMoon Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #2092
Opening the dash, scoreboard or music player left the queue, the side panels and the unit hover panel sitting at full strength behind the view, so they kept pulling the eye while you were reading something else.
Approach
One block in
styles.less, no JS:I went this way rather than toggling a class from
interface.tsbecause the views are opened and closed from a lot of places —toggleDash,closeDash,toggleScoreboard,closeScoreboard,toggleMusicPlayer,closeView,closeOpenInterfaceViews, the signal handler, and the Escape path. Keying off each view's own open state means every one of those routes is covered without touching any of them, and there's no way for a close path to leave the HUD stuck dim.#bottompanelcovers the queue and the left/right panels since they nest inside it;#unit-hover-panelis a sibling so it's listed too.Purely visual — I left
pointer-eventsalone so nothing about interaction changes — and the fade is dropped underprefers-reduced-motion.Worth knowing
:has()is what makes the JS-free version possible. It's in every current browser (Chrome 105+, Safari 15.4+, Firefox 121+) and the codebase already leans on comparable things —backdrop-filter,inset, WAAPIcommitStyles. If you support something older than that, say so and I'll switch it to a class toggled frominterface.tsinstead.dashAnimSpeedwhile.activeis still on it, so the HUD comes back up as the dash goes down rather than snapping.Testing
No unit test — it's a stylesheet rule with no JS surface to assert against, and the repo's UI tests drive
Queuedirectly rather than rendering the interface. Worth eyeballing: open each of the three views and check the HUD fades and comes back, including the dash's animated close.