forked from Shinonome/dots-hyprland
more hacking friendly widgets
This commit is contained in:
@@ -8,22 +8,23 @@ import Quickshell.Widgets
|
||||
|
||||
// Material 3 slider. See https://m3.material.io/components/sliders/overview
|
||||
Slider {
|
||||
id: 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: (slider.pressed ? 0 : 2) * scale
|
||||
property real handleWidth: (slider.pressed ? 3 : 5) * 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: slider.backgroundDotMargins
|
||||
property real handleLimit: root.backgroundDotMargins
|
||||
property real trackHeight: 30 * scale
|
||||
property color highlightColor: Appearance.m3colors.m3primary
|
||||
property color trackColor: Appearance.m3colors.m3secondaryContainer
|
||||
property color handleColor: Appearance.m3colors.m3onSecondaryContainer
|
||||
property real trackRadius: Appearance.rounding.verysmall * scale
|
||||
property real unsharpenRadius: Appearance.rounding.unsharpen
|
||||
|
||||
property real limitedHandleRangeWidth: (slider.availableWidth - handleWidth - slider.handleLimit * 2)
|
||||
property real limitedHandleRangeWidth: (root.availableWidth - handleWidth - root.handleLimit * 2)
|
||||
property string tooltipContent: `${Math.round(value * 100)}%`
|
||||
Layout.fillWidth: true
|
||||
from: 0
|
||||
@@ -46,7 +47,7 @@ Slider {
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onPressed: (mouse) => mouse.accepted = false
|
||||
cursorShape: slider.pressed ? Qt.ClosedHandCursor : Qt.PointingHandCursor
|
||||
cursorShape: root.pressed ? Qt.ClosedHandCursor : Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
background: Item {
|
||||
@@ -57,60 +58,56 @@ Slider {
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
width: slider.handleLimit * 2 + slider.visualPosition * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
|
||||
width: root.handleLimit * 2 + root.visualPosition * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
|
||||
height: trackHeight
|
||||
color: slider.highlightColor
|
||||
topLeftRadius: slider.trackRadius
|
||||
bottomLeftRadius: slider.trackRadius
|
||||
topRightRadius: Appearance.rounding.unsharpen
|
||||
bottomRightRadius: Appearance.rounding.unsharpen
|
||||
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: slider.handleLimit * 2 + (1 - slider.visualPosition) * slider.limitedHandleRangeWidth - (slider.handleMargins + slider.handleWidth / 2)
|
||||
width: root.handleLimit * 2 + (1 - root.visualPosition) * root.limitedHandleRangeWidth - (root.handleMargins + root.handleWidth / 2)
|
||||
height: trackHeight
|
||||
color: slider.trackColor
|
||||
topLeftRadius: Appearance.rounding.unsharpen
|
||||
bottomLeftRadius: Appearance.rounding.unsharpen
|
||||
topRightRadius: slider.trackRadius
|
||||
bottomRightRadius: slider.trackRadius
|
||||
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: slider.backgroundDotMargins
|
||||
width: slider.backgroundDotSize
|
||||
height: slider.backgroundDotSize
|
||||
anchors.rightMargin: root.backgroundDotMargins
|
||||
width: root.backgroundDotSize
|
||||
height: root.backgroundDotSize
|
||||
radius: Appearance.rounding.full
|
||||
color: slider.handleColor
|
||||
color: root.handleColor
|
||||
}
|
||||
}
|
||||
|
||||
handle: Rectangle {
|
||||
id: handle
|
||||
x: slider.leftPadding + slider.handleLimit + slider.visualPosition * slider.limitedHandleRangeWidth
|
||||
y: slider.topPadding + slider.availableHeight / 2 - height / 2
|
||||
implicitWidth: slider.handleWidth
|
||||
implicitHeight: slider.handleHeight
|
||||
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: slider.handleColor
|
||||
color: root.handleColor
|
||||
|
||||
Behavior on implicitWidth {
|
||||
NumberAnimation {
|
||||
duration: Appearance.animation.elementMoveFast.duration
|
||||
easing.type: Appearance.animation.elementMoveFast.type
|
||||
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
|
||||
}
|
||||
animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
|
||||
}
|
||||
|
||||
StyledToolTip {
|
||||
extraVisibleCondition: slider.pressed
|
||||
content: slider.tooltipContent
|
||||
extraVisibleCondition: root.pressed
|
||||
content: root.tooltipContent
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user