Macros/Skin/LateNight: Create & Style MacroActivate Button with icons

mixxxdj · Nov 18, 2021 · 7ffc1eb · 7ffc1eb
1 parent 88382a7
commit 7ffc1eb
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 35 deletions.
diff --git a/res/skins/LateNight/macros/macro.xml b/res/skins/LateNight/macros/macro.xml
@@ -6,24 +6,26 @@
     <Layout>horizontal</Layout>
     <SizePolicy>me,min</SizePolicy>
     <Children>
-
-      <WidgetGroup>
-        <ObjectName>SamplerPlayBox</ObjectName>
-        <Layout>horizontal</Layout>
-        <SizePolicy>min,min</SizePolicy>
-        <Children>
-          <Template src="skin:/controls/button_2state_right_display.xml">
-            <!--<SetVariable name="TooltipId">macro_activate_toggle</SetVariable>-->
-            <SetVariable name="ObjectName">PlaySampler</SetVariable>
-            <SetVariable name="Size">34f,34f</SetVariable>
-            <SetVariable name="BtnType"><Variable name="TopRegion_BtnType"/></SetVariable>
-            <SetVariable name="BtnSize">square_big</SetVariable>
-            <SetVariable name="ConfigKey"><Variable name="MacroPrefix"/>activate</SetVariable>
-            <SetVariable name="ConfigKeyRight"><Variable name="MacroPrefix"/>play</SetVariable>
-            <SetVariable name="ConfigKeyDisp"><Variable name="MacroPrefix"/>play</SetVariable>
-          </Template>
-        </Children>
-      </WidgetGroup>
+      <PushButton>
+        <!--<TooltipId>macro_activate_toggle</TooltipId>-->
+        <ObjectName>MacroActivate</ObjectName>
+        <Size>34f,34f</Size>
+        <NumberStates>1</NumberStates>
+        <Connection>
+          <ConfigKey><Variable name="MacroPrefix"/>activate</ConfigKey>
+          <ConnectValueToWidget>false</ConnectValueToWidget>
+          <ButtonState>LeftButton</ButtonState>
+        </Connection>
+        <Connection>
+          <ConfigKey><Variable name="MacroPrefix"/>toggle</ConfigKey>
+          <ConnectValueToWidget>false</ConnectValueToWidget>
+          <ButtonState>RightButton</ButtonState>
+        </Connection>
+        <Connection>
+          <ConfigKey><Variable name="MacroPrefix"/>status</ConfigKey>
+          <ConnectValueFromWidget>false</ConnectValueFromWidget>
+        </Connection>
+      </PushButton>
 
       <WidgetGroup>
         <ObjectName></ObjectName>
@@ -37,13 +39,16 @@
             <SizePolicy>i,f</SizePolicy>
             <MinimumSize>,18</MinimumSize>
             <Children>
-              <TrackProperty>
+              <Label>
                 <ObjectName>SamplerTitleMini</ObjectName>
                 <SizePolicy>me,me</SizePolicy>
-                <MacroSlot><Variable name="MacroSlot"/></MacroSlot>
-                <Group><Variable name="Group"/></Group>
                 <Elide>right</Elide>
-              </TrackProperty>
+                <Text>Macro <Variable name="MacroSlot"/></Text>
+                <Connection>
+                  <ConfigKey><Variable name="MacroPrefix"/>status</ConfigKey>
+                  <BindProperty>Text</BindProperty>
+                </Connection>
+              </Label>
             </Children>
           </WidgetGroup>
 

diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
@@ -1424,7 +1424,10 @@ WPushButton#Reverse[pressed="true"],
 #MicTalk[value="1"], #AuxPlay[value="1"],
 #MicDucking[value="1"], #MicDucking[value="2"],
 #RecFeedback[displayValue="2"],
-QPushButton#pushButtonRecording:checked {
+QPushButton#pushButtonRecording:checked,
+#MacroActivate[value="2"],
+#MacroActivate[value="4"]
+{
   background-color: #db0000;
   }
   /* Red border for Play buttons when previewing from
@@ -1480,6 +1483,7 @@ QPushButton#pushButtonRepeatPlaylist:checked {
 #GuiToggleButton[displayValue="2"],
 #BroadcastButton[displayValue="1"],   /* connecting: yellow */
 #RecFeedback[displayValue="1"],   /* initialize recording */
+#MacroActivate[value="1"],
 #SkinSettingsToggle[displayValue="1"],
 QPushButton#pushButtonAutoDJ:checked,
 QPushButton#pushButtonAnalyze:checked {
@@ -1577,7 +1581,9 @@ WPushButton#FxExpandOverlay[displayValue="0"],
 WPushButton#SamplerExpand[displayValue="0"],
 #BeatgridControlsToggle,
 #SamplerControlsMini WPushButton,
-#RecDot {
+#RecDot,
+#MacroActivate
+{
   background-color: transparent;
 }
 
@@ -1593,10 +1599,12 @@ WPushButton#SamplerExpand[displayValue="0"],
   #PlayDeckMini[value="1"] {
     image: url(skin:/classic/buttons/btn__pause_deck_mini.svg) no-repeat center center;
   }
+#MacroActivate[value="3"],
 #PlaySampler[value="0"],
 #PlayPreview[displayValue="0"] {
   image: url(skin:/classic/buttons/btn__play_sampler.svg) no-repeat center center;
   }
+  #MacroActivate[value="4"],
   #PlaySampler[value="1"],
   #PlayPreview[displayValue="1"] {
     image: url(skin:/classic/buttons/btn__pause_sampler.svg) no-repeat center center;
@@ -1896,16 +1904,17 @@ WPushButton#SamplerExpand[displayValue="0"],
     image: url(skin:/classic/buttons/btn__mic_duck_manual.svg) no-repeat center center;
   }
 
+#MacroActivate[value="0"],
 #RecDot[highlight="0"] {
   image: url(skin:/classic/buttons/btn__rec_dot.svg) no-repeat center center;
   }
-  #RecDot[highlight="1"],
-  #RecDot[highlight="2"] {
+  #MacroActivate[value="1"], #MacroActivate[value="2"],
+  #RecDot[highlight="1"], #RecDot[highlight="2"] {
     image: url(skin:/classic/buttons/btn__rec_dot_active.svg) no-repeat center center;
   }
 
 #BroadcastButton[displayValue="0"] {
-  /* for some reason the alignment isn't rescpected, so the icons
+  /* for some reason the alignment isn't respected, so the icons
     have to be sized like available area (button size - margin) */
   image: url(skin:/classic/buttons/btn__broadcast_off.svg) no-repeat left top;
   }

diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
@@ -1665,7 +1665,8 @@ WPushButton#Reverse[pressed="true"],
 #PassthroughButton[displayValue="1"],
 #BroadcastButton[displayValue="4"], /* warning */
 QPushButton#pushButtonAutoDJ:checked,
-QPushButton#pushButtonAnalyze:checked {
+QPushButton#pushButtonAnalyze:checked,
+#MacroActivate[value="4"] {
   background-color: #b24c12;
   }
   /* Orange border for Play buttons when previewing from
@@ -1693,7 +1694,8 @@ WPushButton#LoopOut[pressed="true"],
 /* Red */
 #EQKillButtonBox WPushButton[displayValue="1"],
 QPushButton#pushButtonRecording:checked,
-#RecFeedback[displayValue="2"] {
+#RecFeedback[displayValue="2"],
+#MacroActivate[value="2"] {
   background-color: #a80000;
 }
 
@@ -1799,8 +1801,9 @@ WPushButton#FxSuperLinkInvertButton[displayValue="0"] {
   }
 
 /* Yellow */
-#RecFeedback[displayValue="1"],     /* initialize recording */
-#BroadcastButton[displayValue="1"] {  /* connecting */
+#RecFeedback[displayValue="1"],   /* initialize recording */
+#BroadcastButton[displayValue="1"],   /* connecting */
+#MacroActivate[value="1"] {
   background-color: #d09300;
 }
 
@@ -1850,13 +1853,13 @@ WPushButton#CrossfaderButton[displayValue="0"],
 WPushButton#CrossfaderButton[displayValue="1"],
 WPushButton#RecButton[displayValue="0"],
 WPushButton#RecButton[displayValue="1"],
-#RecDot {
+#RecDot,
+#MacroActivate {
   background-color: transparent;
 }
 
-
-
 /************** Button icons **************************************************/
+
 WPushButton#PlayDeck[value="0"] {
   image: url(skin:/palemoon/buttons/btn__play_deck.svg) no-repeat center center;
   }
@@ -1870,10 +1873,12 @@ WPushButton#PlayDeck[value="0"] {
   #PlayDeckMini[value="1"] {
     image: url(skin:/palemoon/buttons/btn__pause_deck_mini.svg) no-repeat center center;
   }
+#MacroActivate[value="3"],
 #PlaySampler[value="0"],
 #PlayPreview[displayValue="0"] {
   image: url(skin:/palemoon/buttons/btn__play_sampler.svg) no-repeat center center;
   }
+  #MacroActivate[value="4"],
   #PlaySampler[value="1"],
   #PlayPreview[displayValue="1"] {
     image: url(skin:/palemoon/buttons/btn__pause_sampler.svg) no-repeat center center;
@@ -2408,15 +2413,17 @@ WPushButton#PlayDeck[value="0"] {
     image: url(skin:/palemoon/buttons/btn__mic_duck_manual.svg) no-repeat center center;
   }
 
+#MacroActivate[value="0"],
 #RecDot[highlight="0"] {
   image: url(skin:/palemoon/buttons/btn__rec_dot.svg) no-repeat center center;
   }
+  #MacroActivate[value="1"], #MacroActivate[value="2"],
   #RecDot[highlight="1"], #RecDot[highlight="2"] {
     image: url(skin:/palemoon/buttons/btn__rec_dot_active.svg) no-repeat center center;
   }
 
 #BroadcastButton[displayValue="0"] {
-  /* for some reason the alignment isn't rescpected, so the icons
+  /* for some reason the alignment isn't respected, so the icons
     have to be sized like available area (button size - margin) */
   image: url(skin:/palemoon/buttons/btn__broadcast_off.svg) no-repeat left top;
   }