UI colours and buttons adjustment (#90)

* adjust multiswitch and push buttons fill * more colour adjustments
surge-synthesizer · May 30, 2024 · db37032 · db37032
1 parent 3eead4e
commit db37032
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 87 deletions.
diff --git 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
@@ -57,8 +57,6 @@ template <typename T> 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 <typename T> 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
@@ -37,7 +37,7 @@ namespace sst::jucegui::components
 template <typename T>
 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
@@ -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
@@ -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
@@ -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
@@ -31,17 +31,16 @@ void MenuButtonPainter<T>::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)
     {
         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
@@ -58,35 +58,19 @@ 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<float> 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<float> txt, txtbg;
 
             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<float> 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
@@ -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
@@ -44,27 +44,25 @@ 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;
 
     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<float>(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);
         }
     }