forked from Shinonome/dots-hyprland
end-4
113 lines
4.1 KiB
QML
113 lines
4.1 KiB
QML
import "root:/modules/common"
|
|
import "root:/modules/common/widgets"
|
|
import "root:/services"
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Quickshell.Widgets
|
|
|
|
// Material 3 slider. See https://m3.material.io/components/sliders/overview
|
|
Slider {
|
|
id: root
|
|
property real scale: 0.85
|
|
property real backgroundDotSize: 4 * scale
|
|
property real backgroundDotMargins: 4 * scale
|
|
// property real handleMargins: 0 * scale
|
|
property real handleMargins: (root.pressed ? 0 : 2) * scale
|
|
property real handleWidth: (root.pressed ? 3 : 5) * scale
|
|
property real handleHeight: 44 * scale
|
|
property real handleLimit: root.backgroundDotMargins
|
|
property real trackHeight: 30 * scale
|
|
property color highlightColor: Appearance.colors.colPrimary
|
|
property color trackColor: Appearance.colors.colSecondaryContainer
|
|
property color handleColor: Appearance.m3colors.m3onSecondaryContainer
|
|
property real trackRadius: Appearance.rounding.verysmall * scale
|
|
property real unsharpenRadius: Appearance.rounding.unsharpen
|
|
|
|
property real limitedHandleRangeWidth: (root.availableWidth - handleWidth - root.handleLimit * 2)
|
|
property string tooltipContent: `${Math.round(value * 100)}%`
|
|
Layout.fillWidth: true
|
|
from: 0
|
|
to: 1
|
|
|
|
Behavior on value { // This makes the adjusted value (like volume) shift smoothly
|
|
SmoothedAnimation {
|
|
velocity: Appearance.animation.elementMoveFast.velocity
|
|
}
|
|
}
|
|
|
|
Behavior on handleMargins {
|
|
NumberAnimation {
|
|
duration: Appearance.animation.elementMoveFast.duration
|
|
easing.type: Appearance.animation.elementMoveFast.type
|
|
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onPressed: (mouse) => mouse.accepted = false
|
|
cursorShape: root.pressed ? Qt.ClosedHandCursor : Qt.PointingHandCursor
|
|
}
|
|
|
|
background: Item {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
implicitHeight: trackHeight
|
|
|
|
// Fill left
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.left: parent.left
|
|
width: root.handleLimit * 2 + root.visualPosition * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
|
|
height: trackHeight
|
|
color: root.highlightColor
|
|
topLeftRadius: root.trackRadius
|
|
bottomLeftRadius: root.trackRadius
|
|
topRightRadius: root.unsharpenRadius
|
|
bottomRightRadius: root.unsharpenRadius
|
|
}
|
|
|
|
// Fill right
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.right: parent.right
|
|
width: root.handleLimit * 2 + (1 - root.visualPosition) * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
|
|
height: trackHeight
|
|
color: root.trackColor
|
|
topLeftRadius: root.unsharpenRadius
|
|
bottomLeftRadius: root.unsharpenRadius
|
|
topRightRadius: root.trackRadius
|
|
bottomRightRadius: root.trackRadius
|
|
}
|
|
|
|
// Dot at the end
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: root.backgroundDotMargins
|
|
width: root.backgroundDotSize
|
|
height: root.backgroundDotSize
|
|
radius: Appearance.rounding.full
|
|
color: root.handleColor
|
|
}
|
|
}
|
|
|
|
handle: Rectangle {
|
|
id: handle
|
|
x: root.leftPadding + root.handleLimit + root.visualPosition * root.limitedHandleRangeWidth
|
|
y: root.topPadding + root.availableHeight / 2 - height / 2
|
|
implicitWidth: root.handleWidth
|
|
implicitHeight: root.handleHeight
|
|
radius: Appearance.rounding.full
|
|
color: root.handleColor
|
|
|
|
Behavior on implicitWidth {
|
|
animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
|
|
}
|
|
|
|
StyledToolTip {
|
|
extraVisibleCondition: root.pressed
|
|
content: root.tooltipContent
|
|
}
|
|
}
|
|
} |