From 07e711e30c4d1dd3f6677210a7b1335d7ae172d9 Mon Sep 17 00:00:00 2001 From: Mikhail Rogachev Date: Wed, 25 May 2022 11:12:50 +0300 Subject: [PATCH] feat(StatusLabeledSlider): add ability to decorate sliders and slider, decorated with lablels (#687) Close #686 --- sandbox/controls/Controls.qml | 12 ++++- src/StatusQ/Controls/StatusLabeledSlider.qml | 53 ++++++++++++++++++++ src/StatusQ/Controls/StatusSlider.qml | 43 ++++++++++------ src/StatusQ/Controls/qmldir | 1 + statusq.qrc | 1 + 5 files changed, 95 insertions(+), 15 deletions(-) create mode 100644 src/StatusQ/Controls/StatusLabeledSlider.qml 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