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

Close #686
This commit is contained in:
Mikhail Rogachev 2022-05-25 11:12:50 +03:00 committed by GitHub
parent 0b1a910b06
commit 07e711e30c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 15 deletions

View File

@ -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

View File

@ -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
}
}
}
}
}

View File

@ -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

View File

@ -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

View File

@ -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>