From db370320074aa5f20c3367d3248c0c7baa284267 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20M=2E=20R=2E=20Guimar=C3=A3es?= <100025288+luismrguimaraes@users.noreply.github.com> Date: Thu, 30 May 2024 13:13:35 +0100 Subject: [PATCH] UI colours and buttons adjustment (#90) * adjust multiswitch and push buttons fill * more colour adjustments --- include/sst/jucegui/components/BaseStyles.h | 4 +- .../sst/jucegui/components/ButtonPainter.h | 19 +---- include/sst/jucegui/components/MenuButton.h | 4 +- src/sst/jucegui/components/HSlider.cpp | 4 +- src/sst/jucegui/components/HSliderFilled.cpp | 7 +- .../jucegui/components/JogUpDownButton.cpp | 9 ++- src/sst/jucegui/components/MenuButton.cpp | 7 +- src/sst/jucegui/components/MultiSwitch.cpp | 77 +++++++++---------- src/sst/jucegui/components/ToggleButton.cpp | 4 +- src/sst/jucegui/components/VSlider.cpp | 16 ++-- 10 files changed, 64 insertions(+), 87 deletions(-) diff --git a/include/sst/jucegui/components/BaseStyles.h b/include/sst/jucegui/components/BaseStyles.h index d34e38f..59b50ae 100644 --- a/include/sst/jucegui/components/BaseStyles.h +++ b/include/sst/jucegui/components/BaseStyles.h @@ -81,13 +81,15 @@ struct ValueBearing PROP_HOVER(value); PROP(valuelabel); PROP_HOVER(valuelabel); + PROP(valuebg); static void initialize() { style::StyleSheet::addClass(styleClass) .withProperty(value) .withProperty(value_hover) .withProperty(valuelabel) - .withProperty(valuelabel_hover); + .withProperty(valuelabel_hover) + .withProperty(valuebg); } }; diff --git a/include/sst/jucegui/components/ButtonPainter.h b/include/sst/jucegui/components/ButtonPainter.h index 9e5d436..72180a6 100644 --- a/include/sst/jucegui/components/ButtonPainter.h +++ b/include/sst/jucegui/components/ButtonPainter.h @@ -57,8 +57,6 @@ template void paintButtonBG(T *that, juce::Graphics &g) g.setGradientFill(gr); g.fillRoundedRectangle(b, rectCorner); - g.setColour(that->getColour(T::Styles::outline)); - g.drawRoundedRectangle(b, rectCorner, 1); } // Only call this in the 'on' state @@ -67,27 +65,16 @@ template void paintButtonOnValueBG(T *that, juce::Graphics &g) float rectCorner = 1.5; auto b = that->getLocalBounds().reduced(1).toFloat(); - auto bg = that->getColour(T::Styles::value); + auto bg = that->getColour(T::Styles::fill); if (that->isHovered) { - bg = that->getColour(T::Styles::value_hover); + bg = that->getColour(T::Styles::fill_hover); } - g.setColour(bg); g.fillRoundedRectangle(b, rectCorner); - auto gr = juce::ColourGradient::vertical(bg.withAlpha(0.f), that->getHeight() * 0.6, - bg.brighter(0.3), that->getHeight()); - g.setGradientFill(gr); - g.fillRoundedRectangle(b, rectCorner); - - gr = juce::ColourGradient::vertical(bg.darker(0.5), 0, bg.withAlpha(0.f), - that->getHeight() * 0.2); - g.setGradientFill(gr); - g.fillRoundedRectangle(b, rectCorner); - - g.setColour(that->getColour(T::Styles::outline)); + g.setColour(that->getColour(T::Styles::value)); g.drawRoundedRectangle(b, rectCorner, 1); } } // namespace sst::jucegui::components diff --git a/include/sst/jucegui/components/MenuButton.h b/include/sst/jucegui/components/MenuButton.h index 58aa72c..1d0ca56 100644 --- a/include/sst/jucegui/components/MenuButton.h +++ b/include/sst/jucegui/components/MenuButton.h @@ -37,7 +37,7 @@ namespace sst::jucegui::components template struct MenuButtonPainter : public style::StyleConsumer, public style::SettingsConsumer { - struct Styles : base_styles::Outlined, base_styles::BaseLabel + struct Styles : base_styles::BaseLabel, base_styles::PushButton { SCLASS(menubutton); @@ -46,8 +46,8 @@ struct MenuButtonPainter : public style::StyleConsumer, public style::SettingsCo static void initialize() { style::StyleSheet::addClass(styleClass) - .withBaseClass(base_styles::Outlined::styleClass) .withBaseClass(base_styles::BaseLabel::styleClass) + .withBaseClass(base_styles::PushButton::styleClass) .withProperty(menuarrow_hover); } }; diff --git a/src/sst/jucegui/components/HSlider.cpp b/src/sst/jucegui/components/HSlider.cpp index b273d15..33a19b1 100644 --- a/src/sst/jucegui/components/HSlider.cpp +++ b/src/sst/jucegui/components/HSlider.cpp @@ -79,9 +79,7 @@ void HSlider::paint(juce::Graphics &g) if (r.getY() > newY) r = r.withY(newY); } - g.setColour(getColour(Styles::outline)); - g.fillRoundedRectangle(r.toFloat(), gutterheight * 0.25); - + if (isHovered) g.setColour(getColour(Styles::gutter_hover)); else diff --git a/src/sst/jucegui/components/HSliderFilled.cpp b/src/sst/jucegui/components/HSliderFilled.cpp index 4dd756a..0b1848b 100644 --- a/src/sst/jucegui/components/HSliderFilled.cpp +++ b/src/sst/jucegui/components/HSliderFilled.cpp @@ -43,10 +43,7 @@ void HSliderFilled::paint(juce::Graphics &g) auto o = b.getHeight() - gutterheight; auto r = getLocalBounds().toFloat(); - auto rectRad = 2; - - g.setColour(getColour(Styles::outline)); - g.fillRoundedRectangle(r.toFloat(), rectRad); + auto rectRad = 5; if (isHovered) g.setColour(getColour(Styles::gutter_hover)); @@ -81,7 +78,7 @@ void HSliderFilled::paint(juce::Graphics &g) g.setColour(getColour(Styles::value_hover)); else g.setColour(getColour(Styles::value)); - g.fillRoundedRectangle(val, rectRad); + g.fillRect(val); } else { diff --git a/src/sst/jucegui/components/JogUpDownButton.cpp b/src/sst/jucegui/components/JogUpDownButton.cpp index 760083d..4318c17 100644 --- a/src/sst/jucegui/components/JogUpDownButton.cpp +++ b/src/sst/jucegui/components/JogUpDownButton.cpp @@ -35,7 +35,8 @@ void JogUpDownButton::paint(juce::Graphics &g) auto b = getLocalBounds().reduced(1).toFloat(); - auto ol = getColour(Styles::brightoutline); + //auto ol = getColour(Styles::brightoutline); + auto bg = getColour(Styles::fill); auto tx = getColour(Styles::labelcolor); auto ar = tx; auto har = ar; @@ -47,7 +48,7 @@ void JogUpDownButton::paint(juce::Graphics &g) if (!isEnabled()) { - g.setColour(ol.withAlpha(0.5f)); + g.setColour(bg.withAlpha(0.5f)); g.drawRoundedRectangle(b, rectCorner, 1); auto col = har.withAlpha(0.5f); @@ -59,8 +60,8 @@ void JogUpDownButton::paint(juce::Graphics &g) return; } - g.setColour(ol); - g.drawRoundedRectangle(b, rectCorner, 1); + g.setColour(bg); + g.fillRoundedRectangle(b, rectCorner); if (!data) return; diff --git a/src/sst/jucegui/components/MenuButton.cpp b/src/sst/jucegui/components/MenuButton.cpp index 75bfd9f..ecaa61f 100644 --- a/src/sst/jucegui/components/MenuButton.cpp +++ b/src/sst/jucegui/components/MenuButton.cpp @@ -31,7 +31,7 @@ void MenuButtonPainter::paintMenuButton(juce::Graphics &g, const std::string auto b = that->getLocalBounds().reduced(1).toFloat(); - auto ol = getColour(Styles::brightoutline); + auto bg = getColour(Styles::fill); auto tx = getColour(Styles::labelcolor); auto ar = tx; if (that->isHovered) @@ -39,9 +39,8 @@ void MenuButtonPainter::paintMenuButton(juce::Graphics &g, const std::string tx = getColour(Styles::labelcolor_hover); ar = getColour(Styles::menuarrow_hover); } - - g.setColour(ol); - g.drawRoundedRectangle(b, rectCorner, 1); + g.setColour(bg); + g.fillRoundedRectangle(b, rectCorner); g.setFont(getFont(Styles::labelfont)); g.setColour(tx); diff --git a/src/sst/jucegui/components/MultiSwitch.cpp b/src/sst/jucegui/components/MultiSwitch.cpp index 41e530c..5ce31d6 100644 --- a/src/sst/jucegui/components/MultiSwitch.cpp +++ b/src/sst/jucegui/components/MultiSwitch.cpp @@ -58,21 +58,6 @@ void MultiSwitch::paint(juce::Graphics &g) g.setColour(bg); g.fillRoundedRectangle(bgb, rectCorner); - g.setColour(getColour(Styles::outline)); - g.drawRoundedRectangle(bgb, rectCorner, 1); - - for (int i = 1; i < nItems; ++i) - { - juce::Rectangle rule; - if (direction == VERTICAL) - rule = b.toFloat().reduced(5, 0).withY(h * i - 0.5).withHeight(1); - else - rule = b.toFloat().reduced(0, 2).withX(h * i - 0.5).withWidth(1); - - g.setColour(getColour(Styles::outline)); - g.fillRect(rule); - } - for (int i = 0; i < nItems; ++i) { juce::Rectangle txt, txtbg; @@ -80,13 +65,12 @@ void MultiSwitch::paint(juce::Graphics &g) if (direction == VERTICAL) { txt = b.toFloat().withHeight(h).translated(0, h * i); - txtbg = - txt.reduced(1, i == 0 ? 1 : 0).withTrimmedBottom(1 + (i != 0 ? 0.5f : 0.0f)); + txtbg = txt; } else { txt = b.toFloat().withWidth(h).translated(h * i, 0); - txtbg = txt.reduced((i == 0 ? 1 : 0), 1).withTrimmedRight(i == nItems - 1 ? 1 : 0); + txtbg = txt; } bool isH; @@ -98,38 +82,49 @@ void MultiSwitch::paint(juce::Graphics &g) // Draw the background if (i == data->getValue() - data->getMin()) { - if (isH) - g.setColour(getColour(Styles::value_hover)); - else - g.setColour(getColour(Styles::value)); - g.fillRoundedRectangle(txtbg, rectCorner - 1); - } - else if (isH) - { - g.setColour(getColour(Styles::unselected_hover)); - g.fillRoundedRectangle(txtbg, rectCorner - 1); - } - - if (i == data->getValue() - data->getMin()) - { - g.setColour(getColour(Styles::valuelabel)); - if (isH) - { - g.setColour(getColour(Styles::valuelabel_hover)); - } + // Selected option + g.setColour(getColour(Styles::valuebg)); + g.fillRoundedRectangle(txtbg, rectCorner); + + // Text + g.setColour(getColour(Styles::value)); } - else - { - g.setColour(getColour(Styles::labelcolor)); + else{ if (isH) { + g.setColour(getColour(Styles::unselected_hover)); + g.fillRoundedRectangle(txtbg, rectCorner); g.setColour(getColour(Styles::labelcolor_hover)); } + else{ + //g.setColour(getColour(Styles::background)); + //g.fillRoundedRectangle(txtbg, rectCorner); + g.setColour(getColour(Styles::labelcolor)); + } + } g.setFont(getFont(Styles::labelfont)); g.drawText(data->getValueAsStringFor(i + data->getMin()), txt, - juce::Justification::centred); + juce::Justification::centred); } + + for (int i = 1; i < nItems; ++i) + { + break; + + juce::Rectangle rule; + if (direction == VERTICAL) + rule = b.toFloat().withY(h * i + 0.5).withHeight(1); + else + rule = b.toFloat().withX(h * i + 0.5).withWidth(1); + + g.setColour(getColour(Styles::outline)); + g.fillRect(rule); + } + + // background outline + g.setColour(getColour(Styles::outline)); + g.drawRoundedRectangle(bgb, rectCorner -1, 1); } } diff --git a/src/sst/jucegui/components/ToggleButton.cpp b/src/sst/jucegui/components/ToggleButton.cpp index 016898d..dfb53a3 100644 --- a/src/sst/jucegui/components/ToggleButton.cpp +++ b/src/sst/jucegui/components/ToggleButton.cpp @@ -51,14 +51,14 @@ void ToggleButton::paint(juce::Graphics &g) if (isHovered) { if (v) - g.setColour(getColour(Styles::valuelabel_hover)); + g.setColour(getColour(Styles::value_hover)); else g.setColour(getColour(Styles::labelcolor_hover)); } else { if (v) - g.setColour(getColour(Styles::valuelabel)); + g.setColour(getColour(Styles::value)); else g.setColour(getColour(Styles::labelcolor)); } diff --git a/src/sst/jucegui/components/VSlider.cpp b/src/sst/jucegui/components/VSlider.cpp index 696006c..3caa599 100644 --- a/src/sst/jucegui/components/VSlider.cpp +++ b/src/sst/jucegui/components/VSlider.cpp @@ -44,14 +44,12 @@ void VSlider::paint(juce::Graphics &g) .withTrimmedTop(hanRadius + 2) .withTrimmedBottom(hanRadius + 2) .toFloat(); - g.setColour(getColour(Styles::outline)); - g.fillRoundedRectangle(r.reduced(1).toFloat(), gutterwidth * 0.25); g.setColour(getColour(Styles::gutter)); if (isHovered) g.setColour(getColour(Styles::gutter_hover)); auto gutter = r.reduced(1).toFloat(); - g.fillRoundedRectangle(gutter.reduced(1), gutterwidth * 0.25); + g.fillRoundedRectangle(gutter.reduced(1), 0); if (!isEnabled()) return; @@ -59,12 +57,12 @@ void VSlider::paint(juce::Graphics &g) if (modulationDisplay == FROM_ACTIVE) { g.setColour(getColour(Styles::modulated_by_selected)); - g.fillRoundedRectangle(gutter.reduced(2), gutterwidth * 0.25); + g.fillRoundedRectangle(gutter.reduced(2), 0); } else if (modulationDisplay == FROM_OTHER) { g.setColour(getColour(Styles::modulated_by_other)); - g.fillRoundedRectangle(gutter.reduced(2), gutterwidth * 0.25); + g.fillRoundedRectangle(gutter.reduced(2), 0); } auto v = continuous()->getValue01(); @@ -83,13 +81,13 @@ void VSlider::paint(juce::Graphics &g) std::swap(t, b); auto val = gutter.withTop(t).withBottom(b); g.setColour(valcol); - g.fillRoundedRectangle(val, gutterwidth * 0.25); + g.fillRoundedRectangle(val, 0); } else { auto val = gutter.withTrimmedTop(h); g.setColour(valcol); - g.fillRoundedRectangle(val, gutterwidth * 0.25); + g.fillRoundedRectangle(val, 0); } auto hr = juce::Rectangle(2 * hanRadius, 2 * hanRadius).withCentre(hc); @@ -121,7 +119,7 @@ void VSlider::paint(juce::Graphics &g) std::swap(t, b); auto val = gutter.withTop(t).withBottom(b).reduced(1, 0); g.setColour(modvalcol); - g.fillRoundedRectangle(val, gutterwidth * 0.25); + g.fillRoundedRectangle(val, 0); } if (continuousModulatable()->isModulationBipolar()) @@ -132,7 +130,7 @@ void VSlider::paint(juce::Graphics &g) std::swap(t, b); auto val = gutter.withTop(t).withBottom(b).reduced(1, 0); g.setColour(modvaloppcol); - g.fillRoundedRectangle(val, gutterwidth * 0.25); + g.fillRoundedRectangle(val, 0); } }