diff --git a/sandbox/controls/Controls.qml b/sandbox/controls/Controls.qml
index 7c58a71d..01d0b0da 100644
--- a/sandbox/controls/Controls.qml
+++ b/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
@@ -198,7 +208,7 @@ GridLayout {
}
StatusProgressBar {
- id: progressBar
+ id: progressBar
text: "Weak"
value: 0.5
fillColor : Theme.palette.pinColor1
diff --git a/src/StatusQ/Controls/StatusLabeledSlider.qml b/src/StatusQ/Controls/StatusLabeledSlider.qml
new file mode 100644
index 00000000..9a93e232
--- /dev/null
+++ b/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
+ }
+ }
+ }
+ }
+}
diff --git a/src/StatusQ/Controls/StatusSlider.qml b/src/StatusQ/Controls/StatusSlider.qml
index 6efd822c..e5811317 100644
--- a/src/StatusQ/Controls/StatusSlider.qml
+++ b/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
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index 958d3d07..8cafc06f 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/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
diff --git a/statusq.qrc b/statusq.qrc
index f5f2850a..b518986f 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -76,6 +76,7 @@
src/StatusQ/Controls/StatusSelect.qml
src/StatusQ/Controls/StatusSelectableText.qml
src/StatusQ/Controls/StatusSlider.qml
+ src/StatusQ/Controls/StatusLabeledSlider.qml
src/StatusQ/Controls/StatusSwitch.qml
src/StatusQ/Controls/StatusSwitchTabBar.qml
src/StatusQ/Controls/StatusSwitchTabButton.qml