Skip to content

Commit 789322e

Browse files
acolombieracolombier
committed
fixup! feat(QML): add basic DnD Deck interface
1 parent dd94653 commit 789322e

22 files changed

+391
-481
lines changed

‎res/qml/ActionButton.qml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ AbstractButton {
1919
Rectangle {
2020
id: content
2121
anchors.fill: parent
22-
color: root.category == ActionButton.Category.Action ? '#2D4EA1' : root.category == ActionButton.Category.Danger ? '#7D3B3B' : '#3F3F3F'
22+
color: root.category == ActionButton.Category.Action ? '#2D4EA1' : root.category == ActionButton.Category.Danger ? '#7D3B3B' : Theme.darkGray3
2323
radius: 4
2424
}
2525
DropShadow {

‎res/qml/Button.qml‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ AbstractButton {
77
id: root
88

99
property color normalColor: Theme.buttonNormalColor
10-
required property color activeColor
10+
property color activeColor: Theme.buttonActiveColor
1111
property color pressedColor: activeColor
1212
property bool highlight: false
1313

@@ -20,7 +20,7 @@ AbstractButton {
2020

2121
PropertyChanges {
2222
target: backgroundImage
23-
color: root.checked ? "#3a60be" : "#3F3F3F"
23+
color: root.checked ? "#3a60be" : Theme.darkGray3
2424
}
2525

2626
PropertyChanges {
@@ -58,11 +58,6 @@ AbstractButton {
5858
name: "inactive"
5959
when: !root.checked && !root.highlight && !root.pressed
6060

61-
// PropertyChanges {
62-
// target: backgroundImage
63-
// source: Theme.imgButton
64-
// }
65-
6661
PropertyChanges {
6762
target: label
6863
color: root.normalColor

‎res/qml/Deck.qml‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,8 @@ Item {
5252
"items": [{
5353
"type": "column",
5454
"items": [{
55-
"type": "spinny"
55+
"type": "waveformOverview"
5656
}, {
57-
"type": "fxAssign"
58-
}
59-
]
60-
}, {
61-
"type": "column",
62-
"items": [{
6357
"type": "row",
6458
"items": [{
6559
"type": "column",
@@ -76,19 +70,25 @@ Item {
7670
}, {
7771
"type": "row",
7872
"items": [{
79-
"type": "loop"
80-
}, {
8173
"type": "hotcueAndStem"
8274
}, {
8375
"type": "beatjump"
76+
}, {
77+
"type": "loop"
8478
}
8579
]
8680
}
8781
]
8882
}
8983
]
84+
}
85+
]
86+
}, {
87+
"type": "column",
88+
"items": [{
89+
"type": "spinny"
9090
}, {
91-
"type": "waveformOverview"
91+
"type": "fxAssign"
9292
}
9393
]
9494
}, {
@@ -123,6 +123,10 @@ Item {
123123
)
124124
}
125125

126+
Skin.SectionBackground {
127+
anchors.fill: parent
128+
}
129+
126130
Drag.active: dragArea.drag.active
127131
Drag.dragType: Drag.Automatic
128132
Drag.supportedActions: Qt.CopyAction
@@ -639,6 +643,7 @@ Item {
639643
id: grid
640644

641645
anchors.fill: parent
646+
anchors.margins: 4
642647

643648
visible: !root.minimized
644649

@@ -656,6 +661,7 @@ Item {
656661
id: minimizedGrid
657662

658663
anchors.fill: parent
664+
anchors.margins: 4
659665

660666
visible: root.minimized
661667

@@ -688,7 +694,7 @@ Item {
688694
}
689695

690696
if (!drag.source.parent.items) {
691-
console.error("No items list onm the parent")
697+
console.error(`No items list on the parent of ${drag.source}`)
692698
candidate = null
693699
return
694700
}

‎res/qml/Deck/BeatJump.qml‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,22 @@ Rectangle {
1111

1212
required property string group
1313

14-
color: '#626262'
14+
property color buttonColor: trackLoadedControl.value > 0 ? Theme.buttonActiveColor : Theme.buttonDisableColor
15+
16+
color: Theme.deckBeatjumpBackgroundColor
1517

1618
Label {
1719
anchors.top: parent.top
1820
anchors.horizontalCenter: parent.horizontalCenter
1921
text: "Beatjump"
20-
color: '#3F3F3F'
22+
color: Theme.deckBeatjumpLabelColor
23+
}
24+
25+
Mixxx.ControlProxy {
26+
id: trackLoadedControl
27+
28+
group: root.group
29+
key: "track_loaded"
2130
}
2231

2332
Skin.ControlButton {
@@ -44,7 +53,8 @@ Rectangle {
4453
layer.enabled: true
4554
layer.samples: 4
4655
ShapePath {
47-
fillColor: '#D9D9D9'
56+
fillColor: root.buttonColor
57+
strokeColor: 'transparent'
4858
startX: 0; startY: 1
4959
PathLine { x: 1; y: 1 }
5060
PathLine { x: 1; y: 7 }
@@ -89,7 +99,8 @@ Rectangle {
8999
layer.enabled: true
90100
layer.samples: 4
91101
ShapePath {
92-
fillColor: '#D9D9D9'
102+
fillColor: root.buttonColor
103+
strokeColor: 'transparent'
93104
startX: 0; startY: 1
94105
PathLine { x: 10; y: 7 }
95106
PathLine { x: 10; y: 1 }
@@ -132,7 +143,7 @@ Rectangle {
132143
layer.enabled: true
133144
layer.samples: 4
134145
ShapePath {
135-
fillColor: '#626262'
146+
fillColor: root.buttonColor
136147
strokeColor: 'transparent'
137148
startX: 0; startY: 5
138149
PathLine { x: 12; y: 0 }
@@ -141,7 +152,6 @@ Rectangle {
141152
}
142153
}
143154
}
144-
activeColor: Theme.deckActiveColor
145155
}
146156
Item {
147157
anchors {
@@ -187,7 +197,29 @@ Rectangle {
187197
TextInput {
188198
anchors.centerIn: backgroundImage
189199
text: beatjumpSize.value < 1 ? `1/${1/beatjumpSize.value}` : beatjumpSize.value
190-
color: "#626262"
200+
color: root.buttonColor
201+
202+
function update() {
203+
this.text = Qt.bindind(function() { return beatjumpSize.value < 1 ? `1/${1/beatjumpSize.value}` : beatjumpSize.value; })
204+
}
205+
206+
onAccepted: {
207+
this.focus = false
208+
let [num, denum] = this.text.split("/")
209+
if (denum !== undefined) {
210+
denum = parseInt(denum)
211+
if (Number.isNaN(denum)) {
212+
return update()
213+
}
214+
} else {
215+
denum = 1
216+
}
217+
num = parseInt(num)
218+
if (Number.isNaN(num)) {
219+
return update()
220+
}
221+
beatjumpSize.value = num / denum
222+
}
191223
}
192224
}
193225

@@ -215,7 +247,7 @@ Rectangle {
215247
layer.enabled: true
216248
layer.samples: 4
217249
ShapePath {
218-
fillColor: '#626262'
250+
fillColor: root.buttonColor
219251
strokeColor: 'transparent'
220252
startX: 0; startY: 0
221253
fillRule: ShapePath.WindingFill
@@ -226,6 +258,5 @@ Rectangle {
226258
}
227259
}
228260
}
229-
activeColor: Theme.deckActiveColor
230261
}
231262
}

‎res/qml/Deck/CueButton.qml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import ".." as Skin
2-
import QtQuick 2.12
3-
import QtQuick.Shapes
4-
import QtQuick.Controls 2.12
52
import "../Theme"
63

74
Skin.ControlButton {

‎res/qml/Deck/HotcueAndStem.qml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import ".." as Skin
22
import Mixxx 1.0 as Mixxx
3-
import Mixxx.Controls 1.0 as MixxxControls
43
import Qt5Compat.GraphicalEffects
54
import QtQuick 2.12
65
import QtQuick.Layouts
@@ -26,8 +25,8 @@ Item {
2625
left: parent.left
2726
top: parent.top
2827
bottom: parent.bottom
29-
right: tabs.left
30-
rightMargin: 6
28+
right: stemCountControl.value > 0 ? tabs.left : parent.right
29+
rightMargin: stemCountControl.value > 0 ? 6 : 0
3130
}
3231

3332
color: '#0E0E0E'

‎res/qml/Deck/InfoBar.qml‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import ".." as Skin
22
import Mixxx 1.0 as Mixxx
3-
import Mixxx.Controls 1.0 as MixxxControls
43
import Qt5Compat.GraphicalEffects
54
import QtQuick 2.12
65
import QtQuick.Shapes
@@ -21,8 +20,6 @@ Rectangle {
2120

2221
property bool editMode: false
2322

24-
border.width: 2
25-
border.color: Theme.deckBackgroundColor
2623
radius: 5
2724

2825
Image {
@@ -31,7 +28,6 @@ Rectangle {
3128
anchors.top: parent.top
3229
anchors.left: parent.left
3330
anchors.bottom: parent.bottom
34-
anchors.margins: 5
3531
width: height
3632
source: root.currentTrack.coverArtUrl
3733
visible: false
@@ -43,7 +39,8 @@ Rectangle {
4339

4440
anchors.fill: coverArt
4541
radius: 4
46-
visible: false
42+
visible: !root.deckPlayer.isLoaded && !root.minimized
43+
color: Theme.deckEmptyCoverArt
4744
}
4845

4946
OpacityMask {
@@ -180,8 +177,6 @@ Rectangle {
180177
antialiasing: true
181178
layer.enabled: true
182179
layer.samples: 4
183-
// Layout.preferredWidth: 16
184-
// Layout.preferredHeight: 14
185180
width: 16
186181
height: 14
187182
ShapePath {
@@ -336,15 +331,15 @@ Rectangle {
336331
color: {
337332
const trackColor = root.currentTrack.color;
338333
if (!trackColor.valid)
339-
return Theme.deckBackgroundColor;
334+
return Theme.deckInfoBarBackgroundColor;
340335

341336
return Qt.darker(root.currentTrack.color, 2);
342337
}
343338
}
344339

345340
GradientStop {
346341
position: 1
347-
color: Theme.deckBackgroundColor
342+
color: Theme.deckInfoBarBackgroundColor
348343
}
349344
}
350345
}

0 commit comments

Comments
 (0)