Skip to content

Commit

Permalink
Merge pull request #3907 from Holzhaus/qmldemo
Browse files Browse the repository at this point in the history 
QML Pt. 2: Add demo skin
  • Loading branch information
@Swiftb0y
Swiftb0y authored May 29, 2021
2 parents 63c1855 + b6767d3 commit 4edb4a1
Show file tree
Hide file tree
Showing 19 changed files with 1,217 additions and 0 deletions.
295 changes: 295 additions & 0 deletions res/skins/QMLDemo/Deck.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,295 @@
import Mixxx 0.1 as Mixxx
import Mixxx.Controls 0.1 as MixxxControls
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.11

Item {
id: root

required property string group

ColumnLayout {
anchors.fill: parent

RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true

ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true

Rectangle {
id: trackInfo

Layout.fillWidth: true
height: 60
color: "#121213"

Rectangle {
id: coverArt

anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
width: height
color: "black"
}

Item {
id: spinny

anchors.fill: coverArt

// The Spinnies are automatically hidden if the track
// is stopped. This is not really useful, but is nice for
// demo'ing transitions.
Mixxx.ControlProxy {
group: root.group
key: "play"
onValueChanged: spinnyIndicator.indicatorVisible = (value > 0)
}

MixxxControls.Spinny {
id: spinnyIndicator

anchors.fill: parent
group: root.group
indicatorVisible: false

indicatorDelegate: Image {
mipmap: true
width: spinnyIndicator.width
height: spinnyIndicator.height
source: "../LateNight/palemoon/style/spinny_indicator.svg"
}

}

}

Item {
id: trackText

anchors.top: parent.top
anchors.left: coverArt.right
anchors.right: parent.right
anchors.bottom: parent.bottom

ColumnLayout {
anchors.fill: parent
anchors.margins: 5

Text {
id: trackTitle

Layout.fillWidth: true
Layout.fillHeight: true
text: "Title Placeholder"
elide: Text.ElideRight
color: "#c2b3a5"
}

Rectangle {
id: trackColor

Layout.fillWidth: true
implicitHeight: 3
color: "black"
}

Text {
id: trackArtist

Layout.fillWidth: true
Layout.fillHeight: true
text: "Artist Placeholder"
elide: Text.ElideRight
color: "#c2b3a5"
}

}

}

}

WaveformOverview {
Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
group: root.group
}

}

Item {
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.fillHeight: true
implicitWidth: 50

MixxxControls.Slider {
id: volumeSlider

Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
width: parent.width
height: parent.height
group: root.group
key: "rate"
bar: true
barColor: "#257b82"
barMargin: 10
barStart: 0.5

handle: Image {
source: "../LateNight/palemoon/sliders/knob_volume_deck.svg"
width: 42
height: 19
}

background: Image {
width: volumeSlider.width
height: volumeSlider.height
source: "../LateNight/palemoon/sliders/slider_volume_deck.svg"
}

}

}

}

Rectangle {
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.fillWidth: true
height: 26
color: "transparent"

RowLayout {
anchors.fill: parent

Rectangle {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
implicitWidth: 68
implicitHeight: 26
color: "#121213"

MixxxControls.ToggleButton {
id: playButton

anchors.fill: parent
group: root.group
key: "play"
icon.width: 50
icon.height: 24

State {
name: "0"

PropertyChanges {
target: playButton
icon.source: "../LateNight/palemoon/buttons/btn__play_deck.svg"
icon.color: "#777777"
background.color: "transparent"
background.border.width: 2
}

PropertyChanges {
target: playButtonBgImage
source: "../LateNight/palemoon/buttons/btn_embedded_play.svg"
}

}

State {
name: "1"

PropertyChanges {
target: playButton
icon.source: "../LateNight/palemoon/buttons/btn__play_deck_active.svg"
icon.color: "transparent"
background.color: "#b24c12"
background.border.width: 2
}

PropertyChanges {
target: playButtonBgImage
source: "../LateNight/palemoon/buttons/btn_embedded_play_active.svg"
}

}

background: Rectangle {
anchors.fill: parent

data: Image {
id: playButtonBgImage

anchors.fill: parent
}

}

}

}

Item {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillWidth: true
Layout.fillHeight: true
}

Item {
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
implicitWidth: 50
implicitHeight: 20

Mixxx.ControlProxy {
id: passthroughControl

group: root.group
key: "passthrough"
}

Switch {
id: passthroughSwitch

width: parent.implicitWidth
height: 18
anchors.margins: 5
text: "Passthrough"
checked: passthroughControl.value
onCheckedChanged: passthroughControl.value = checked

indicator: Rectangle {
anchors.fill: parent
x: passthroughSwitch.leftPadding
y: parent.height / 2 - height / 2
radius: height / 2
color: passthroughSwitch.checked ? "#202020" : "#121213"
border.color: "#404040"

Rectangle {
x: passthroughSwitch.checked ? parent.width - width : 0
height: passthroughSwitch.height
width: height
radius: height / 2
color: passthroughSwitch.checked ? "#777" : "#404040"
border.color: "#404040"
}

}

}

}

}

}

}

}
72 changes: 72 additions & 0 deletions res/skins/QMLDemo/DeckRow.qml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import Mixxx 0.1 as Mixxx
import Mixxx.Controls 0.1 as MixxxControls
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.11

Item {
id: root

required property string leftDeck
required property string rightDeck

RowLayout {
anchors.fill: parent
anchors.leftMargin: 10
anchors.rightMargin: 10
Layout.margins: 10

Deck {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
group: root.leftDeck
}

Rectangle {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
implicitWidth: 200
Layout.fillHeight: true
color: "#1e1e20"
border.color: "#121213"
border.width: 2
radius: 1

RowLayout {
anchors.fill: parent
anchors.margins: 10

EqColumn {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
group: root.leftDeck
}

MixerColumn {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
group: root.leftDeck
}

MixerColumn {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
group: root.rightDeck
}

EqColumn {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
group: root.rightDeck
}

}

}

Deck {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
group: root.rightDeck
}

}

}
Loading

0 comments on commit 4edb4a1

Please sign in to comment.