WIP skins: add styles for cue shift buttons in WCueMenuPopup

ronso0 · Nov 30, 2023 · 92cee12 · 92cee12
1 parent f051aa1
commit 92cee12
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 29 deletions.
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
@@ -2309,22 +2309,39 @@ WEffectChainPresetSelector::indicator:unchecked:selected,
   selection-background-color: #d2d2d2;
 }
 
-#CueDeleteButton {
-/* tall button, about the same height as cue number + label edit box */
-  width: 28px;
-  height: 46px;
-  /* make the icon slightly larger than default 16px */
-  qproperty-iconSize: 20px;
-  qproperty-icon: url(skin:/../Deere/icon/ic_delete.svg);
+WCueMenuPopup #CueDeleteButton,
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
   background-color: #3B3B3B;
   border-radius: 2px;
   outline: none;
 }
-
-#CueDeleteButton:hover {
+WCueMenuPopup #CueDeleteButton:hover,
+WCueMenuPopup #CueShiftEarlier:hover,
+WCueMenuPopup #CueShiftLater:hover {
   background-color: #4B4B4B;
 }
 
+WCueMenuPopup #CueDeleteButton {
+  width: 44px;
+  height: 28px;
+  /* make the icon slightly larger than default 16px */
+  qproperty-iconSize: 20px;
+  qproperty-icon: url(skin:/../Deere/icon/ic_delete.svg);
+}
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
+  width: 22px;
+  height: 22px;
+}
+WCueMenuPopup #CueShiftEarlier {
+  margin-right: 2px; /* is added to width */
+  qproperty-icon: url(skin:/../Deere/icon/ic_hotcues_earlier_48px.svg);
+}
+WCueMenuPopup #CueShiftLater {
+  qproperty-icon: url(skin:/../Deere/icon/ic_hotcues_later_48px.svg);
+}
+
 WRateRange {
     font-size: 10px;
 }

diff --git a/res/skins/LateNight/style_classic.qss b/res/skins/LateNight/style_classic.qss
@@ -1225,7 +1225,8 @@ QPushButton#pushButtonRecording:checked {
   color: #000;
 }
 
-#LibraryFeatureControls QPushButton:pressed {
+#LibraryFeatureControls QPushButton:pressed,
+WCueMenuPopup QPushButton:pressed {
   color: #999;
 }
 
@@ -1294,7 +1295,10 @@ WPushButton#FxAssignButton1[displayValue="0"],
 #SkinSettingsToggle[displayValue="0"],
 #LibraryFeatureControls QPushButton,
 WEffectSelector:!editable,
-#fadeModeCombobox:!editable {
+#fadeModeCombobox:!editable,
+WCueMenuPopup #CueDeleteButton,
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
   border-width: 2px;
   border-image: url(skin:../LateNight/classic/buttons/btn_embedded_library.svg) 2 2 2 2;
   }
@@ -1316,7 +1320,10 @@ QPushButton#pushButtonRepeatPlaylist:checked,
 QPushButton#pushButtonAnalyze:checked,
 QPushButton#pushButtonRecording:checked,
 WEffectSelector:!editable:on,
-#fadeModeCombobox:!editable:on {
+#fadeModeCombobox:!editable:on,
+WCueMenuPopup #CueDeleteButton:pressed,
+WCueMenuPopup #CueShiftEarlier:pressed,
+WCueMenuPopup #CueShiftLater:pressed {
   border-width: 2px;
   border-image: url(skin:../LateNight/classic/buttons/btn_embedded_library_active.svg) 2 2 2 2;
   }
@@ -1410,7 +1417,10 @@ QPushButton#pushButtonAutoDJ:enabled:!checked,
 WPushButton#GuiToggleButton[displayValue="0"],
 #RecFeedback[displayValue="0"],
 WPushButton#BroadcastButton[displayValue="0"],
-WPushButton#SkinSettingsToggle[displayValue="0"] {
+WPushButton#SkinSettingsToggle[displayValue="0"],
+WCueMenuPopup #CueDeleteButton,
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
   background-color: #262626;
 }
 
@@ -1995,22 +2005,35 @@ QPushButton#pushButtonRepeatPlaylist:!checked {
   }
 
 /* widgets in cue popup menu */
-#CueDeleteButton {  /*
+WCueMenuPopup #CueDeleteButton {  /*
   padding: 3px 6px; */
   qproperty-icon: url(skin:../LateNight/classic/buttons/btn__delete.svg);
   /* color buttons are 42x24 px.
   To get the final size for the Delete button consider border width.
   It's a tall button, about the same height as cue number + label edit box */
-  width: 24px;
-  height: 42px;
-  border-width: 2px;
-  border-image: url(skin:../LateNight/classic/buttons/btn_embedded_library.svg) 2 2 2 2;
+  width: 44px;
+  height: 22px;
   /* make the icon slightly larger than default 16px */
   qproperty-iconSize: 20px;
   /* has no effect
   padding: 0px; */
 }
 
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
+  /* This gives us a final size of 26x26, exactly like other square
+     buttons (decks, mixer etc.) */
+  width: 22px;
+  height: 22px;
+}
+WCueMenuPopup #CueShiftEarlier {
+  /* same as #HotcuesShiftEarlier */
+  qproperty-icon: url(skin:../LateNight/classic/buttons/btn__beats_hotcues_earlier.svg);
+}
+WCueMenuPopup #CueShiftLater {
+  qproperty-icon: url(skin:../LateNight/classic/buttons/btn__beats_hotcues_later.svg);
+}
+
 #CueLabelEdit {
   border: 1px solid #f0bb2b;
   border-radius: 0px;

diff --git a/res/skins/LateNight/style_palemoon.qss b/res/skins/LateNight/style_palemoon.qss
@@ -1439,7 +1439,7 @@ WPushButton#FxAssignButton1[displayValue="0"],
 WEffectSelector:!editable,
 #fadeModeCombobox:!editable,
 #LibraryFeatureControls QPushButton:enabled,
-#CueDeleteButton {
+WCueMenuPopup QPushButton {
   outline: none;
   border-width: 2px;
   border-image: url(skin:../LateNight/palemoon/buttons/btn_embedded_library.svg) 2 2 2 2;
@@ -1459,14 +1459,14 @@ WEffectSelector:!editable,
   #BroadcastButton[displayValue="3"],
   #BroadcastButton[displayValue="4"],
   #SkinSettingsToggle[displayValue="1"],
-  #LibraryFeatureControls QPushButton:pressed
+  #LibraryFeatureControls QPushButton:pressed,
   QPushButton#pushButtonAutoDJ:checked,
   QPushButton#pushButtonRepeatPlaylist:checked,
   QPushButton#pushButtonAnalyze:checked,
   QPushButton#pushButtonRecording:checked,
   WEffectSelector:!editable:on,
   #fadeModeCombobox:!editable:on,
-  #CueDeleteButton[pressed="true"] {
+  WCueMenuPopup QPushButton:pressed {
     border-width: 2px;
     border-image: url(skin:../LateNight/palemoon/buttons/btn_embedded_library_active.svg) 2 2 2 2;
   }
@@ -1613,7 +1613,9 @@ WBeatSpinBox::down-button {
   }
   /* bright buttons in dimmed containers
   #BeatgridControls WPushButton[displayValue="0"], */
-  #CueDeleteButton,
+  WCueMenuPopup #CueDeleteButton,
+  WCueMenuPopup #CueShiftEarlier,
+  WCueMenuPopup #CueShiftLater,
   #SplitCue[displayValue="0"],
   #PlayPreview[displayValue="0"],
   /* library controls */
@@ -2470,20 +2472,34 @@ QPushButton#pushButtonRepeatPlaylist:!checked {
 /* AutoDJ button icons */
 
 /* widgets in cue popup menu */
+WCueMenuPopup #CueDeleteButton {
+  /* For QPushButtons, the border is added (here: 2px in each direction).
+     This sets the minimum size, the button may expand depending on the
+     layout and stretch options set in src/widget/wcuemenupopup.cpp */
+  width: 44px;
+  height: 22px;
+}
 WCueMenuPopup #CueDeleteButton {
   qproperty-icon: url(skin:../LateNight/palemoon/buttons/btn__delete.svg);
-  width: 24px;
-  height: 42px;
   /* make the icon slightly larger than default 16px */
   qproperty-iconSize: 20px;
 }
 
-WCueMenuPopup #CueDeleteButton:pressed {
-  background-color: #b24c12;
-  outline: none;
-  /* not applied: */
-  qproperty-icon: url(skin:../LateNight/palemoon/buttons/btn__delete_active.svg);
+WCueMenuPopup #CueShiftEarlier,
+WCueMenuPopup #CueShiftLater {
+  /* This gives us a final size of 26x26, exactly like other square
+     buttons (decks, mixer etc.) */
+  width: 22px;
+  height: 22px;
+}
+WCueMenuPopup #CueShiftEarlier {
+  /* same as #HotcuesShiftEarlier */
+  qproperty-icon: url(skin:../LateNight/palemoon/buttons/btn__beats_hotcues_earlier.svg);
 }
+WCueMenuPopup #CueShiftLater {
+  qproperty-icon: url(skin:../LateNight/palemoon/buttons/btn__beats_hotcues_later.svg);
+}
+
 WCueMenuPopup #CueLabelEdit {
   /*border: 1px solid #c2b3a5;*/
   border-radius: 0px;