QML: Redesign demo skin

res/skins/QMLDemo/Button.qml

@@ -0,0 +1,128 @@
+import "." as Skin
+import QtGraphicalEffects 1.12
+import QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+AbstractButton {
+    id: root
+
+    property color normalColor: Theme.buttonNormalColor
+    property color activeColor // required
+    property color pressedColor: activeColor
+    property bool highlight: false
+
+    implicitWidth: 52
+    implicitHeight: 26
+    states: [
+        State {
+            name: "pressed"
+            when: root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button_pressed.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.pressedColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "active"
+            when: (root.highlight || root.checked) && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.activeColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: true
+            }
+
+        },
+        State {
+            name: "inactive"
+            when: !root.checked && !root.highlight && !root.pressed
+
+            PropertyChanges {
+                target: backgroundImage
+                source: "images/button.svg"
+            }
+
+            PropertyChanges {
+                target: label
+                color: root.normalColor
+            }
+
+            PropertyChanges {
+                target: labelGlow
+                visible: false
+            }
+
+        }
+    ]
+
+    background: BorderImage {
+        id: backgroundImage
+
+        anchors.fill: parent
+        horizontalTileMode: BorderImage.Stretch
+        verticalTileMode: BorderImage.Stretch
+        source: "images/button.svg"
+
+        border {
+            top: 10
+            left: 10
+            right: 10
+            bottom: 10
+        }
+
+    }
+
+    contentItem: Item {
+        anchors.fill: parent
+
+        Glow {
+            id: labelGlow
+
+            anchors.fill: parent
+            radius: 5
+            spread: 0.1
+            samples: 1 + radius * 2
+            color: label.color
+            source: label
+        }
+
+        Label {
+            id: label
+
+            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
+        }
+
+    }
+
+}

res/skins/QMLDemo/ControlButton.qml

@@ -0,0 +1,16 @@
+import "." as Skin
+import Mixxx 0.1 as Mixxx
+
+Skin.Button {
+    id: root
+
+    property string group // required
+    property string key // required
+
+    Mixxx.ControlProxy {
+        group: root.group
+        key: root.key
+        value: root.checked || root.down
+    }
+
+}

res/skins/QMLDemo/CrossfaderRow.qml

@@ -0,0 +1,49 @@
+import "." as Skin
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "Theme"
+
+Item {
+    id: root
+
+    property real crossfaderWidth // required
+
+    implicitHeight: crossfaderSlider.width
+
+    Item {
+        id: effectUnitLeftPlaceholder
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+    }
+
+    Skin.Slider {
+        id: crossfaderSlider
+
+        anchors.centerIn: parent
+        height: root.crossfaderWidth
+        group: "[Master]"
+        key: "crossfader"
+        barColor: Theme.crossfaderBarColor
+        barStart: 0.5
+        fg: "images/slider_handle_crossfader.svg"
+        bg: "images/slider_crossfader.svg"
+
+        transform: Rotation {
+            origin.x: crossfaderSlider.width / 2
+            origin.y: crossfaderSlider.height / 2
+            angle: 90
+        }
+
+    }
+
+    Item {
+        id: effectUnitRightPlaceholder
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+
+}