160 lines
4.3 KiB
QML
160 lines
4.3 KiB
QML
import QtQuick
|
|
import QtQuick.Templates
|
|
import Caelestia
|
|
import Caelestia.Components
|
|
import Caelestia.Config
|
|
import qs.components
|
|
import qs.services
|
|
|
|
Slider {
|
|
id: root
|
|
|
|
property bool wavy: true
|
|
property bool animateWave
|
|
property alias waveFrequency: wave.frequency
|
|
property alias waveDuration: waveAnim.duration
|
|
|
|
property color fgColour: enabled ? Colours.palette.m3primary : Qt.alpha(Colours.palette.m3onSurface, 0.38)
|
|
property color bgColour: enabled ? Colours.palette.m3secondaryContainer : Qt.alpha(Colours.palette.m3onSurface, 0.1)
|
|
|
|
property real pos: visualPosition
|
|
|
|
signal interaction(v: real)
|
|
|
|
implicitWidth: 200
|
|
implicitHeight: 12
|
|
|
|
contentItem: Item {
|
|
anchors.fill: parent
|
|
|
|
StyledRect {
|
|
id: remaining
|
|
|
|
anchors.left: handle.right
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.leftMargin: Tokens.spacing.extraSmall
|
|
|
|
implicitHeight: Math.min(width, parent.height)
|
|
opacity: implicitHeight / parent.height
|
|
|
|
radius: Tokens.rounding.full
|
|
topLeftRadius: Tokens.rounding.extraSmall / 2
|
|
bottomLeftRadius: Tokens.rounding.extraSmall / 2
|
|
color: root.bgColour
|
|
}
|
|
|
|
StyledRect {
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.rightMargin: (parent.height - implicitHeight) / 2 * remaining.opacity
|
|
|
|
implicitWidth: implicitHeight
|
|
implicitHeight: 4 * remaining.opacity
|
|
opacity: remaining.opacity
|
|
|
|
radius: Tokens.rounding.full
|
|
color: root.fgColour
|
|
}
|
|
|
|
StyledRect {
|
|
id: handle
|
|
|
|
anchors.left: wave.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.leftMargin: Tokens.spacing.extraSmall
|
|
|
|
implicitWidth: 4
|
|
implicitHeight: parent.height * (mouse.pressed ? 4 : 3)
|
|
|
|
radius: Tokens.rounding.full
|
|
color: root.fgColour
|
|
|
|
Behavior on implicitHeight {
|
|
Anim {
|
|
type: Anim.FastSpatial
|
|
}
|
|
}
|
|
}
|
|
|
|
WavyLine {
|
|
id: wave
|
|
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
|
|
|
|
lineWidth: parent.height * (root.wavy ? 0.7 : 1)
|
|
amplitudeMultiplier: root.wavy ? 0.5 : 0
|
|
startX: x
|
|
fullLength: parent.width - handle.implicitWidth - handle.anchors.leftMargin
|
|
color: root.fgColour
|
|
|
|
Component.onCompleted: implicitWidth = Qt.binding(() => fullLength * root.pos)
|
|
|
|
Anim on waveProgress {
|
|
id: waveAnim
|
|
|
|
running: true
|
|
paused: !root.animateWave
|
|
from: 0
|
|
to: 1
|
|
duration: 1000
|
|
easing.type: Easing.Linear
|
|
loops: Animation.Infinite
|
|
}
|
|
|
|
Behavior on amplitudeMultiplier {
|
|
Anim {
|
|
type: Anim.DefaultEffects
|
|
}
|
|
}
|
|
|
|
Behavior on color {
|
|
CAnim {}
|
|
}
|
|
|
|
Behavior on implicitWidth {
|
|
id: widthBehavior
|
|
|
|
Anim {}
|
|
}
|
|
}
|
|
}
|
|
|
|
Binding {
|
|
id: posBinding
|
|
|
|
target: root
|
|
property: "pos"
|
|
value: CUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
|
|
when: mouse.pressed
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouse
|
|
|
|
property real pressStartX
|
|
property real pressStartPos
|
|
property real dragMovement
|
|
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
preventStealing: true
|
|
implicitHeight: handle.implicitHeight
|
|
|
|
onPressed: e => {
|
|
widthBehavior.enabled = false;
|
|
pressStartX = e.x;
|
|
pressStartPos = root.visualPosition;
|
|
}
|
|
onPositionChanged: e => dragMovement = (e.x - pressStartX) / width
|
|
onReleased: e => {
|
|
root.interaction(posBinding.value);
|
|
widthBehavior.enabled = true;
|
|
dragMovement = 0;
|
|
}
|
|
}
|
|
}
|