Skip to content

Commit dd94653

Browse files
acolombieracolombier
committed
feat(QML): add basic DnD Deck interface
1 parent da6db1e commit dd94653

29 files changed

+3498
-886
lines changed

‎CMakeLists.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3539,7 +3539,7 @@ if(QML)
35393539
OPTIONAL_IMPORTS Mixxx
35403540
QML_FILES
35413541
res/qml/Mixxx/Controls/Knob.qml
3542-
res/qml/Mixxx/Controls/Slider.qml
3542+
res/qml/Mixxx/Controls/Fader.qml
35433543
res/qml/Mixxx/Controls/Spinny.qml
35443544
res/qml/Mixxx/Controls/WaveformOverviewHotcueMarker.qml
35453545
res/qml/Mixxx/Controls/WaveformOverviewMarker.qml

‎res/qml/Button.qml‎

Lines changed: 110 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -6,152 +6,162 @@ import "Theme"
66
AbstractButton {
77
id: root
88

9-
required property color activeColor
10-
property bool highlight: false
119
property color normalColor: Theme.buttonNormalColor
10+
required property color activeColor
1211
property color pressedColor: activeColor
12+
property bool highlight: false
1313

14-
implicitHeight: 26
1514
implicitWidth: 52
16-
17-
background: Item {
18-
anchors.fill: parent
19-
20-
Rectangle {
21-
id: backgroundImage
22-
anchors.fill: parent
23-
color: Theme.darkGray2
24-
radius: 0
25-
}
26-
InnerShadow {
27-
id: bottomInnerEffect
28-
anchors.fill: parent
29-
color: "transparent"
30-
horizontalOffset: -1
31-
radius: 8
32-
samples: 16
33-
source: backgroundImage
34-
spread: 0.3
35-
verticalOffset: -1
36-
}
37-
InnerShadow {
38-
id: topInnerEffect
39-
anchors.fill: parent
40-
color: "transparent"
41-
horizontalOffset: 1
42-
radius: 8
43-
samples: 16
44-
source: bottomInnerEffect
45-
spread: 0.3
46-
verticalOffset: 1
47-
}
48-
DropShadow {
49-
id: dropEffect
50-
anchors.fill: parent
51-
color: Theme.darkGray
52-
horizontalOffset: 0
53-
radius: 4.0
54-
source: topInnerEffect
55-
verticalOffset: 0
56-
}
57-
}
58-
contentItem: Item {
59-
anchors.fill: parent
60-
61-
Glow {
62-
id: labelGlow
63-
anchors.fill: parent
64-
color: label.color
65-
radius: 1
66-
source: label
67-
spread: 0.1
68-
}
69-
Label {
70-
id: label
71-
anchors.fill: parent
72-
color: root.normalColor
73-
font.bold: true
74-
font.capitalization: Font.AllUppercase
75-
font.family: Theme.fontFamily
76-
font.pixelSize: Theme.buttonFontPixelSize
77-
horizontalAlignment: Text.AlignHCenter
78-
text: root.text
79-
verticalAlignment: Text.AlignVCenter
80-
visible: root.text != null
81-
}
82-
Image {
83-
id: image
84-
anchors.centerIn: parent
85-
asynchronous: true
86-
fillMode: Image.PreserveAspectFit
87-
height: icon.height
88-
source: icon.source
89-
visible: false
90-
width: icon.width
91-
}
92-
ColorOverlay {
93-
anchors.fill: image
94-
antialiasing: true
95-
color: root.normalColor
96-
source: image
97-
visible: icon.source != null
98-
}
99-
}
15+
implicitHeight: 26
10016
states: [
10117
State {
10218
name: "pressed"
10319
when: root.pressed
10420

10521
PropertyChanges {
106-
color: root.checked ? Theme.accentColor : Theme.darkGray3
10722
target: backgroundImage
23+
color: root.checked ? "#3a60be" : "#3F3F3F"
10824
}
25+
10926
PropertyChanges {
110-
color: root.pressedColor
11127
target: label
28+
color: root.pressedColor
11229
}
30+
11331
PropertyChanges {
11432
target: labelGlow
11533
visible: true
11634
}
35+
11736
},
11837
State {
11938
name: "active"
12039
when: (root.highlight || root.checked) && !root.pressed
12140

12241
PropertyChanges {
123-
color: Theme.accentColor
12442
target: backgroundImage
43+
color: "#2D4EA1"
12544
}
45+
12646
PropertyChanges {
127-
color: root.activeColor
12847
target: label
48+
color: root.activeColor
12949
}
50+
13051
PropertyChanges {
13152
target: labelGlow
13253
visible: true
13354
}
134-
PropertyChanges {
135-
color: Qt.darker(Theme.accentColor, 3)
136-
target: bottomInnerEffect
137-
}
138-
PropertyChanges {
139-
color: Qt.darker(Theme.accentColor, 3)
140-
target: topInnerEffect
141-
}
55+
14256
},
14357
State {
14458
name: "inactive"
14559
when: !root.checked && !root.highlight && !root.pressed
14660

61+
// PropertyChanges {
62+
// target: backgroundImage
63+
// source: Theme.imgButton
64+
// }
65+
14766
PropertyChanges {
148-
color: root.normalColor
14967
target: label
68+
color: root.normalColor
15069
}
70+
15171
PropertyChanges {
15272
target: labelGlow
15373
visible: false
15474
}
15575
}
15676
]
77+
78+
background: Item {
79+
anchors.fill: parent
80+
81+
Rectangle {
82+
id: backgroundImage
83+
84+
anchors.fill: parent
85+
color: '#2B2B2B'
86+
radius: 2
87+
}
88+
89+
DropShadow {
90+
id: effect1
91+
anchors.fill: backgroundImage
92+
horizontalOffset: 0
93+
verticalOffset: 0
94+
radius: 1.0
95+
color: "#80000000"
96+
source: backgroundImage
97+
}
98+
InnerShadow {
99+
id: effect2
100+
anchors.fill: backgroundImage
101+
radius: 1
102+
samples: 16
103+
horizontalOffset: 1
104+
verticalOffset: 1
105+
color: "#353535"
106+
source: effect1
107+
}
108+
InnerShadow {
109+
anchors.fill: backgroundImage
110+
radius: 1
111+
samples: 16
112+
horizontalOffset: -1
113+
verticalOffset: -1
114+
color: "#353535"
115+
source: effect2
116+
}
117+
}
118+
119+
contentItem: Item {
120+
anchors.fill: parent
121+
122+
Glow {
123+
id: labelGlow
124+
125+
anchors.fill: parent
126+
radius: 1
127+
spread: 0.1
128+
color: label.color
129+
source: label
130+
}
131+
132+
Label {
133+
id: label
134+
135+
visible: root.text != null
136+
137+
anchors.fill: parent
138+
text: root.text
139+
horizontalAlignment: Text.AlignHCenter
140+
verticalAlignment: Text.AlignVCenter
141+
font.family: Theme.fontFamily
142+
font.capitalization: Font.AllUppercase
143+
font.bold: true
144+
font.pixelSize: Theme.buttonFontPixelSize
145+
color: root.normalColor
146+
}
147+
Image {
148+
id: image
149+
150+
height: icon.height
151+
width: icon.width
152+
anchors.centerIn: parent
153+
154+
source: icon.source
155+
fillMode: Image.PreserveAspectFit
156+
asynchronous: true
157+
visible: false
158+
}
159+
ColorOverlay {
160+
anchors.fill: image
161+
source: image
162+
visible: icon.source != null
163+
color: root.normalColor
164+
antialiasing: true
165+
}
166+
}
157167
}

‎res/qml/ControlSlider.qml‎ renamed to ‎res/qml/ControlFader.qml‎

File renamed without changes.

‎res/qml/CrossfaderRow.qml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ Item {
5151
width: root.crossfaderWidth
5252
height: crossfaderSlider.height + 20
5353

54-
Skin.ControlSlider {
54+
Skin.ControlFader {
5555
id: crossfaderSlider
5656

5757
anchors.left: parent.left

0 commit comments

Comments
 (0)