From 166a6276e3b7fbf6969e890c2d92815862a4c77a Mon Sep 17 00:00:00 2001
From: Lukas Waslowski <cr7pt0gr4ph7@gmail.com>
Date: Sat, 24 Aug 2024 09:22:15 +0000
Subject: [PATCH] WSliderComposed: Add WSliderComposed::highlight property

---
 res/skins/LateNight/mixer/channel_4decks.xml |  5 +++++
 res/skins/LateNight/mixer/channel_left.xml   |  5 +++++
 res/skins/LateNight/mixer/channel_right.xml  |  5 +++++
 res/skins/LateNight/style_classic.qss        |  1 +
 res/skins/LateNight/style_palemoon.qss       |  1 +
 src/widget/wslidercomposed.cpp               | 15 +++++++++++++++
 src/widget/wslidercomposed.h                 | 14 ++++++++++++++
 7 files changed, 46 insertions(+)

diff --git a/res/skins/LateNight/mixer/channel_4decks.xml b/res/skins/LateNight/mixer/channel_4decks.xml
index fd58ef480a3..592118ac515 100644
--- a/res/skins/LateNight/mixer/channel_4decks.xml
+++ b/res/skins/LateNight/mixer/channel_4decks.xml
@@ -109,6 +109,7 @@
           </WidgetGroup>
 
           <SliderComposed><!-- Volume -->
+            <ObjectName>ChannelVolume</ObjectName>
             <TooltipId>channel_volume</TooltipId>
             <Size>42f,107f</Size>
             <Handle scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/knob_volume_deck.svg</Handle>
@@ -122,6 +123,10 @@
             <Connection>
               <ConfigKey><Variable name="Group"/>,volume</ConfigKey>
             </Connection>
+            <Connection>
+              <ConfigKey><Variable name="Group"/>,auto_fade_active</ConfigKey>
+              <BindProperty>highlight</BindProperty>
+            </Connection>
           </SliderComposed>
 
         </Children>
diff --git a/res/skins/LateNight/mixer/channel_left.xml b/res/skins/LateNight/mixer/channel_left.xml
index 5e2acdee9af..250b32da842 100644
--- a/res/skins/LateNight/mixer/channel_left.xml
+++ b/res/skins/LateNight/mixer/channel_left.xml
@@ -76,6 +76,7 @@ vertical layout and a side-by-side layout for two-deck mode -->
           <WidgetGroup><Size>1min,4f</Size></WidgetGroup>
 
           <SliderComposed><!-- Volume -->
+            <ObjectName>ChannelVolume</ObjectName>
             <TooltipId>channel_volume</TooltipId>
             <Size>42f,107f</Size>
             <Handle scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/knob_volume_deck.svg</Handle>
@@ -89,6 +90,10 @@ vertical layout and a side-by-side layout for two-deck mode -->
             <Connection>
               <ConfigKey><Variable name="Group"/>,volume</ConfigKey>
             </Connection>
+            <Connection>
+              <ConfigKey><Variable name="Group"/>,auto_fade_active</ConfigKey>
+              <BindProperty>highlight</BindProperty>
+            </Connection>
           </SliderComposed>
 
           <WidgetGroup><Size>1min,0me</Size></WidgetGroup>
diff --git a/res/skins/LateNight/mixer/channel_right.xml b/res/skins/LateNight/mixer/channel_right.xml
index 2ca990726a1..4a29aec4002 100644
--- a/res/skins/LateNight/mixer/channel_right.xml
+++ b/res/skins/LateNight/mixer/channel_right.xml
@@ -34,6 +34,7 @@ vertical layout and a reversed side-by-side layout for two-deck mode -->
           <WidgetGroup><Size>1min,4f</Size></WidgetGroup>
 
           <SliderComposed><!-- Volume -->
+            <ObjectName>ChannelVolume</ObjectName>
             <TooltipId>channel_volume</TooltipId>
             <Size>42f,107f</Size>
             <Handle scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/knob_volume_deck.svg</Handle>
@@ -47,6 +48,10 @@ vertical layout and a reversed side-by-side layout for two-deck mode -->
             <Connection>
               <ConfigKey><Variable name="Group"/>,volume</ConfigKey>
             </Connection>
+            <Connection>
+              <ConfigKey><Variable name="Group"/>,auto_fade_active</ConfigKey>
+              <BindProperty>highlight</BindProperty>
+            </Connection>
           </SliderComposed>
 
           <WidgetGroup><Size>1min,0me</Size></WidgetGroup>
diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
index d86a6b623f6..6e5c73417bc 100644
--- a/res/skins/LateNight/style_classic.qss
+++ b/res/skins/LateNight/style_classic.qss
@@ -698,6 +698,7 @@ WLibrary {
 
 /************** Mixer *********************************************************/
 
+#ChannelVolume[highlight="1"],
 #CrossfaderContainer[highlight="1"] {
   border:  1px solid #cf9200;
 }
diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
index aa9e5bcd129..8eb66e9f870 100644
--- a/res/skins/LateNight/style_palemoon.qss
+++ b/res/skins/LateNight/style_palemoon.qss
@@ -726,6 +726,7 @@ WBeatSpinBox::down-button,
 
 /************** Mixer ***************************************************/
 
+#ChannelVolume[highlight="1"],
 #CrossfaderContainer[highlight="1"] {
   border:  1px solid #b2421c;
 }
diff --git a/src/widget/wslidercomposed.cpp b/src/widget/wslidercomposed.cpp
index 52c6c0c60d8..45025f1b41d 100644
--- a/src/widget/wslidercomposed.cpp
+++ b/src/widget/wslidercomposed.cpp
@@ -13,6 +13,7 @@
 
 WSliderComposed::WSliderComposed(QWidget* parent)
         : WWidget(parent),
+          m_highlight(0),
           m_dHandleLength(0.0),
           m_dSliderLength(0.0),
           m_bHorizontal(false),
@@ -389,3 +390,17 @@ double WSliderComposed::calculateHandleLength() {
 void WSliderComposed::inputActivity() {
     update();
 }
+
+int WSliderComposed::getHighlight() const {
+    return m_highlight;
+}
+
+void WSliderComposed::setHighlight(int highlight) {
+    if (m_highlight == highlight) {
+        return;
+    }
+    m_highlight = highlight;
+    style()->polish(this);
+    update();
+    emit highlightChanged(m_highlight);
+}
diff --git a/src/widget/wslidercomposed.h b/src/widget/wslidercomposed.h
index 323aa69b7f0..2d2d32190d4 100644
--- a/src/widget/wslidercomposed.h
+++ b/src/widget/wslidercomposed.h
@@ -16,6 +16,16 @@ class WSliderComposed : public WWidget  {
     explicit WSliderComposed(QWidget* parent = nullptr);
     ~WSliderComposed() override;
 
+    // The highlight property is used to restyle the widget with CSS.
+    // The declaration #MySlider[highlight="1"] { } will define the style
+    // for the highlighted state. Note: The background property does not
+    // support color schemes for images, a workaround is to set the background
+    // image via <BackPath> and <BackPathHighlighted> from the skin.
+    Q_PROPERTY(int highlight READ getHighlight WRITE setHighlight NOTIFY highlightChanged)
+
+    int getHighlight() const;
+    void setHighlight(int highlight);
+
     void setup(const QDomNode& node, const SkinContext& context);
     void setSliderPixmap(
             const PixmapSource& sourceSlider,
@@ -33,6 +43,9 @@ class WSliderComposed : public WWidget  {
     bool tryParseHorizontal(const QDomNode& node) const;
     void inputActivity();
 
+  signals:
+    void highlightChanged(int highlight);
+
   public slots:
     void onConnectedControlChanged(double dParameter, double dValue) override;
     void fillDebugTooltip(QStringList* debug) override;
@@ -51,6 +64,7 @@ class WSliderComposed : public WWidget  {
     double calculateHandleLength();
     void unsetPixmaps();
 
+    int m_highlight;
     // Length of handle in pixels
     double m_dHandleLength;
     // Length of the slider in pixels.