143 lines
2.9 KiB
QML
143 lines
2.9 KiB
QML
import QtQuick
|
|
import QtQuick.Templates
|
|
import ZShell.Config
|
|
import qs.Services
|
|
|
|
Slider {
|
|
id: root
|
|
|
|
property color color: Colors.palette.m3secondary
|
|
required property string icon
|
|
property bool initialized: false
|
|
readonly property bool isHorizontal: orientation === Qt.Horizontal
|
|
readonly property bool isVertical: orientation === Qt.Vertical
|
|
property real multiplier: 100
|
|
property real oldValue
|
|
property Component trackContent
|
|
|
|
orientation: Qt.Vertical
|
|
|
|
background: CustomRect {
|
|
id: groove
|
|
|
|
color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
|
|
height: root.availableHeight
|
|
radius: Tokens.rounding.full
|
|
width: root.availableWidth
|
|
x: root.leftPadding
|
|
y: root.topPadding
|
|
|
|
Loader {
|
|
id: trackLoader
|
|
|
|
anchors.fill: parent
|
|
sourceComponent: root.trackContent
|
|
|
|
onLoaded: {
|
|
if (!item)
|
|
return;
|
|
|
|
item.rootSlider = root;
|
|
item.groove = groove;
|
|
item.handleItem = handle;
|
|
}
|
|
}
|
|
}
|
|
handle: Item {
|
|
id: handle
|
|
|
|
property alias moving: icon.moving
|
|
|
|
implicitHeight: Math.min(root.width, root.height)
|
|
implicitWidth: Math.min(root.width, root.height)
|
|
x: root.isHorizontal ? root.leftPadding + root.visualPosition * (root.availableWidth - width) : root.leftPadding + (root.availableWidth - width) / 2
|
|
y: root.isVertical ? root.topPadding + root.visualPosition * (root.availableHeight - height) : root.topPadding + (root.availableHeight - height) / 2
|
|
|
|
Elevation {
|
|
anchors.fill: parent
|
|
level: handleInteraction.containsMouse ? 2 : 1
|
|
radius: rect.radius
|
|
}
|
|
|
|
CustomRect {
|
|
id: rect
|
|
|
|
anchors.fill: parent
|
|
color: Colors.palette.m3inverseSurface
|
|
radius: Tokens.rounding.full
|
|
|
|
MouseArea {
|
|
id: handleInteraction
|
|
|
|
acceptedButtons: Qt.NoButton
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
}
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
property bool moving
|
|
|
|
anchors.centerIn: parent
|
|
anchors.verticalCenterOffset: 1
|
|
text: moving ? Math.round(root.value * 100) : root.icon
|
|
color: Colors.palette.m3inverseOnSurface
|
|
font: moving ? Tokens.font.body.small : Tokens.font.icon.medium
|
|
|
|
Behavior on moving {
|
|
SequentialAnimation {
|
|
Anim {
|
|
target: icon
|
|
property: "scale"
|
|
to: 0.3
|
|
duration: Tokens.anim.durations.small / 2
|
|
easing: Tokens.anim.standardAccel
|
|
}
|
|
PropertyAction {}
|
|
Anim {
|
|
target: icon
|
|
property: "scale"
|
|
to: 1
|
|
duration: Tokens.anim.durations.normal / 2
|
|
easing: Tokens.anim.standardDecel
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Behavior on value {
|
|
Anim {
|
|
type: Anim.StandardLarge
|
|
}
|
|
}
|
|
|
|
onPressedChanged: handle.moving = pressed
|
|
onValueChanged: {
|
|
if (!initialized) {
|
|
initialized = true;
|
|
return;
|
|
}
|
|
|
|
if (Math.abs(value - oldValue) < 0.01)
|
|
return;
|
|
|
|
oldValue = value;
|
|
handle.moving = true;
|
|
stateChangeDelay.restart();
|
|
}
|
|
|
|
Timer {
|
|
id: stateChangeDelay
|
|
|
|
interval: 500
|
|
|
|
onTriggered: {
|
|
if (!root.pressed)
|
|
handle.moving = false;
|
|
}
|
|
}
|
|
}
|