feat(StatusLabeledSlider): add ability to decorate sliders and slider, decorated with lablels (#687)

Close #686

ui/StatusQ/sandbox/controls/Controls.qml

@@ -189,6 +189,16 @@ GridLayout {
         value: 40
     }
 
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
+    }
+
+    StatusLabeledSlider {
+        width: 360
+        model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
+    }
+
     StatusBanner {
         id: banner
         width: 360

ui/StatusQ/src/StatusQ/Controls/StatusLabeledSlider.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusSlider {
+    id: root
+
+    property var model: []
+    property int fontSize: 12
+    property int labelMargin: 2
+
+    fillColor: bgColor
+    handleColor: Theme.palette.primaryColor1
+    handleSize: 14
+    from: 0
+    to: model.length - 1
+    stepSize: 1
+    snapMode: Slider.SnapAlways
+
+    decoration: Item {
+        implicitHeight: handleSize + fontSize + labelMargin
+
+        Repeater {
+            id: repeater
+            model: root.model
+
+            Rectangle {
+                x: (background.width - width * 0.5) / (repeater.count - 1) * index
+                y: (root.bgHeight -height) / 2
+                implicitWidth: root.handleSize
+                implicitHeight: root.handleSize
+                radius: root.handleSize / 2
+                color: root.bgColor
+                border.color: Theme.palette.statusAppLayout.backgroundColor
+                border.width: 2
+
+                StatusBaseText {
+                    anchors.top: parent.bottom
+                    anchors.topMargin: root.labelMargin
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    horizontalAlignment: Qt.AlignHCenter
+                    color: Theme.palette.baseColor1
+                    font.pixelSize: root.fontSize
+                    text: modelData
+                }
+            }
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Controls/StatusSlider.qml

@@ -11,40 +11,55 @@ import StatusQ.Controls 0.1
   as the /c handle so user can grab it fully.
  */
 Slider {
-    id: statusSlider
+    id: root
+
+    property int handleSize: 28
+    property int bgHeight: 4
+    property color handleColor: Theme.palette.white
+    property color bgColor: Theme.palette.baseColor2
+    property color fillColor: Theme.palette.primaryColor1
+
+    property alias decoration: decorationContainer.sourceComponent
 
     implicitWidth: 360
-    implicitHeight: Math.max(handle.implicitHeight, background.implicitHeight)
+    implicitHeight: Math.max(handle.implicitHeight,
+                             background.implicitHeight + decorationContainer.height)
 
     leftPadding: 0
 
     background: Rectangle {
         id: bgRect
 
-        x: statusSlider.leftPadding
-        y: statusSlider.topPadding + statusSlider.availableHeight / 2 - height / 2
+        x: root.leftPadding
+        y: root.topPadding
         implicitWidth: 100
-        implicitHeight: 4
-        width: statusSlider.availableWidth
+        implicitHeight: bgHeight
+        width: root.availableWidth
         height: implicitHeight
-        color: Theme.palette.primaryColor3
+        color: root.bgColor
         radius: 2
 
+        Loader {
+            id: decorationContainer
+            anchors.top: parent.top
+            width: parent.height
+        }
+
         Rectangle {
-            width: statusSlider.visualPosition * parent.width
+            width: root.visualPosition * parent.width
             height: parent.height
-            color: Theme.palette.primaryColor1
+            color: root.fillColor
             radius: 2
         }
     } // background
 
     handle: Rectangle {
-        x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
+        x: root.leftPadding + root.visualPosition * (root.availableWidth - width / 2)
         anchors.verticalCenter: bgRect.verticalCenter
-        color: Theme.palette.white
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: 14
+        color: root.handleColor
+        implicitWidth: root.handleSize
+        implicitHeight: root.handleSize
+        radius: root.handleSize / 2
         layer.enabled: true
         layer.effect: DropShadow {
             width: parent.width

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -22,6 +22,7 @@ StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml
 StatusSlider 0.1 StatusSlider.qml
+StatusLabeledSlider 0.1 StatusLabeledSlider.qml
 StatusSelect 0.1 StatusSelect.qml
 StatusBaseInput 0.1 StatusBaseInput.qml
 StatusInput 0.1 StatusInput.qml

ui/StatusQ/statusq.qrc

@@ -76,6 +76,7 @@
         <file>src/StatusQ/Controls/StatusSelect.qml</file>
         <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
         <file>src/StatusQ/Controls/StatusSlider.qml</file>
+        <file>src/StatusQ/Controls/StatusLabeledSlider.qml</file>
         <file>src/StatusQ/Controls/StatusSwitch.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabBar.qml</file>
         <file>src/StatusQ/Controls/StatusSwitchTabButton.qml</file>