more hacking friendly widgets

This commit is contained in:
end-4
2025-05-26 11:40:13 +02:00
parent 6c1b27bac9
commit a2ab9d2877
9 changed files with 100 additions and 101 deletions
@@ -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
}
}
}