From ae2f50ce5a54def7abe54885df122a16bff3a0e9 Mon Sep 17 00:00:00 2001 From: Paul Date: Fri, 2 Aug 2024 09:26:12 -0400 Subject: [PATCH] More header UI theming (#1061) 1. Add functions to make highlight labels 2. Fix up the VU meter to not look not like the wireframe 3. Some other tweaks to track closer to wf --- libs/sst/sst-jucegui | 2 +- src-ui/components/HeaderRegion.cpp | 19 ++++++------ src-ui/theme/ThemeApplier.cpp | 46 +++++++++++++++++++++++++++--- src-ui/theme/ThemeApplier.h | 7 ++++- 4 files changed, 60 insertions(+), 14 deletions(-) diff --git a/libs/sst/sst-jucegui b/libs/sst/sst-jucegui index fd58c831..8edbbc5b 160000 --- a/libs/sst/sst-jucegui +++ b/libs/sst/sst-jucegui @@ -1 +1 @@ -Subproject commit fd58c8315918a6b36f21657b94dc907cb9e5dfe1 +Subproject commit 8edbbc5bdeab3ad74f57d39fed07f8bb0d92aef8 diff --git a/src-ui/components/HeaderRegion.cpp b/src-ui/components/HeaderRegion.cpp index 250b46f1..f6458f47 100644 --- a/src-ui/components/HeaderRegion.cpp +++ b/src-ui/components/HeaderRegion.cpp @@ -148,6 +148,9 @@ HeaderRegion::HeaderRegion(SCXTEditor *e) : HasEditor(e) addAndMakeVisible(*ramLevel); editor->themeApplier.applyHeaderTheme(this); + editor->themeApplier.setLabelToHighlight(cpuLevel.get()); + editor->themeApplier.setLabelToHighlight(ramLevel.get()); + editor->themeApplier.applyHeaderSCButtonTheme(scMenu.get()); } HeaderRegion::~HeaderRegion() @@ -174,22 +177,22 @@ void HeaderRegion::resized() scMenu->setBounds(b.withTrimmedLeft(1148).withWidth(24)); - cpuLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(12)); - ramLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(12).translated(0, 12)); + cpuLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(14)); + ramLabel->setBounds(b.withTrimmedLeft(979).withWidth(20).withHeight(14).translated(0, 14)); - cpuLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(12)); - ramLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(12).translated(0, 12)); + cpuLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(14)); + ramLevel->setBounds(b.withTrimmedLeft(1002).withWidth(35).withHeight(14).translated(0, 14)); - vuMeter->setBounds(b.withTrimmedLeft(1048).withWidth(96)); + vuMeter->setBounds(b.withTrimmedLeft(1048).withWidth(96).withHeight(28)); } void HeaderRegion::setVULevel(float L, float R) { if (vuMeter) { - float ub = 1.4f; - auto nvuL = sqrt(std::clamp(L, 0.f, ub)) / sqrt(ub); - auto nvuR = sqrt(std::clamp(R, 0.f, ub)) / sqrt(ub); + float ub = 8.f; + auto nvuL = sqrt(std::clamp(L, 0.f, ub)); // sqrt(ub); + auto nvuR = sqrt(std::clamp(R, 0.f, ub)); // sqrt(ub); if (std::fabs(nvuL - vuLevel[0]) + std::fabs(nvuR - vuLevel[1]) > 1e-6) { diff --git a/src-ui/theme/ThemeApplier.cpp b/src-ui/theme/ThemeApplier.cpp index b483528a..00c71374 100644 --- a/src-ui/theme/ThemeApplier.cpp +++ b/src-ui/theme/ThemeApplier.cpp @@ -130,15 +130,24 @@ static constexpr sheet_t::Class TextPushButton{"header.textbutton"}; static constexpr sheet_t::Class ToggleButton{"header.togglebutton"}; static constexpr sheet_t::Class MenuButton{"header.menubutton"}; static constexpr sheet_t::Class GlyphButton{"header.menubutton"}; -void applyColors(const sheet_t::ptr_t &, const ColorMap &); +static constexpr sheet_t::Class GlyphButtonAccent{"header.menubutton.accent"}; +void applyColorsAndFonts(const sheet_t::ptr_t &, const ColorMap &, const ThemeApplier &); void init() { sheet_t::addClass(TextPushButton).withBaseClass(jcmp::TextPushButton::Styles::styleClass); sheet_t::addClass(ToggleButton).withBaseClass(jcmp::ToggleButton::Styles::styleClass); sheet_t::addClass(MenuButton).withBaseClass(jcmp::MenuButton::Styles::styleClass); sheet_t::addClass(GlyphButton).withBaseClass(jcmp::GlyphButton::Styles::styleClass); + sheet_t::addClass(GlyphButtonAccent).withBaseClass(GlyphButton); } } // namespace header +namespace util +{ +static constexpr sheet_t::Class LabelHighlight("util.label.highlight"); +void applyColors(const sheet_t::ptr_t &, const ColorMap &); + +void init() { sheet_t::addClass(LabelHighlight).withBaseClass(jcmp::Label::Styles::styleClass); } +} // namespace util } // namespace detail ThemeApplier::ThemeApplier() @@ -151,6 +160,7 @@ ThemeApplier::ThemeApplier() detail::multi::zone::init(); detail::multi::group::init(); detail::header::init(); + detail::util::init(); detailInitialized = true; } colors = ColorMap::createColorMap(ColorMap::WIREFRAME); @@ -162,7 +172,8 @@ void ThemeApplier::recolorStylesheet(const sst::jucegui::style::StyleSheet::ptr_ detail::multi::applyColors(s, *colors); detail::multi::zone::applyColors(s, *colors); detail::multi::group::applyColors(s, *colors); - detail::header::applyColors(s, *colors); + detail::header::applyColorsAndFonts(s, *colors, *this); + detail::util::applyColors(s, *colors); } void ThemeApplier::recolorStylesheetWith(std::unique_ptr &&c, const sheet_t::ptr_t &s) @@ -219,7 +230,17 @@ void ThemeApplier::applyHeaderTheme(juce::Component *toThis) map.applyMapTo(toThis); } -juce::Font ThemeApplier::interMediumFor(int ht) +void ThemeApplier::setLabelToHighlight(sst::jucegui::style::StyleConsumer *s) +{ + s->setCustomClass(detail::util::LabelHighlight); +} + +void ThemeApplier::applyHeaderSCButtonTheme(sst::jucegui::style::StyleConsumer *s) +{ + s->setCustomClass(detail::header::GlyphButtonAccent); +} + +juce::Font ThemeApplier::interMediumFor(int ht) const { static auto interMed = connectors::resources::loadTypeface("fonts/Inter/static/Inter-Medium.ttf"); @@ -442,17 +463,34 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols) } // namespace multi namespace header { -void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols) +void applyColorsAndFonts(const sheet_t::ptr_t &base, const ColorMap &cols, const ThemeApplier &t) { base->setColour(TextPushButton, jcmp::TextPushButton::Styles::fill, cols.get(ColorMap::bg_2)); base->setColour(TextPushButton, jcmp::TextPushButton::Styles::fill_hover, cols.get(ColorMap::bg_3)); + base->setFont(TextPushButton, jcmp::TextPushButton::Styles::labelfont, t.interMediumFor(14)); base->setColour(ToggleButton, jcmp::ToggleButton::Styles::fill, cols.get(ColorMap::bg_2)); base->setColour(ToggleButton, jcmp::ToggleButton::Styles::fill_hover, cols.get(ColorMap::bg_3)); + base->setFont(ToggleButton, jcmp::ToggleButton::Styles::labelfont, t.interMediumFor(14)); base->setColour(MenuButton, jcmp::MenuButton::Styles::fill, cols.get(ColorMap::bg_2)); + base->setFont(MenuButton, jcmp::MenuButton::Styles::labelfont, t.interMediumFor(14)); base->setColour(GlyphButton, jcmp::GlyphButton::Styles::fill, cols.get(ColorMap::bg_2)); base->setColour(GlyphButton, jcmp::GlyphButton::Styles::fill_hover, cols.get(ColorMap::bg_3)); + + base->setColour(GlyphButtonAccent, jcmp::GlyphButton::Styles::labelcolor, + cols.get(ColorMap::accent_1a)); + base->setColour(GlyphButtonAccent, jcmp::GlyphButton::Styles::labelcolor_hover, + cols.get(ColorMap::accent_1a)); } } // namespace header + +namespace util +{ +void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols) +{ + base->setColour(LabelHighlight, jcmp::Label::Styles::labelcolor, + cols.get(ColorMap::generic_content_highest)); +} +} // namespace util } // namespace detail } // namespace scxt::ui::theme \ No newline at end of file diff --git a/src-ui/theme/ThemeApplier.h b/src-ui/theme/ThemeApplier.h index c8f50787..53e05dab 100644 --- a/src-ui/theme/ThemeApplier.h +++ b/src-ui/theme/ThemeApplier.h @@ -32,6 +32,7 @@ #include #include +#include #include "ColorMap.h" @@ -53,10 +54,14 @@ struct ThemeApplier void applyMixerEffectTheme(juce::Component *toThis); void applyMixerChannelTheme(juce::Component *toThis); void applyHeaderTheme(juce::Component *toThis); + void applyHeaderSCButtonTheme(sst::jucegui::style::StyleConsumer *); + + // Some utilities to move single items + void setLabelToHighlight(sst::jucegui::style::StyleConsumer *); const std::unique_ptr &colorMap() { return colors; } - juce::Font interMediumFor(int ht); + juce::Font interMediumFor(int ht) const; protected: std::unique_ptr colors;