Hotcue Buttons, Context Menu + Skin Improvements.

CMakeLists.txt

@@ -680,6 +680,7 @@ add_library(mixxx-lib STATIC EXCLUDE_FROM_ALL
   src/widget/weffectparameterknobcomposed.cpp
   src/widget/weffectpushbutton.cpp
   src/widget/weffectselector.cpp
+  src/widget/whotcuebutton.cpp
   src/widget/wimagestore.cpp
   src/widget/wkey.cpp
   src/widget/wknob.cpp

build/depends.py

@@ -960,6 +960,7 @@ def sources(self, build):
                    "src/widget/wvumeter.cpp",
                    "src/widget/wpushbutton.cpp",
                    "src/widget/weffectpushbutton.cpp",
+                   "src/widget/whotcuebutton.cpp",
                    "src/widget/wslidercomposed.cpp",
                    "src/widget/wstatuslight.cpp",
                    "src/widget/woverview.cpp",

res/skins/Deere/hotcue_button.xml

@@ -8,46 +8,23 @@
     SmallSquareButtonSize: the button size
 -->
 <Template>
-  <PushButton>
+  <HotcueButton>
     <TooltipId>hotcue</TooltipId>
     <ObjectName>HotcueButton</ObjectName>
     <MinimumSize>18,22</MinimumSize>
     <MaximumSize>22,22</MaximumSize>
     <SizePolicy>me,f</SizePolicy>
+    <Group><Variable name="group"/></Group>
+    <Hotcue><Variable name="hotcue"/></Hotcue>
+    <Hover>true</Hover>
     <NumberStates>2</NumberStates>
-    <LeftClickIsPushButton><Variable name="LeftClickIsPushButton"/></LeftClickIsPushButton>
-    <RightClickIsPushButton><Variable name="RightClickIsPushButton"/></RightClickIsPushButton>
     <State>
       <Number>0</Number>
       <Text><Variable name="hotcue"/></Text>
-      <Pressed scalemode="STRETCH_ASPECT"></Pressed>
-      <Unpressed scalemode="STRETCH_ASPECT"></Unpressed>
     </State>
     <State>
       <Number>1</Number>
       <Text><Variable name="hotcue"/></Text>
-      <Pressed scalemode="STRETCH_ASPECT"></Pressed>
-      <Unpressed scalemode="STRETCH_ASPECT"></Unpressed>
     </State>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_activate</ConfigKey>
-      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
-      <ButtonState>LeftButton</ButtonState>
-      <ConnectValueToWidget>false</ConnectValueToWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_clear</ConfigKey>
-      <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
-      <ButtonState>RightButton</ButtonState>
-      <ConnectValueToWidget>false</ConnectValueToWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_enabled</ConfigKey>
-      <ConnectValueFromWidget>false</ConnectValueFromWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color</ConfigKey>
-      <BindProperty>backgroundColorRgba</BindProperty>
-    </Connection>
-  </PushButton>
+  </HotcueButton>
 </Template>

res/skins/Deere/style.qss

@@ -1558,15 +1558,7 @@ WPushButton[value="2"]:hover {
     border: 1px solid #0080BE;
 }
 
-#HotcueButton {
-    qproperty-shouldHighlightBackgroundOnHover: true;
-}
-
-#HotcueButton[backgroundIsDark=true][hasBackgroundColor=true] {
-    color: #FDFDFD;
-}
-
-#HotcueButton[backgroundIsDark=false][hasBackgroundColor=true] {
+#HotcueButton[light="true"] {
     color: #1f1e1e;
 }
 

res/skins/LateNight/button_hotcue.xml

@@ -7,12 +7,14 @@
     <SizePolicy>me,f</SizePolicy>
     <Layout>horizontal</Layout>
     <Children>
-      <PushButton>
+      <HotcueButton>
         <TooltipId>hotcue</TooltipId>
         <ObjectName>HotcueButton</ObjectName>
         <MinimumSize>26,26</MinimumSize>
         <MaximumSize>26,26</MaximumSize>
         <SizePolicy>me,f</SizePolicy>
+        <Group><Variable name="group"/></Group>
+        <Hotcue><Variable name="number"/></Hotcue>
         <NumberStates>2</NumberStates>
         <State>
           <Number>0</Number>
@@ -24,23 +26,7 @@
           <Unpressed scalemode="STRETCH">skin:/buttons_<Variable name="btn_scheme"/>/btn_<Variable name="btn_type"/>_square_set.svg</Unpressed>
           <Pressed scalemode="STRETCH">skin:/buttons_<Variable name="btn_scheme"/>/btn_<Variable name="btn_type"/>_square_active.svg</Pressed>
         </State>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_activate</ConfigKey>
-          <ButtonState>LeftButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_clear</ConfigKey>
-          <ButtonState>RightButton</ButtonState>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_enabled</ConfigKey>
-          <ConnectValueFromWidget>false</ConnectValueFromWidget>
-        </Connection>
-        <Connection>
-          <ConfigKey><Variable name="group"/>,hotcue_<Variable name="number"/>_color</ConfigKey>
-          <BindProperty>backgroundColorRgba</BindProperty>
-        </Connection>
-      </PushButton>
+      </HotcueButton>
     </Children>
   </WidgetGroup>
 </Template>

res/skins/LateNight/style.qss

@@ -638,7 +638,7 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
       brighter bg color to enhance contrast in darker containers
       and with small size respectively */
 #DeckRow_5_LoopCuesTransport WPushButton[value="0"],
-#HotcueButton[displayValue="0"],
+#HotcueButton,
 #FxAssignButton[displayValue="0"], #FxFocusButton[displayValue="0"],
 #FxToggleButton[displayValue="0"], #FxParameterButton[displayValue="0"],
 #SplitCueButton[value="0"],
@@ -684,13 +684,8 @@ QPushButton#pushButtonRecording:checked,
 #RecFeedback[displayValue="2"],
 #BeatgridButtons WPushButton[value="1"],
 #KeyMatchButton[displayValue="1"],
-#KeyUpButton[displayValue="1"], #KeyDownButton[displayValue="1"],
-#HotcueButton[displayValue="1"][highlight="0"],
-#HotcueButton[displayValue="2"][highlight="0"],
-#HotcueButton[displayValue="1"][highlight="1"],
-#HotcueButton[displayValue="2"][highlight="1"] {
-  background-color: #db0000;
-}
+#KeyUpButton[displayValue="1"],
+#KeyDownButton[displayValue="1"],
 
 #BroadcastButton[displayValue="3"] {
   /* pink */

res/skins/LateNight/style_flip.qss

@@ -290,7 +290,7 @@ WSearchLineEdit {
 #GuiToggleButton[displayValue="0"], #RecFeedback[displayValue="0"],
 #BroadcastButton[displayValue="0"], #SettingsButton[displayValue="0"],
 #DeckRow_5_LoopCuesTransport WPushButton[value="0"],
-#HotcueButton[displayValue="0"],
+#HotcueButton,
 #FxAssignButton[displayValue="0"], #FxFocusButton[displayValue="0"],
 #FxToggleButton[displayValue="0"], #FxParameterButton[displayValue="0"],
 #SplitCueButton[value="0"],
@@ -909,7 +909,7 @@ WEffectSelector {
 WLibrary,
 #SidebarBox {
 /* only 1px padding to compensate the 2px border of inner widgets
-  (QTreeView, QTableView, QTextBrowser) */ 
+  (QTreeView, QTableView, QTextBrowser) */
   padding: 1px 1px 0px 1px;
   border-bottom: 0px;
   border-left: 1px solid qlineargradient(

res/skins/Shade/hotcue_button.xml

@@ -1,8 +1,10 @@
 <Template>
-  <PushButton>
+  <HotcueButton>
     <TooltipId>hotcue</TooltipId>
     <ObjectName>HotcueButton</ObjectName>
     <Pos><Variable name="pos"/></Pos>
+    <Group><Variable name="group"/></Group>
+    <Hotcue><Variable name="hotcue"/></Hotcue>
     <NumberStates>2</NumberStates>
     <State>
       <Number>0</Number>
@@ -11,24 +13,8 @@
     </State>
     <State>
       <Number>1</Number>
-      <Pressed>skin:/btn/btn_hotcue_<Variable name="hotcue"/>.png</Pressed>
-      <Unpressed>skin:/btn/btn_hotcue_<Variable name="hotcue"/>.png</Unpressed>
+      <Pressed>skin:/btn/btn_hotcue_<Variable name="hotcue"/>_overdown.png</Pressed>
+      <Unpressed>skin:/btn/btn_hotcue_<Variable name="hotcue"/>_over.png</Unpressed>
     </State>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_activate</ConfigKey>
-      <ButtonState>LeftButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_clear</ConfigKey>
-      <ButtonState>RightButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_enabled</ConfigKey>
-      <ConnectValueFromWidget>false</ConnectValueFromWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color</ConfigKey>
-      <BindProperty>backgroundColorRgba</BindProperty>
-    </Connection>
-  </PushButton>
+  </HotcueButton>
 </Template>

res/skins/Tango/button_hotcue_deck.xml

@@ -8,12 +8,14 @@ Variables:
   HotCue: hotcue number
 -->
 <Template>
-  <PushButton>
+  <HotcueButton>
     <TooltipId>hotcue</TooltipId>
     <ObjectName>HotcueButton</ObjectName>
     <MinimumSize>15,24</MinimumSize>
     <MaximumSize>23,24</MaximumSize>
     <SizePolicy>me,f</SizePolicy>
+    <Group><Variable name="group"/></Group>
+    <Hotcue><Variable name="HotCue"/></Hotcue>
     <NumberStates>2</NumberStates>
     <State>
       <Number>0</Number>
@@ -25,21 +27,5 @@ Variables:
       <Text><Variable name="HotCue"/></Text>
       <Alignment>center</Alignment>
     </State>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_activate</ConfigKey>
-      <ButtonState>LeftButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_clear</ConfigKey>
-      <ButtonState>RightButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_enabled</ConfigKey>
-      <ConnectValueFromWidget>false</ConnectValueFromWidget>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_color</ConfigKey>
-      <BindProperty>backgroundColorRgba</BindProperty>
-    </Connection>
-  </PushButton>
+  </HotcueButton>
 </Template>

res/skins/Tango/button_hotcue_sam_pre.xml

@@ -9,12 +9,14 @@ Variables:
   HotCue: hotcue number
 -->
 <Template>
-  <PushButton>
+  <HotcueButton>
     <TooltipId>hotcue</TooltipId>
     <ObjectName>HotcueButton</ObjectName>
     <MinimumSize>14,18</MinimumSize>
     <MaximumSize>20,18</MaximumSize>
     <SizePolicy>me,f</SizePolicy>
+    <Group><Variable name="group"/></Group>
+    <Hotcue><Variable name="HotCue"/></Hotcue>
     <NumberStates>2</NumberStates>
     <State>
       <Number>0</Number>
@@ -26,17 +28,5 @@ Variables:
       <Text><Variable name="HotCue"/></Text>
       <Alignment>center</Alignment>
     </State>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_activate</ConfigKey>
-      <ButtonState>LeftButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_clear</ConfigKey>
-      <ButtonState>RightButton</ButtonState>
-    </Connection>
-    <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="HotCue"/>_enabled</ConfigKey>
-      <ConnectValueFromWidget>false</ConnectValueFromWidget>
-    </Connection>
-  </PushButton>
+  </HotcueButton>
 </Template>

res/skins/Tango/style.qss

@@ -1006,12 +1006,12 @@ WLabel#TrackComment {
     border: 1px solid #eeeeee;
     }
 
-#HotcueButton[backgroundIsDark=true][hasBackgroundColor=true] {
-    color: #eeeeee;
+#HotcueButton[light="true"] {
+    color: #0f0f0f;
 }
 
-#HotcueButton[backgroundIsDark=false][hasBackgroundColor=true] {
-    color: #0f0f0f;
+#HotcueButton[light="true"]:hover {
+    border: 1px solid #0f0f0f;
 }
 
 #CueButton {

src/engine/controls/cuecontrol.cpp

@@ -23,8 +23,6 @@ static const double CUE_MODE_NUMARK = 3.0;
 static const double CUE_MODE_MIXXX_NO_BLINK = 4.0;
 static const double CUE_MODE_CUP = 5.0;
 
-constexpr double kNoColorControlValue = -1;
-
 namespace {
 
 // Helper function to convert control values (i.e. doubles) into RgbColor
@@ -335,7 +333,6 @@ void CueControl::detachCue(HotcueControl* pControl) {
     }
     disconnect(pCue.get(), 0, this, 0);
     pControl->resetCue();
-    pControl->setColor(std::nullopt);
 }
 
 void CueControl::trackLoaded(TrackPointer pNewTrack) {
@@ -1769,7 +1766,7 @@ HotcueControl::HotcueControl(QString group, int i)
 
     // The rgba value  of the color assigned to this color.
     m_hotcueColor = new ControlObject(keyForControl(i, "color"));
-    m_hotcueColor->set(kNoColorControlValue);
+    m_hotcueColor->set(QRgb(ColorPalette::kDefaultCueColor));
     connect(m_hotcueColor,
             &ControlObject::valueChanged,
             this,
@@ -1892,7 +1889,7 @@ void HotcueControl::setColor(mixxx::RgbColor::optional_t newColor) {
     if (newColor) {
         m_hotcueColor->set(*newColor);
     } else {
-        m_hotcueColor->set(kNoColorControlValue);
+        m_hotcueColor->set(QRgb(ColorPalette::kDefaultCueColor));
     }
 }
 void HotcueControl::resetCue() {