Juce Look and Feel - Meet Surge Skin. (#5090)

Color or Colour? You sort it out. But now these are connected
and we now do a terrible, but skin driven, draw of the tabbed button
tabs.

src/common/SkinColors.cpp

@@ -434,4 +434,16 @@ const Surge::Skin::Color Background("vkb.octave.background", 151, 151, 151),
     Arrow("vkb.octave.arrow", 0, 0, 0);
 }
 } // namespace VirtualKeyboard
+
+namespace JuceWidgets
+{
+namespace TabbedBar
+{
+const Surge::Skin::Color ActiveButtonBackground("tabbar.activetab.background", 100, 50, 0),
+    InactiveButtonBackground("tabbar.inactivetab.background", 30, 30, 30),
+    TabOutline("tabbar.tab.outline", 180, 100, 0), Text("tabbar.text", 255, 255, 255),
+    HoverText("tabbar.hovertext", 255, 0x90, 0);
+}
+} // namespace JuceWidgets
+
 } // namespace Colors

src/common/SkinColors.h

@@ -322,4 +322,13 @@ namespace OctaveJog
 extern const Surge::Skin::Color Background, Arrow;
 } // namespace OctaveJog
 } // namespace VirtualKeyboard
+
+namespace JuceWidgets
+{
+namespace TabbedBar
+{
+extern const Surge::Skin::Color ActiveButtonBackground, InactiveButtonBackground, TabOutline, Text,
+    HoverText;
+}
+} // namespace JuceWidgets
 } // namespace Colors

src/common/SkinFonts.cpp

@@ -26,7 +26,9 @@ namespace Widgets
 {
 const Surge::Skin::FontDesc NumberField("fonts.widgets.numberfield", System::Display),
     EffectLabel("fonts.widgets.effectlabel", System::Display);
-}
+const Surge::Skin::FontDesc TabButtonFont("fonts.widgets.tabbutton", System::Display);
+
+} // namespace Widgets
 namespace PatchStore
 {
 const Surge::Skin::FontDesc Label("fonts.patchstore.label", 11),

src/common/SkinFonts.h

@@ -85,7 +85,8 @@ extern const Surge::Skin::FontDesc Display;
 namespace Widgets
 {
 extern const Surge::Skin::FontDesc NumberField, EffectLabel;
-}
+extern const Surge::Skin::FontDesc TabButtonFont;
+} // namespace Widgets
 namespace PatchStore
 {
 extern const Surge::Skin::FontDesc Label, TextEntry;

src/gui/SurgeGUIEditor.cpp

@@ -3288,6 +3288,8 @@ void SurgeGUIEditor::reloadFromSkin()
     if (!frame || !bitmapStore.get())
         return;
 
+    juceEditor->surgeLF->setSkin(currentSkin, bitmapStore);
+
     float dbs = juce::Desktop::getInstance().getDisplays().getPrimaryDisplay()->scale;
     bitmapStore->setPhysicalZoomFactor(getZoomFactor() * dbs);
 

src/gui/SurgeJUCELookAndFeel.cpp

@@ -14,10 +14,60 @@
 */
 
 #include "SurgeJUCELookAndFeel.h"
+
+void SurgeJUCELookAndFeel::onSkinChanged()
+{
+    setColour(tempoTypeinTextId, juce::Colours::black);
+    setColour(tempoTypeinHighlightId, juce::Colours::red);
+}
+
 void SurgeJUCELookAndFeel::drawLabel(juce::Graphics &graphics, juce::Label &label)
 {
     LookAndFeel_V4::drawLabel(graphics, label);
 }
+
+int SurgeJUCELookAndFeel::getTabButtonBestWidth(juce::TabBarButton &b, int d)
+{
+    auto f = skin->getFont(Fonts::Widgets::TabButtonFont);
+    auto r = f.getStringWidth(b.getButtonText()) + 20;
+    return r;
+}
+
+void SurgeJUCELookAndFeel::drawTabButton(juce::TabBarButton &button, juce::Graphics &g,
+                                         bool isMouseOver, bool isMouseDown)
+{
+    auto o = button.getTabbedButtonBar().getOrientation();
+
+    if (o != juce::TabbedButtonBar::TabsAtBottom)
+    {
+        juce::LookAndFeel_V4::drawTabButton(button, g, isMouseOver, isMouseDown);
+        return;
+    }
+
+    auto activeArea = button.getActiveArea();
+    auto fillColor = skin->getColor(Colors::JuceWidgets::TabbedBar::InactiveButtonBackground);
+    auto textColor = skin->getColor(Colors::JuceWidgets::TabbedBar::Text);
+    if (button.getToggleState())
+    {
+        fillColor = skin->getColor(Colors::JuceWidgets::TabbedBar::ActiveButtonBackground);
+    }
+    if (isMouseOver || isMouseDown)
+    {
+        textColor = skin->getColor(Colors::JuceWidgets::TabbedBar::HoverText);
+    }
+
+    g.setColour(skin->getColor(Colors::JuceWidgets::TabbedBar::TabOutline));
+    g.drawRect(activeArea);
+
+    auto fa = activeArea.withTrimmedLeft(1).withTrimmedRight(1).withTrimmedBottom(1);
+    g.setColour(fillColor);
+    g.fillRect(fa);
+
+    g.setColour(textColor);
+    auto f = skin->getFont(Fonts::Widgets::TabButtonFont);
+    g.setFont(f);
+    g.drawText(button.getButtonText(), activeArea, juce::Justification::centred);
+}
 void SurgeJUCELookAndFeel::drawTextEditorOutline(juce::Graphics &g, int width, int height,
                                                  juce::TextEditor &textEditor)
 {

src/gui/SurgeJUCELookAndFeel.h

@@ -17,19 +17,21 @@
 #define SURGE_XT_SURGEJUCELOOKANDFEEL_H
 
 #include "juce_gui_basics/juce_gui_basics.h"
+#include "SkinSupport.h"
 
-class SurgeJUCELookAndFeel : public juce::LookAndFeel_V4
+class SurgeJUCELookAndFeel : public juce::LookAndFeel_V4, public Surge::GUI::SkinConsumingComponent
 {
   public:
-    SurgeJUCELookAndFeel()
-    {
-        setColour(tempoTypeinTextId, juce::Colours::black);
-        setColour(tempoTypeinHighlightId, juce::Colours::red);
-    }
+    SurgeJUCELookAndFeel() {}
     void drawLabel(juce::Graphics &graphics, juce::Label &label) override;
     void drawTextEditorOutline(juce::Graphics &graphics, int width, int height,
                                juce::TextEditor &editor) override;
 
+    int getTabButtonBestWidth(juce::TabBarButton &, int d) override;
+    void drawTabButton(juce::TabBarButton &button, juce::Graphics &g, bool isMouseOver,
+                       bool isMouseDown) override;
+
+    void onSkinChanged() override;
     enum SurgeColourIds
     {
         componentBgStart = 0x3700001,

src/gui/overlays/LuaEditors.cpp

@@ -301,7 +301,7 @@ void FormulaModulatorEditor::resized()
     {
         efdWidth = 200;
     }
-    tabs->setTabBarDepth(18);
+    tabs->setTabBarDepth(14);
     tabs->setBounds(2, 2, getWidth() - 8 - efdWidth, getHeight() - 4);
     auto b = tabs->getTabbedButtonBar().getLocalBounds();
     applyButton->setBounds(b.getWidth() - 80, 2, 80 - 2, b.getHeight() - 4);