From 2477dc363a56a9d6c0aac5d3751b30270e1effc6 Mon Sep 17 00:00:00 2001 From: Paul Walker Date: Fri, 2 Aug 2024 08:36:14 -0400 Subject: [PATCH 1/2] More header UI theming 1. Add functions to make highlight labels 2. Fix up the VU meter to not look not like the wireframe --- libs/sst/sst-jucegui | 2 +- src-ui/components/HeaderRegion.cpp | 19 ++++++++------- src-ui/theme/ThemeApplier.cpp | 37 ++++++++++++++++++++++++++++++ src-ui/theme/ThemeApplier.h | 5 ++++ 4 files changed, 54 insertions(+), 9 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..7f31ed92 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.setGlyphButtonToAccent(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..39fa0278 100644 --- a/src-ui/theme/ThemeApplier.cpp +++ b/src-ui/theme/ThemeApplier.cpp @@ -139,6 +139,18 @@ void init() sheet_t::addClass(GlyphButton).withBaseClass(jcmp::GlyphButton::Styles::styleClass); } } // namespace header +namespace util +{ +static constexpr sheet_t::Class LabelHighlight("util.label.highlight"); +static constexpr sheet_t::Class GlyphButtonAccent("util.glyphbutton.accent"); +void applyColors(const sheet_t::ptr_t &, const ColorMap &); + +void init() +{ + sheet_t::addClass(LabelHighlight).withBaseClass(jcmp::Label::Styles::styleClass); + sheet_t::addClass(GlyphButtonAccent).withBaseClass(jcmp::GlyphButton::Styles::styleClass); +} +} // namespace util } // namespace detail ThemeApplier::ThemeApplier() @@ -151,6 +163,7 @@ ThemeApplier::ThemeApplier() detail::multi::zone::init(); detail::multi::group::init(); detail::header::init(); + detail::util::init(); detailInitialized = true; } colors = ColorMap::createColorMap(ColorMap::WIREFRAME); @@ -163,6 +176,7 @@ void ThemeApplier::recolorStylesheet(const sst::jucegui::style::StyleSheet::ptr_ detail::multi::zone::applyColors(s, *colors); detail::multi::group::applyColors(s, *colors); detail::header::applyColors(s, *colors); + detail::util::applyColors(s, *colors); } void ThemeApplier::recolorStylesheetWith(std::unique_ptr &&c, const sheet_t::ptr_t &s) @@ -219,6 +233,16 @@ void ThemeApplier::applyHeaderTheme(juce::Component *toThis) map.applyMapTo(toThis); } +void ThemeApplier::setLabelToHighlight(sst::jucegui::style::StyleConsumer *s) +{ + s->setCustomClass(detail::util::LabelHighlight); +} + +void ThemeApplier::setGlyphButtonToAccent(sst::jucegui::style::StyleConsumer *s) +{ + s->setCustomClass(detail::util::GlyphButtonAccent); +} + juce::Font ThemeApplier::interMediumFor(int ht) { static auto interMed = @@ -454,5 +478,18 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols) base->setColour(GlyphButton, jcmp::GlyphButton::Styles::fill_hover, cols.get(ColorMap::bg_3)); } } // 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)); + 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 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..8eee6126 100644 --- a/src-ui/theme/ThemeApplier.h +++ b/src-ui/theme/ThemeApplier.h @@ -32,6 +32,7 @@ #include #include +#include #include "ColorMap.h" @@ -54,6 +55,10 @@ struct ThemeApplier void applyMixerChannelTheme(juce::Component *toThis); void applyHeaderTheme(juce::Component *toThis); + // Some utilities to move single items + void setLabelToHighlight(sst::jucegui::style::StyleConsumer *); + void setGlyphButtonToAccent(sst::jucegui::style::StyleConsumer *); + const std::unique_ptr &colorMap() { return colors; } juce::Font interMediumFor(int ht); From 3976880b9085a9f8df53a82f97cdbf9cba7ba662 Mon Sep 17 00:00:00 2001 From: Paul Walker Date: Fri, 2 Aug 2024 08:53:39 -0400 Subject: [PATCH 2/2] A few more tweaks --- src-ui/components/HeaderRegion.cpp | 2 +- src-ui/theme/ThemeApplier.cpp | 33 +++++++++++++++--------------- src-ui/theme/ThemeApplier.h | 4 ++-- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src-ui/components/HeaderRegion.cpp b/src-ui/components/HeaderRegion.cpp index 7f31ed92..f6458f47 100644 --- a/src-ui/components/HeaderRegion.cpp +++ b/src-ui/components/HeaderRegion.cpp @@ -150,7 +150,7 @@ HeaderRegion::HeaderRegion(SCXTEditor *e) : HasEditor(e) editor->themeApplier.applyHeaderTheme(this); editor->themeApplier.setLabelToHighlight(cpuLevel.get()); editor->themeApplier.setLabelToHighlight(ramLevel.get()); - editor->themeApplier.setGlyphButtonToAccent(scMenu.get()); + editor->themeApplier.applyHeaderSCButtonTheme(scMenu.get()); } HeaderRegion::~HeaderRegion() diff --git a/src-ui/theme/ThemeApplier.cpp b/src-ui/theme/ThemeApplier.cpp index 39fa0278..00c71374 100644 --- a/src-ui/theme/ThemeApplier.cpp +++ b/src-ui/theme/ThemeApplier.cpp @@ -130,26 +130,23 @@ 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"); -static constexpr sheet_t::Class GlyphButtonAccent("util.glyphbutton.accent"); void applyColors(const sheet_t::ptr_t &, const ColorMap &); -void init() -{ - sheet_t::addClass(LabelHighlight).withBaseClass(jcmp::Label::Styles::styleClass); - sheet_t::addClass(GlyphButtonAccent).withBaseClass(jcmp::GlyphButton::Styles::styleClass); -} +void init() { sheet_t::addClass(LabelHighlight).withBaseClass(jcmp::Label::Styles::styleClass); } } // namespace util } // namespace detail @@ -175,7 +172,7 @@ 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); } @@ -238,12 +235,12 @@ void ThemeApplier::setLabelToHighlight(sst::jucegui::style::StyleConsumer *s) s->setCustomClass(detail::util::LabelHighlight); } -void ThemeApplier::setGlyphButtonToAccent(sst::jucegui::style::StyleConsumer *s) +void ThemeApplier::applyHeaderSCButtonTheme(sst::jucegui::style::StyleConsumer *s) { - s->setCustomClass(detail::util::GlyphButtonAccent); + s->setCustomClass(detail::header::GlyphButtonAccent); } -juce::Font ThemeApplier::interMediumFor(int ht) +juce::Font ThemeApplier::interMediumFor(int ht) const { static auto interMed = connectors::resources::loadTypeface("fonts/Inter/static/Inter-Medium.ttf"); @@ -466,16 +463,24 @@ 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 @@ -485,10 +490,6 @@ void applyColors(const sheet_t::ptr_t &base, const ColorMap &cols) { base->setColour(LabelHighlight, jcmp::Label::Styles::labelcolor, cols.get(ColorMap::generic_content_highest)); - 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 util } // namespace detail diff --git a/src-ui/theme/ThemeApplier.h b/src-ui/theme/ThemeApplier.h index 8eee6126..53e05dab 100644 --- a/src-ui/theme/ThemeApplier.h +++ b/src-ui/theme/ThemeApplier.h @@ -54,14 +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 *); - void setGlyphButtonToAccent(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;