Implement a consistent (and purple!) UI theme#5865
Implement a consistent (and purple!) UI theme#5865sturnclaw merged 16 commits intopioneerspacesim:masterfrom
Conversation
Out of scope / off topic, but this makes me think of how this was introduced in #2675. There was basically a disagreement in how it should work.
I'm more biased to the first option, but second option (current master) is no doubt easier for the player. |
|
@bszlrd video could go on youtube. (I wonder if we should distinguish between videos of unmerged stuff "IN DEVELOPMENT: <title> ", and actual merged stuff that can just have normal title?) |
|
Looking good! |
|
This branch is now ready for testing - I've done a pass on all icon buttons (and changed their size in some cases) as well as incorporated the latest icons.svg updates from @bszlrd. I'd appreciate a fairly close look at the entirety of the UI to catch edge cases / broken behaviors (i.e. buttons not working, broken text, scrollbars that weren't there before). |
- ui.invisibleButton exposes the underlying ImGui::InvisibleButton functionality - ui.getButtonColor selects the proper entry from a button color variant table according to the given state flags (useful when implementing a custom button-like widget)
- Allow using ui.invisibleButton with e.g. PressedOnClick or PressedOnDoubleClick
- Remove bright purple/blue backgrounds from all UI screens, replace with dark gray - Normalize all UI elements to use "Pioneer Purple" rather than the various shades of blue from ImGui - Change font color to a very light gray for less eyestrain against the dark background - Fix some issues with semantic names being used to style items that have no relation to the semantic - Remove direct usages of the styleColors objects; colors should go through the semantic aliases instead
Amend accent and danger colors: - Improve consistency of color breakpoints - Reduce oversaturated / overbright accent colors - Better distribution of reds for danger color - Add generic semantic color names based partially on Material Design. Add alternate primary colors for foreground elements: - Used for items like checkmarks and slider grabs - Can also be used for text if needed Use color variant objects for item cards rather than individual colors.
- Use existing popup / button colors to render radial menu widget - Remove hardcoded colors in C++
- Responsible for drawing glyph-based icon buttons - Effectively the same as a regular ImGui::Button(), but takes a separate display string and ID string
- Instead of passing in the size of the icon glyph and the size of the padding, all icon button widgets now take the total size of the button - The size of the icon drawn on the button is computed from an explicit or implicit padding value
- Pass explicit id parameter rather than appending to tooltip - Use full size of button rather than computing icon size + padding - Use new increase_1 / decrease_1 icon names rather than time buttons
- Add filesystem related icons - Add increase/decrease/reset icons - Add plus / minus / close icons ui: deduplicate icons in icon sheet - Normalize icon usage to the first time defined, free up duplicate icon slots for future icons
- Deprecate use of retrograde icon as general-purpose close/delete icon - Replace current_line icon with actual minus icon - Replace large square "plus" with actual plus icon
sturnclaw
force-pushed
the
ui-theme-purple
branch
from
7ff105e to
881597d
Compare
|
I have one final TODO item to address, and then I'd like to start looking at merging this PR. Anyone willing to click around the UI and look out for bugs would be much appreciated. |
|
I gave this a spin, below are just the thoughts that popped into my mind when I clicked through it.
|
Come to think of it, the "Language (restart game to apply)" line has always looked like it's part of the table list. Perhaps this should be blue, if possible? |
Existing issue. That screen needs to be re-worked though and should be quick to do.
Yes, the box indicates this is the selected crew member - the menu supports multiple crew members in a starting preset. It's already interactable, just doesn't render a hover effect.
Default magnification is exactly the same. You've scrolled in on the ship spinner and zoomed in on the ship. Existing issue.
Also an existing issue! 😄 I'll try to address problems 1 and 4 if I can. The other two are non-issues or out-of-scope as far as I see it.
Will try to address this as well. |
- Allows configuring the background color rendered under table rows for highlight or selection management - Our ImGui version does not (yet) provide a way to query if the current table row is hovered to draw a highlight on hover. Will be a candidate for future inclusion or a custom function peeking into ImGui internals.
- Render a dark grey background on inactive BBS entries instead of purple; better communicates that those entries are not available to the player at this time. - When the game is paused, dim the entire list of BBS entries and draw an indicator over the list.
- Helper to use the ImGui internal horizontal layout mode (used in menu bars) - Implicitly calls ui.sameLine() after every submitted item - ui.separator draws a vertical separator line when submitted within a horizontal group
- Add vertical separator to Economy / Cargo info-view tab - Adjust scroll area and font size to language selection
|
All TODOs and review feedback addressed. Going to merge this PR as I'm satisfied it's had an appropriate amount of testing and is quite large already. Ignoring the SVG changes, this PR is +840 insertions, -470 deletions. |
|
Post-merge thought: there's no difference in blue tone between selected tab and other/not-selected. I wonder if it might be of value to crank up the highlight of the selected tab? Or we only want it highlighted when mouse-over? |
3 participants
After much frustration with the inconsistent colors of our existing theme (and the go-ahead from our resident UI designer @bszlrd), I've unified the theme colors used in the game's interface to a consistent UI style.
There are two major changes made by this PR:
Here's a quick clickthrough of the UI with the new theme:
2024-07-15.03-03-11.mp4
(Music: Stellardrone - To The Great Beyond)
There are still a few TODOs before this should be merged: