From 2581694f8efe798df8ed7672ee3a6c0900f66ba9 Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 14 Sep 2021 14:14:06 -0400 Subject: [PATCH] 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 | 12 ++++++++ src/common/SkinColors.h | 9 ++++++ src/common/SkinFonts.cpp | 4 ++- src/common/SkinFonts.h | 3 +- src/gui/SurgeGUIEditor.cpp | 2 ++ src/gui/SurgeJUCELookAndFeel.cpp | 50 ++++++++++++++++++++++++++++++++ src/gui/SurgeJUCELookAndFeel.h | 14 +++++---- src/gui/overlays/LuaEditors.cpp | 2 +- 8 files changed, 87 insertions(+), 9 deletions(-) diff --git a/src/common/SkinColors.cpp b/src/common/SkinColors.cpp index e859fa8b64f..7bffbc8f9dc 100644 --- a/src/common/SkinColors.cpp +++ b/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 diff --git a/src/common/SkinColors.h b/src/common/SkinColors.h index dd27bf1c562..d687e731276 100644 --- a/src/common/SkinColors.h +++ b/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 diff --git a/src/common/SkinFonts.cpp b/src/common/SkinFonts.cpp index fedf0622f48..e3564237902 100644 --- a/src/common/SkinFonts.cpp +++ b/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), diff --git a/src/common/SkinFonts.h b/src/common/SkinFonts.h index 3e73a51dec1..b2cc99839f8 100644 --- a/src/common/SkinFonts.h +++ b/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; diff --git a/src/gui/SurgeGUIEditor.cpp b/src/gui/SurgeGUIEditor.cpp index 1834d73c91b..b84136c5b59 100644 --- a/src/gui/SurgeGUIEditor.cpp +++ b/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); diff --git a/src/gui/SurgeJUCELookAndFeel.cpp b/src/gui/SurgeJUCELookAndFeel.cpp index 5e6fabd0654..881caaffcd7 100644 --- a/src/gui/SurgeJUCELookAndFeel.cpp +++ b/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) { diff --git a/src/gui/SurgeJUCELookAndFeel.h b/src/gui/SurgeJUCELookAndFeel.h index d5ab1493712..81a0e2b96c5 100644 --- a/src/gui/SurgeJUCELookAndFeel.h +++ b/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, diff --git a/src/gui/overlays/LuaEditors.cpp b/src/gui/overlays/LuaEditors.cpp index e39b528b476..f1694baea45 100644 --- a/src/gui/overlays/LuaEditors.cpp +++ b/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);