drawing sliders

2026-03-15 22:41:10 +01:00
parent 9c955581fa
commit a4e086192d
5 changed files with 411 additions and 198 deletions
@@ -1,141 +1,29 @@
 import QtQuick
-import QtQuick.Templates
 import qs.Config

-Slider {
+BaseStyledSlider {
 	id: root

-	property color color: DynamicColors.palette.m3secondary
-	required property string icon
-	property bool initialized
-	property real oldValue
+	trackContent: Component {
+		Item {
+			property var groove
+			readonly property real handleHeight: handleItem ? handleItem.height : 0
+			property var handleItem
+			readonly property real handleWidth: handleItem ? handleItem.width : 0

-	orientation: Qt.Vertical
-
-	background: CustomRect {
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainer, 2)
-		radius: Appearance.rounding.full
-
-		CustomRect {
-			anchors.left: parent.left
-			anchors.right: parent.right
-			color: root.color
-			implicitHeight: parent.height - y
-			radius: parent.radius
-			y: root.handle.y
-		}
-	}
-	handle: Item {
-		id: handle
-
-		property alias moving: icon.moving
-
-		implicitHeight: root.width
-		implicitWidth: root.width
-		y: root.visualPosition * (root.availableHeight - height)
-
-		Elevation {
-			anchors.fill: parent
-			level: handleInteraction.containsMouse ? 2 : 1
-			radius: rect.radius
-		}
-
-		CustomRect {
-			id: rect
+			// Set by BaseStyledSlider's Loader
+			property var rootSlider

 			anchors.fill: parent
-			color: DynamicColors.palette.m3inverseSurface
-			radius: Appearance.rounding.full

-			MouseArea {
-				id: handleInteraction
-
-				acceptedButtons: Qt.NoButton
-				anchors.fill: parent
-				cursorShape: Qt.PointingHandCursor
-				hoverEnabled: true
+			CustomRect {
+				color: rootSlider?.color
+				height: rootSlider?.isVertical ? handleHeight + (1 - rootSlider?.visualPosition) * (groove?.height - handleHeight) : groove?.height
+				radius: groove?.radius
+				width: rootSlider?.isHorizontal ? handleWidth + rootSlider?.visualPosition * (groove?.width - handleWidth) : groove?.width
+				x: rootSlider?.isHorizontal ? (rootSlider?.mirrored ? groove?.width - width : 0) : 0
+				y: rootSlider?.isVertical ? groove?.height - height : 0
 			}
-
-			MaterialIcon {
-				id: icon
-
-				property bool moving
-
-				function update(): void {
-					animate = !moving;
-					binding.when = moving;
-					font.pointSize = moving ? Appearance.font.size.small : Appearance.font.size.larger;
-					font.family = moving ? Appearance.font.family.sans : Appearance.font.family.material;
-				}
-
-				anchors.centerIn: parent
-				color: DynamicColors.palette.m3inverseOnSurface
-				text: root.icon
-
-				onMovingChanged: anim.restart()
-
-				Binding {
-					id: binding
-
-					property: "text"
-					target: icon
-					value: Math.round(root.value * 100)
-					when: false
-				}
-
-				SequentialAnimation {
-					id: anim
-
-					Anim {
-						duration: Appearance.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardAccel
-						property: "scale"
-						target: icon
-						to: 0
-					}
-
-					ScriptAction {
-						script: icon.update()
-					}
-
-					Anim {
-						duration: Appearance.anim.durations.normal / 2
-						easing.bezierCurve: Appearance.anim.curves.standardDecel
-						property: "scale"
-						target: icon
-						to: 1
-					}
-				}
-			}
-		}
-	}
-	Behavior on value {
-		Anim {
-			duration: Appearance.anim.durations.large
-		}
-	}
-
-	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;
 		}
 	}
 }