Skip to content

feat(QML): add basic DnD Deck interface #14849

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(QML): add basic DnD Deck interface #14849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd94653
feat(QML): add basic DnD Deck interface
acolombier Sep 14, 2025
789322e
fixup! feat(QML): add basic DnD Deck interface
acolombier Sep 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CMakeLists.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3539,7 +3539,7 @@ if(QML)
OPTIONAL_IMPORTS Mixxx
QML_FILES
res/qml/Mixxx/Controls/Knob.qml
res/qml/Mixxx/Controls/Slider.qml
res/qml/Mixxx/Controls/Fader.qml
res/qml/Mixxx/Controls/Spinny.qml
res/qml/Mixxx/Controls/WaveformOverviewHotcueMarker.qml
res/qml/Mixxx/Controls/WaveformOverviewMarker.qml
Expand Down
2 changes: 1 addition & 1 deletion res/qml/ActionButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ AbstractButton {
Rectangle {
id: content
anchors.fill: parent
color: root.category == ActionButton.Category.Action ? '#2D4EA1' : root.category == ActionButton.Category.Danger ? '#7D3B3B' : '#3F3F3F'
color: root.category == ActionButton.Category.Action ? '#2D4EA1' : root.category == ActionButton.Category.Danger ? '#7D3B3B' : Theme.darkGray3
radius: 4
}
DropShadow {
Expand Down
205 changes: 105 additions & 100 deletions res/qml/Button.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,152 +6,157 @@ import "Theme"
AbstractButton {
id: root

required property color activeColor
property bool highlight: false
property color normalColor: Theme.buttonNormalColor
property color activeColor: Theme.buttonActiveColor
property color pressedColor: activeColor
property bool highlight: false

implicitHeight: 26
implicitWidth: 52

background: Item {
anchors.fill: parent

Rectangle {
id: backgroundImage
anchors.fill: parent
color: Theme.darkGray2
radius: 0
}
InnerShadow {
id: bottomInnerEffect
anchors.fill: parent
color: "transparent"
horizontalOffset: -1
radius: 8
samples: 16
source: backgroundImage
spread: 0.3
verticalOffset: -1
}
InnerShadow {
id: topInnerEffect
anchors.fill: parent
color: "transparent"
horizontalOffset: 1
radius: 8
samples: 16
source: bottomInnerEffect
spread: 0.3
verticalOffset: 1
}
DropShadow {
id: dropEffect
anchors.fill: parent
color: Theme.darkGray
horizontalOffset: 0
radius: 4.0
source: topInnerEffect
verticalOffset: 0
}
}
contentItem: Item {
anchors.fill: parent

Glow {
id: labelGlow
anchors.fill: parent
color: label.color
radius: 1
source: label
spread: 0.1
}
Label {
id: label
anchors.fill: parent
color: root.normalColor
font.bold: true
font.capitalization: Font.AllUppercase
font.family: Theme.fontFamily
font.pixelSize: Theme.buttonFontPixelSize
horizontalAlignment: Text.AlignHCenter
text: root.text
verticalAlignment: Text.AlignVCenter
visible: root.text != null
}
Image {
id: image
anchors.centerIn: parent
asynchronous: true
fillMode: Image.PreserveAspectFit
height: icon.height
source: icon.source
visible: false
width: icon.width
}
ColorOverlay {
anchors.fill: image
antialiasing: true
color: root.normalColor
source: image
visible: icon.source != null
}
}
implicitHeight: 26
states: [
State {
name: "pressed"
when: root.pressed

PropertyChanges {
color: root.checked ? Theme.accentColor : Theme.darkGray3
target: backgroundImage
color: root.checked ? "#3a60be" : Theme.darkGray3
}

PropertyChanges {
color: root.pressedColor
target: label
color: root.pressedColor
}

PropertyChanges {
target: labelGlow
visible: true
}

},
State {
name: "active"
when: (root.highlight || root.checked) && !root.pressed

PropertyChanges {
color: Theme.accentColor
target: backgroundImage
color: "#2D4EA1"
}

PropertyChanges {
color: root.activeColor
target: label
color: root.activeColor
}

PropertyChanges {
target: labelGlow
visible: true
}
PropertyChanges {
color: Qt.darker(Theme.accentColor, 3)
target: bottomInnerEffect
}
PropertyChanges {
color: Qt.darker(Theme.accentColor, 3)
target: topInnerEffect
}

},
State {
name: "inactive"
when: !root.checked && !root.highlight && !root.pressed

PropertyChanges {
color: root.normalColor
target: label
color: root.normalColor
}

PropertyChanges {
target: labelGlow
visible: false
}
}
]

background: Item {
anchors.fill: parent

Rectangle {
id: backgroundImage

anchors.fill: parent
color: '#2B2B2B'
radius: 2
}

DropShadow {
id: effect1
anchors.fill: backgroundImage
horizontalOffset: 0
verticalOffset: 0
radius: 1.0
color: "#80000000"
source: backgroundImage
}
InnerShadow {
id: effect2
anchors.fill: backgroundImage
radius: 1
samples: 16
horizontalOffset: 1
verticalOffset: 1
color: "#353535"
source: effect1
}
InnerShadow {
anchors.fill: backgroundImage
radius: 1
samples: 16
horizontalOffset: -1
verticalOffset: -1
color: "#353535"
source: effect2
}
}

contentItem: Item {
anchors.fill: parent

Glow {
id: labelGlow

anchors.fill: parent
radius: 1
spread: 0.1
color: label.color
source: label
}

Label {
id: label

visible: root.text != null

anchors.fill: parent
text: root.text
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.family: Theme.fontFamily
font.capitalization: Font.AllUppercase
font.bold: true
font.pixelSize: Theme.buttonFontPixelSize
color: root.normalColor
}
Image {
id: image

height: icon.height
width: icon.width
anchors.centerIn: parent

source: icon.source
fillMode: Image.PreserveAspectFit
asynchronous: true
visible: false
}
ColorOverlay {
anchors.fill: image
source: image
visible: icon.source != null
color: root.normalColor
antialiasing: true
}
}
}
0 res/qml/ControlSlider.qml → res/qml/ControlFader.qml
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion res/qml/CrossfaderRow.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Item {
width: root.crossfaderWidth
height: crossfaderSlider.height + 20

Skin.ControlSlider {
Skin.ControlFader {
id: crossfaderSlider

anchors.left: parent.left
Expand Down
Loading
Loading