feat(Components): Add StatusSlider

Closes: #13
This commit is contained in:
B.Melnik 2021-05-28 13:09:58 +03:00 committed by Pascal Precht
parent 1548212e47
commit c0ad32a192
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 68 additions and 0 deletions

View File

@ -134,4 +134,11 @@ GridLayout {
icon.color: Theme.palette.miscColor7 icon.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.CommunityChat type: StatusChatInfoButton.Type.CommunityChat
} }
StatusSlider {
width: 360
from: 0
to: 100
value: 40
}
} }

View File

@ -0,0 +1,60 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Slider {
id: statusSlider
implicitWidth: 360
implicitHeight: 4
leftPadding: 0
background: Rectangle {
implicitHeight: 4
implicitWidth: 100
color: {
if (statusSlider.value === statusSlider.to) {
return Theme.palette.primaryColor1
}
return Theme.palette.primaryColor3
}
radius: 2
Rectangle {
radius: 2
anchors.fill: parent
visible: statusSlider.value > statusSlider.from && statusSlider.value < statusSlider.to
gradient: Gradient {
GradientStop { color: Theme.palette.primaryColor1 ; position: 0 }
GradientStop { color: Theme.palette.primaryColor3 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
GradientStop { color: Theme.palette.primaryColor1 ; position: (((statusSlider.value - statusSlider.from) * 100) / (statusSlider.to - statusSlider.from) / 100).toFixed(2) }
GradientStop { color: Theme.palette.primaryColor3 ; position: 1 }
orientation: Gradient.Horizontal
}
}
} // background
handle: Rectangle {
x: statusSlider.leftPadding + statusSlider.visualPosition * (statusSlider.availableWidth - width / 2)
anchors.verticalCenter: parent.verticalCenter
color: Theme.palette.white
implicitWidth: 28
implicitHeight: 28
radius: 14
layer.enabled: true
layer.effect: DropShadow {
width: parent.width
height: parent.height
visible: true
verticalOffset: 2
samples: 15
fast: true
cached: true
color: Theme.palette.dropShadow
}
}
}

View File

@ -12,3 +12,4 @@ StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
StatusSwitch 0.1 StatusSwitch.qml StatusSwitch 0.1 StatusSwitch.qml
StatusRadioButton 0.1 StatusRadioButton.qml StatusRadioButton 0.1 StatusRadioButton.qml
StatusCheckBox 0.1 StatusCheckBox.qml StatusCheckBox 0.1 StatusCheckBox.qml
StatusSlider 0.1 StatusSlider.qml