Skip to content

Make slider colors themable #20308

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hrydgard merged 1 commit into from
May 13, 2025
Merged

Make slider colors themable #20308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 24 additions & 10 deletions Common/UI/View.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1590,20 +1590,27 @@ void Slider::Clamp() {

void Slider::Draw(UIContext &dc) {
bool focus = HasFocus();
uint32_t linecolor = dc.theme->itemStyle.fgColor;
Style knobStyle = (down_ || focus) ? dc.theme->itemStyle : dc.theme->popupStyle;
uint32_t sliderColor;

if (down_) {
sliderColor = popupStyle_ ? dc.theme->popupSliderFocusedColor : dc.theme->itemDownStyle.fgColor;
} else if (focus) {
sliderColor = popupStyle_ ? dc.theme->popupSliderFocusedColor : dc.theme->itemFocusedStyle.fgColor;
} else {
sliderColor = popupStyle_ ? dc.theme->popupSliderColor : dc.theme->itemStyle.fgColor;
}

float knobX = ((float)(*value_) - minValue_) / (maxValue_ - minValue_) * (bounds_.w - paddingLeft_ - paddingRight_) + (bounds_.x + paddingLeft_);
dc.FillRect(Drawable(linecolor), Bounds(bounds_.x + paddingLeft_, bounds_.centerY() - 2, knobX - (bounds_.x + paddingLeft_), 4));
dc.FillRect(Drawable(sliderColor), Bounds(bounds_.x + paddingLeft_, bounds_.centerY() - 2, knobX - (bounds_.x + paddingLeft_), 4));
dc.FillRect(Drawable(0xFF808080), Bounds(knobX, bounds_.centerY() - 2, (bounds_.x + bounds_.w - paddingRight_ - knobX), 4));
dc.Draw()->DrawImage(dc.theme->sliderKnob, knobX, bounds_.centerY(), 1.0f, knobStyle.fgColor, ALIGN_CENTER);
dc.Draw()->DrawImage(dc.theme->sliderKnob, knobX, bounds_.centerY(), 1.0f, sliderColor, ALIGN_CENTER);
char temp[64];
if (showPercent_)
snprintf(temp, sizeof(temp), "%d%%", *value_);
else
snprintf(temp, sizeof(temp), "%d", *value_);
dc.SetFontStyle(dc.theme->uiFont);
dc.DrawText(temp, bounds_.x2() - 22, bounds_.centerY(), dc.theme->popupStyle.fgColor, ALIGN_CENTER | FLAG_DYNAMIC_ASCII);
dc.DrawText(temp, bounds_.x2() - 22, bounds_.centerY(), sliderColor, ALIGN_CENTER | FLAG_DYNAMIC_ASCII);
}

std::string Slider::DescribeText() const {
Expand Down Expand Up @@ -1743,17 +1750,24 @@ void SliderFloat::Clamp() {

void SliderFloat::Draw(UIContext &dc) {
bool focus = HasFocus();
uint32_t linecolor = dc.theme->itemStyle.fgColor;
Style knobStyle = (down_ || focus) ? dc.theme->itemStyle : dc.theme->popupStyle;
uint32_t sliderColor;

if (down_) {
sliderColor = popupStyle_ ? dc.theme->popupSliderFocusedColor : dc.theme->itemDownStyle.fgColor;
} else if (focus) {
sliderColor = popupStyle_ ? dc.theme->popupSliderFocusedColor : dc.theme->itemFocusedStyle.fgColor;
} else {
sliderColor = popupStyle_ ? dc.theme->popupSliderColor : dc.theme->itemStyle.fgColor;
}

float knobX = (*value_ - minValue_) / (maxValue_ - minValue_) * (bounds_.w - paddingLeft_ - paddingRight_) + (bounds_.x + paddingLeft_);
dc.FillRect(Drawable(linecolor), Bounds(bounds_.x + paddingLeft_, bounds_.centerY() - 2, knobX - (bounds_.x + paddingLeft_), 4));
dc.FillRect(Drawable(sliderColor), Bounds(bounds_.x + paddingLeft_, bounds_.centerY() - 2, knobX - (bounds_.x + paddingLeft_), 4));
dc.FillRect(Drawable(0xFF808080), Bounds(knobX, bounds_.centerY() - 2, (bounds_.x + bounds_.w - paddingRight_ - knobX), 4));
dc.Draw()->DrawImage(dc.theme->sliderKnob, knobX, bounds_.centerY(), 1.0f, knobStyle.fgColor, ALIGN_CENTER);
dc.Draw()->DrawImage(dc.theme->sliderKnob, knobX, bounds_.centerY(), 1.0f, sliderColor, ALIGN_CENTER);
char temp[64];
snprintf(temp, sizeof(temp), "%0.2f", *value_);
dc.SetFontStyle(dc.theme->uiFont);
dc.DrawText(temp, bounds_.x2() - 22, bounds_.centerY(), dc.theme->popupStyle.fgColor, ALIGN_CENTER);
dc.DrawText(temp, bounds_.x2() - 22, bounds_.centerY(), sliderColor, ALIGN_CENTER);
}

std::string SliderFloat::DescribeText() const {
Expand Down
2 changes: 2 additions & 0 deletions Common/UI/View.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,8 @@ struct Theme {

uint32_t backgroundColor;
uint32_t scrollbarColor;
uint32_t popupSliderColor;
uint32_t popupSliderFocusedColor;
};

// The four cardinal directions should be enough, plus Prev/Next in "element order".
Expand Down
7 changes: 7 additions & 0 deletions UI/Theme.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ struct ThemeInfo {
uint32_t uCollapsibleHeaderStyleBg = 0x55000000;
uint32_t uBackgroundColor = 0xFF754D24;
uint32_t uScrollbarColor = 0x80FFFFFF;
uint32_t uPopupSliderColor = 0xFFFFFFFF;
uint32_t uPopupSliderFocusedColor = 0xFFEDC24C;

std::string sUIAtlas = "ui_atlas";

Expand Down Expand Up @@ -154,6 +156,8 @@ static void LoadThemeInfo(const std::vector<Path> &directories) {
section.Get("CollapsibleHeaderStyleBg", &info.uCollapsibleHeaderStyleBg, info.uItemStyleBg);
section.Get("BackgroundColor", &info.uBackgroundColor, info.uBackgroundColor);
section.Get("ScrollbarColor", &info.uScrollbarColor, info.uScrollbarColor);
section.Get("PopupSliderColor", &info.uPopupSliderColor, info.uPopupSliderColor);
section.Get("PopupSliderFocusedColor", &info.uPopupSliderFocusedColor, info.uPopupSliderFocusedColor);

std::string tmpPath;
section.Get("UIAtlas", &tmpPath, "");
Expand Down Expand Up @@ -263,6 +267,9 @@ void UpdateTheme(UIContext *ctx) {
ui_theme.backgroundColor = themeInfo.uBackgroundColor;
ui_theme.scrollbarColor = themeInfo.uScrollbarColor;

ui_theme.popupSliderColor = themeInfo.uPopupSliderColor;
ui_theme.popupSliderFocusedColor = themeInfo.uPopupSliderFocusedColor;

// Load any missing atlas metadata (the images are loaded from UIContext).
LoadAtlasMetadata(ui_atlas, (themeInfo.sUIAtlas + ".meta").c_str(), true);
#if !(PPSSPP_PLATFORM(WINDOWS) || PPSSPP_PLATFORM(ANDROID))
Expand Down
4 changes: 4 additions & 0 deletions assets/themes/defaultthemes.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ TooltipStyleFg = "#FFFFFFFF"
TooltipStyleBg = "#303030C0"
BackgroundColor = "#244D75FF"
ScrollbarColor = "#FFFFFF80"
PopupSliderColor = "#FFFFFFFF"
PopupSliderFocusedColor = "#4CC2EDFF"
UIAtlas = "../ui_atlas"

# Colors are either in the format "#RGBA" or 0xABGR (e.g. green is "#00FF00FF" or 0xFF00FF00)
Expand Down Expand Up @@ -52,4 +54,6 @@ TooltipStyleFg = "#FFFFFFFF"
TooltipStyleBg = "#303030C0"
BackgroundColor = "#000000FF"
ScrollbarColor = "#FFFFFF80"
PopupSliderColor = "#FFFFFFFF"
PopupSliderFocusedColor = "#3799bdFF"
UIAtlas = "../ui_atlas"
Loading