Skip to content

Commit f6258b8

Browse files
xARSENICxxARSENICx
committed
fix(LateNightQML): polish deck vinyl and rate controls
1 parent de0934c commit f6258b8

5 files changed

Lines changed: 159 additions & 54 deletions

File tree

‎res/skins/LateNightQML/Deck/LateNightCycleButton.qml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@ LateNightIconButton {
1212
property var stateLabels: []
1313
property real activeOpacity: 0.95
1414
property real inactiveOpacity: 0.72
15+
property color activeLabelColor: LateNightTheme.textColor
16+
property color inactiveLabelColor: LateNightTheme.textColorMuted
17+
property bool activeWhenNonzero: false
1518

1619
readonly property int currentState: cycleBehavior.currentState
1720

21+
activeState: root.activeWhenNonzero && root.currentState > 0
1822
label: cycleBehavior.label
1923
labelPixelSize: 9
20-
labelColor: root.currentState > 0 ? LateNightTheme.textColor : LateNightTheme.textColorMuted
24+
labelColor: root.currentState > 0 ? root.activeLabelColor : root.inactiveLabelColor
2125
contentOpacity: root.currentState > 0 ? root.activeOpacity : root.inactiveOpacity
2226

2327
Skin.ControlCycleButtonBehavior {

‎res/skins/LateNightQML/Deck/RatePlaceholder.qml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,12 @@ Item {
3232
}
3333

3434
function rateRangeTopLabelY(labelHeight) {
35-
return rateSlider.y - labelHeight / 2;
35+
labelHeight;
36+
return 0;
3637
}
3738

3839
function rateRangeBottomLabelY(labelHeight) {
39-
return rateSlider.y + rateSlider.height - labelHeight / 2;
40+
return sliderContainer.height - labelHeight - 1;
4041
}
4142

4243
property real previousSyncEnabledValue: syncEnabledProxy.value
@@ -235,6 +236,7 @@ Item {
235236
// Rate range labels: top = negative direction, center = default, bottom = positive direction
236237
Text {
237238
width: 8
239+
height: 16
238240
x: 1
239241
y: root.rateRangeTopLabelY(height)
240242
text: "-"
@@ -246,6 +248,7 @@ Item {
246248

247249
Text {
248250
width: 8
251+
height: 16
249252
x: parent.width - width - 1
250253
y: root.rateRangeTopLabelY(height)
251254
text: (rateRangeProxy.value * 100).toFixed(0)
@@ -257,6 +260,7 @@ Item {
257260

258261
Text {
259262
width: 8
263+
height: 16
260264
x: 1
261265
y: root.rateRangeBottomLabelY(height)
262266
text: "+"
@@ -268,6 +272,7 @@ Item {
268272

269273
Text {
270274
width: 8
275+
height: 16
271276
x: parent.width - width - 1
272277
y: root.rateRangeBottomLabelY(height)
273278
text: (rateRangeProxy.value * 100).toFixed(0)

‎res/skins/LateNightQML/Deck/VinylControlsPlaceholder.qml‎

Lines changed: 109 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Item {
1212
implicitHeight: 20
1313

1414
Mixxx.ControlProxy {
15-
id: vinylEnabledProxy
15+
id: vinylEnabledControl
1616
group: root.group
1717
key: "vinylcontrol_enabled"
1818
}
@@ -23,49 +23,47 @@ Item {
2323
key: "vinylcontrol_status"
2424
}
2525

26+
Mixxx.ControlProxy {
27+
id: passthroughControl
28+
group: root.group
29+
key: "passthrough"
30+
}
31+
2632
RowLayout {
2733
anchors.fill: parent
2834
spacing: 0
2935

3036
// Vinyl enable/disable toggle with status display.
31-
// Left-click toggles vinylcontrol_enabled.
32-
// Display shows vinylcontrol_status (0=off, 1=ok, 2=speed, 3=both ok).
37+
// The click requests vinylcontrol_enabled; the fill displays vinylcontrol_status.
3338
Item {
3439
Layout.preferredWidth: 40
3540
Layout.preferredHeight: 20
3641

37-
Image {
42+
LateNightIconButton {
3843
anchors.fill: parent
39-
source: LateNightTheme.lateNightTopRegionButton("medium")
40-
fillMode: Image.Stretch
41-
opacity: vinylEnabledProxy.value > 0 ? 0.95 : 0.72
42-
}
43-
44-
Image {
45-
anchors.centerIn: parent
46-
width: Math.min(parent.width, sourceSize.width > 0 ? sourceSize.width / 2 : parent.width)
47-
height: Math.min(parent.height, sourceSize.height > 0 ? sourceSize.height / 2 : parent.height)
48-
source: {
49-
var status = Math.round(vinylStatusProxy.value);
50-
switch (status) {
51-
case 1:
52-
return LateNightTheme.assetDeckVinylControl1;
53-
case 2:
54-
return LateNightTheme.assetDeckVinylControl2;
55-
case 3:
56-
return LateNightTheme.assetDeckVinylControl3;
57-
default:
58-
return LateNightTheme.assetDeckVinylControl0;
59-
}
60-
}
61-
fillMode: Image.PreserveAspectFit
62-
opacity: vinylEnabledProxy.value > 0 ? 0.95 : 0.72
44+
backgroundSource: LateNightTheme.lateNightButton("btn_embedded_library.svg")
45+
activeBackgroundSuffix: "active"
46+
activeState: vinylStatusProxy.value > 0
47+
inactiveColor: LateNightTheme.deckEmbeddedButtonInactiveColor
48+
activeColor: LateNightTheme.vinylStatusColor(vinylStatusProxy.value)
49+
label: "VINYL"
50+
labelPixelSize: 11
51+
labelColor: activeState ? LateNightTheme.deckActiveButtonTextColor : LateNightTheme.textColorMuted
52+
contentOpacity: activeState ? 0.95 : 0.72
53+
useBorderImageBackground: true
54+
backgroundBorderTop: 2
55+
backgroundBorderBottom: 2
56+
backgroundBorderLeft: 2
57+
backgroundBorderRight: 2
6358
}
6459

6560
MouseArea {
6661
anchors.fill: parent
62+
acceptedButtons: Qt.LeftButton
63+
preventStealing: true
64+
6765
onClicked: {
68-
vinylEnabledProxy.value = !vinylEnabledProxy.value;
66+
vinylEnabledControl.parameter = vinylEnabledControl.value > 0 ? 0 : 1;
6967
}
7068
}
7169
}
@@ -74,8 +72,18 @@ Item {
7472
LateNightCycleButton {
7573
Layout.preferredWidth: 46
7674
Layout.preferredHeight: 20
77-
backgroundSource: LateNightTheme.lateNightTopRegionButton("medium")
75+
backgroundSource: LateNightTheme.lateNightButton("btn_embedded_grid.svg")
7876
inactiveColor: LateNightTheme.deckEmbeddedButtonInactiveColor
77+
inactiveLabelColor: LateNightTheme.textColorMuted
78+
activeLabelColor: LateNightTheme.textColorMuted
79+
activeOpacity: 0.72
80+
inactiveOpacity: 0.72
81+
labelPixelSize: 11
82+
useBorderImageBackground: true
83+
backgroundBorderTop: 2
84+
backgroundBorderBottom: 2
85+
backgroundBorderLeft: 1
86+
backgroundBorderRight: 2
7987
group: root.group
8088
key: "vinylcontrol_mode"
8189
numStates: 3
@@ -86,28 +94,87 @@ Item {
8694
LateNightCycleButton {
8795
Layout.preferredWidth: 32
8896
Layout.preferredHeight: 20
89-
backgroundSource: LateNightTheme.lateNightTopRegionButton("medium")
97+
backgroundSource: LateNightTheme.lateNightButton("btn_embedded_grid.svg")
98+
activeBackgroundSuffix: "active"
99+
activeWhenNonzero: true
100+
activeColor: LateNightTheme.vinylCueingActiveColor
90101
inactiveColor: LateNightTheme.deckEmbeddedButtonInactiveColor
102+
inactiveLabelColor: LateNightTheme.textColorMuted
103+
activeLabelColor: LateNightTheme.deckActiveButtonTextColor
104+
activeOpacity: 0.95
105+
inactiveOpacity: 0.72
106+
labelPixelSize: 11
107+
useBorderImageBackground: true
108+
backgroundBorderTop: 2
109+
backgroundBorderBottom: 2
110+
backgroundBorderLeft: 1
111+
backgroundBorderRight: 2
91112
group: root.group
92113
key: "vinylcontrol_cueing"
93114
numStates: 3
94115
stateLabels: ["CUE", "CUE", "HOT"]
95116
}
96117

97118
// Passthrough toggle
98-
LateNightControlButton {
119+
Item {
99120
Layout.preferredWidth: 35
100121
Layout.preferredHeight: 20
101-
backgroundSource: LateNightTheme.lateNightTopRegionButton("medium")
102-
label: "PASS"
103-
labelPixelSize: 9
104-
inactiveColor: LateNightTheme.deckEmbeddedButtonInactiveColor
105-
group: root.group
106-
key: "passthrough"
107-
toggleable: true
108-
activeOpacity: 0.95
109-
inactiveOpacity: 0.72
110-
activeOverlayColor: LateNightTheme.accentColor
122+
123+
property bool rejectedPress: false
124+
125+
Timer {
126+
id: passthroughPowerWindowTimer
127+
interval: 300
128+
repeat: false
129+
}
130+
131+
LateNightIconButton {
132+
anchors.fill: parent
133+
backgroundSource: LateNightTheme.lateNightButton("btn_embedded_grid.svg")
134+
activeBackgroundSuffix: "active"
135+
activeState: passthroughControl.value > 0
136+
inactiveColor: LateNightTheme.deckEmbeddedButtonInactiveColor
137+
activeColor: LateNightTheme.passthroughActiveColor
138+
label: "PASS"
139+
labelPixelSize: 11
140+
labelColor: activeState ? LateNightTheme.deckActiveButtonTextColor : LateNightTheme.textColorMuted
141+
contentOpacity: activeState ? 0.95 : 0.72
142+
useBorderImageBackground: true
143+
backgroundBorderTop: 2
144+
backgroundBorderBottom: 2
145+
backgroundBorderLeft: 1
146+
backgroundBorderRight: 2
147+
}
148+
149+
MouseArea {
150+
anchors.fill: parent
151+
acceptedButtons: Qt.LeftButton
152+
preventStealing: true
153+
154+
onPressed: {
155+
const targetValue = passthroughControl.value > 0 ? 0 : 1;
156+
passthroughControl.parameter = targetValue;
157+
parent.rejectedPress = targetValue > 0 && passthroughControl.value <= 0;
158+
passthroughPowerWindowTimer.restart();
159+
}
160+
161+
onReleased: {
162+
if (parent.rejectedPress) {
163+
parent.rejectedPress = false;
164+
passthroughPowerWindowTimer.stop();
165+
return;
166+
}
167+
if (!passthroughPowerWindowTimer.running) {
168+
passthroughControl.parameter = passthroughControl.value > 0 ? 0 : 1;
169+
}
170+
passthroughPowerWindowTimer.stop();
171+
}
172+
173+
onCanceled: {
174+
parent.rejectedPress = false;
175+
passthroughPowerWindowTimer.stop();
176+
}
177+
}
111178
}
112179
}
113180
}

‎res/skins/LateNightQML/LateNightTheme/LateNightTheme.qml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ QtObject {
2020
readonly property color deckBeatSpinBoxTextColor: isClassic ? "#888888" : "#a7998b"
2121
readonly property color deckReadonlyTextColor: isClassic ? "#888888" : "#777777"
2222
readonly property color deckTopRowBackgroundColor: "#181818"
23+
readonly property color deckActiveButtonTextColor: "#000000"
2324
readonly property color deckPanelColor: "#1e1e20"
2425
readonly property color deckPanelBorderDark: "#0c0c0c"
2526
readonly property color deckPanelBorderLight: "#333333"
@@ -54,6 +55,11 @@ QtObject {
5455
readonly property color keyControlsPressedColor: isPaleMoon ? "#7d350d" : "#db0000"
5556
readonly property string keyControlsPressedIconSuffix: isPaleMoon ? "active" : ""
5657
readonly property string playCueActiveIconSuffix: isPaleMoon ? "active" : ""
58+
readonly property color vinylStatusSignalColor: isClassic ? "#659f08" : "#438225"
59+
readonly property color vinylStatusSpeedColor: "#d09300"
60+
readonly property color vinylStatusSignalAndSpeedColor: "#f856e7"
61+
readonly property color vinylCueingActiveColor: "#888888"
62+
readonly property color passthroughActiveColor: vinylStatusSpeedColor
5763
readonly property color white: "#D9D9D9"
5864

5965
readonly property url assetDeckArrowLeftUpButton: lateNightAsset("buttons", "btn__arrow_left_up.svg")
@@ -66,6 +72,16 @@ QtObject {
6672
readonly property url optionalDeckControlsBackgroundTile: isClassic ? lateNightAsset("style", "background_tile.png") : ""
6773
readonly property url assetDeckCoverDefault: lateNightAsset("style", "cover_default.svg")
6874
readonly property url assetDeckBeatCurposButton: lateNightAsset("buttons", "btn__beat_curpos.svg")
75+
readonly property url assetDeckBeatCurposLargeButton: lateNightAsset("buttons", "btn__beat_curpos_large.svg")
76+
readonly property url assetDeckBeatsEarlierButton: lateNightAsset("buttons", "btn__beats_earlier.svg")
77+
readonly property url assetDeckBeatsFasterButton: lateNightAsset("buttons", "btn__beats_faster.svg")
78+
readonly property url assetDeckBeatsLaterButton: lateNightAsset("buttons", "btn__beats_later.svg")
79+
readonly property url assetDeckBeatsSlowerButton: lateNightAsset("buttons", "btn__beats_slower.svg")
80+
readonly property url assetDeckUndoButton: lateNightAsset("buttons", "btn__undo.svg")
81+
readonly property url assetDeckBpmLockedButton: lateNightAsset("buttons", "btn__bpm_locked.svg")
82+
readonly property url assetDeckBpmUnlockedButton: lateNightAsset("buttons", "btn__bpm_unlocked.svg")
83+
readonly property url assetDeckBeatsHotcuesEarlierButton: lateNightAsset("buttons", "btn__beats_hotcues_earlier.svg")
84+
readonly property url assetDeckBeatsHotcuesLaterButton: lateNightAsset("buttons", "btn__beats_hotcues_later.svg")
6985
readonly property url assetDeckCueButton: lateNightAsset("buttons", "btn__cue_deck.svg")
7086
readonly property url assetDeckEjectButton: lateNightAsset("buttons", "btn__eject.svg")
7187
readonly property url assetDeckIntroEndButton: lateNightAsset("buttons", "btn__intro_end.svg")
@@ -139,6 +155,19 @@ QtObject {
139155
return Qt.resolvedUrl("../../LateNight/" + ColorScheme.name + "/" + directory + "/" + fileName);
140156
}
141157

158+
function vinylStatusColor(status) {
159+
switch (Math.round(status)) {
160+
case 1:
161+
return vinylStatusSignalColor;
162+
case 2:
163+
return vinylStatusSpeedColor;
164+
case 3:
165+
return vinylStatusSignalAndSpeedColor;
166+
default:
167+
return deckEmbeddedButtonInactiveColor;
168+
}
169+
}
170+
142171
function sharedImage(fileName) {
143172
return Qt.resolvedUrl("../../../qml/images/" + fileName);
144173
}

0 commit comments

Comments
 (0)