Skip to content

Commit

Permalink
Merge pull request #3992 from Holzhaus/qml-demo-skin-additions
Browse files Browse the repository at this point in the history
QML demo skin additions
  • Loading branch information
Swiftb0y authored Jun 15, 2021
2 parents d8a9fd3 + 5d0d7d0 commit c85564a
Show file tree
Hide file tree
Showing 35 changed files with 1,078 additions and 127 deletions.
119 changes: 119 additions & 0 deletions res/skins/QMLDemo/AuxiliaryUnit.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import "." as Skin
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import "Theme"

Row {
id: root

property int unitNumber // required
property string group: "[Auxiliary" + unitNumber + "]"

spacing: 5

Skin.VuMeter {
id: vuMeter

group: root.group
key: "VuMeter"
width: 4
height: parent.height
}

Rectangle {
id: gainKnobFrame

width: 52
height: width
color: Theme.knobBackgroundColor
radius: 5

Skin.ControlKnob {
id: gainKnob

anchors.centerIn: parent
width: 48
height: width
arcStart: 0
group: root.group
key: "pregain"
color: Theme.gainKnobColor
}

}

Column {
Skin.SectionText {
width: parent.width
height: root.height / 2
text: "AUX " + root.unitNumber
}

Skin.ControlButton {
id: pflButton

group: root.group
key: "pfl"
text: "PFL"
activeColor: Theme.pflActiveButtonColor
toggleable: true
}

}

Skin.EmbeddedBackground {
id: embedded

height: parent.height
width: 56

Skin.OrientationToggleButton {
id: orientationButton

anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.verticalCenter
group: root.group
key: "orientation"
color: Theme.crossfaderOrientationColor
}

Skin.InfoBarButton {
id: fx1Button

anchors.left: parent.left
anchors.right: parent.horizontalCenter
anchors.top: parent.verticalCenter
anchors.bottom: parent.bottom
group: "[EffectRack1_EffectUnit1]"
key: "group_" + root.group + "_enable"
activeColor: Theme.deckActiveColor

foreground: Skin.EmbeddedText {
anchors.centerIn: parent
text: "FX1"
}

}

Skin.InfoBarButton {
group: "[EffectRack1_EffectUnit2]"
anchors.left: parent.horizontalCenter
anchors.right: parent.right
anchors.top: parent.verticalCenter
anchors.bottom: parent.bottom
key: "group_" + root.group + "_enable"
activeColor: Theme.deckActiveColor

foreground: Skin.EmbeddedText {
anchors.centerIn: parent
text: "FX2"
}

}

}

}
8 changes: 4 additions & 4 deletions res/skins/QMLDemo/Button.qml
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ AbstractButton {

PropertyChanges {
target: backgroundImage
source: "images/button_pressed.svg"
source: Theme.imgButtonPressed
}

PropertyChanges {
Expand All @@ -42,7 +42,7 @@ AbstractButton {

PropertyChanges {
target: backgroundImage
source: "images/button.svg"
source: Theme.imgButton
}

PropertyChanges {
Expand All @@ -62,7 +62,7 @@ AbstractButton {

PropertyChanges {
target: backgroundImage
source: "images/button.svg"
source: Theme.imgButton
}

PropertyChanges {
Expand All @@ -84,7 +84,7 @@ AbstractButton {
anchors.fill: parent
horizontalTileMode: BorderImage.Stretch
verticalTileMode: BorderImage.Stretch
source: "images/button.svg"
source: Theme.imgButton

border {
top: 10
Expand Down
63 changes: 63 additions & 0 deletions res/skins/QMLDemo/ComboBox.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import "." as Skin
import QtQuick 2.12
import QtQuick.Controls 2.12
import "Theme"

ComboBox {
id: root

background: Skin.EmbeddedBackground {
}

delegate: ItemDelegate {
width: parent.width
highlighted: root.highlightedIndex === index

contentItem: Text {
text: modelData
color: Theme.deckTextColor
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
}

background: Rectangle {
radius: 5
border.width: highlighted ? 1 : 0
border.color: Theme.deckLineColor
color: "transparent"
}

}

contentItem: Text {
leftPadding: 5
rightPadding: root.indicator.width + root.spacing
text: root.displayText
font: root.font
color: Theme.deckTextColor
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

popup: Popup {
y: root.height
width: root.width
implicitHeight: contentItem.implicitHeight

contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: root.popup.visible ? root.delegateModel : null
currentIndex: root.highlightedIndex

ScrollIndicator.vertical: ScrollIndicator {
}

}

background: Skin.EmbeddedBackground {
}

}

}
22 changes: 22 additions & 0 deletions res/skins/QMLDemo/ControlMiniKnob.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import "." as Skin
import Mixxx 0.1 as Mixxx
import QtQuick 2.12

Skin.MiniKnob {
id: root

property alias group: control.group
property alias key: control.key

value: control.parameter
onTurned: control.parameter = value

Mixxx.ControlProxy {
id: control
}

TapHandler {
onDoubleTapped: control.reset()
}

}
97 changes: 81 additions & 16 deletions res/skins/QMLDemo/CrossfaderRow.qml
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import "." as Skin
import Mixxx 0.1 as Mixxx
import QtQuick 2.12
import QtQuick.Controls 2.12
import "Theme"
Expand All @@ -8,36 +9,100 @@ Item {

property real crossfaderWidth // required

implicitHeight: crossfaderSlider.height + 5
implicitHeight: crossfader.height

Item {
id: effectUnitLeftPlaceholder
Skin.SectionBackground {
anchors.fill: microphoneRow
}

Row {
id: microphoneRow

anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: crossfader.left
layoutDirection: Qt.RightToLeft
padding: 5
spacing: 10

Skin.MicrophoneUnit {
unitNumber: 1
}

Skin.MicrophoneUnit {
unitNumber: 2
}

Skin.MicrophoneUnit {
unitNumber: 3
}

Skin.MicrophoneUnit {
unitNumber: 4
}

Skin.MicrophoneDuckingPanel {
}

}

Skin.ControlSlider {
id: crossfaderSlider
Skin.SectionBackground {
id: crossfader

orientation: Qt.Horizontal
anchors.centerIn: parent
width: root.crossfaderWidth
group: "[Master]"
key: "crossfader"
barColor: Theme.crossfaderBarColor
barStart: 0.5
fg: "images/slider_handle_crossfader.svg"
bg: "images/slider_crossfader.svg"
height: crossfaderSlider.height + 20

Skin.ControlSlider {
id: crossfaderSlider

anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 5
anchors.rightMargin: 5
anchors.verticalCenter: parent.verticalCenter
orientation: Qt.Horizontal
group: "[Master]"
key: "crossfader"
barColor: Theme.crossfaderBarColor
barStart: 0.5
fg: Theme.imgCrossfaderHandle
bg: Theme.imgCrossfaderBackground
}

}

Item {
id: effectUnitRightPlaceholder
Row {
id: auxiliaryRow

anchors.left: crossfader.right
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.right: parent.right
padding: 5
spacing: 10

Skin.AuxiliaryUnit {
layoutDirection: Qt.RightToLeft
unitNumber: 1
}

Skin.AuxiliaryUnit {
layoutDirection: Qt.RightToLeft
unitNumber: 2
}

Skin.AuxiliaryUnit {
layoutDirection: Qt.RightToLeft
unitNumber: 3
}

Skin.AuxiliaryUnit {
layoutDirection: Qt.RightToLeft
unitNumber: 4
}

}

}
Loading

0 comments on commit c85564a

Please sign in to comment.