diff options
| author | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-08-14 23:22:47 +1000 |
|---|---|---|
| committer | 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> | 2025-08-14 23:22:47 +1000 |
| commit | edef1d21fb59b62ae8b684b375b046fc483dcd48 (patch) | |
| tree | ac31ae636a30082ff453f8c23f0483b74abf1926 /modules/lock | |
| parent | nix: use newer version of app2unit (#419) (diff) | |
| download | caelestia-shell-edef1d21fb59b62ae8b684b375b046fc483dcd48.tar.gz caelestia-shell-edef1d21fb59b62ae8b684b375b046fc483dcd48.tar.bz2 caelestia-shell-edef1d21fb59b62ae8b684b375b046fc483dcd48.zip | |
internal: better loading indicator
Abstract circular progress into own component
Diffstat (limited to 'modules/lock')
| -rw-r--r-- | modules/lock/Resources.qml | 67 |
1 files changed, 10 insertions, 57 deletions
diff --git a/modules/lock/Resources.qml b/modules/lock/Resources.qml index 0ba0188..8ff1708 100644 --- a/modules/lock/Resources.qml +++ b/modules/lock/Resources.qml @@ -1,4 +1,5 @@ import qs.components +import qs.components.controls import qs.components.misc import qs.services import qs.config @@ -57,69 +58,21 @@ GridLayout { required property real value required property color colour - readonly property int thickness: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal - readonly property real arcRadius: (width - Appearance.padding.large * 3 - thickness) / 2 - readonly property real vValue: value || 1 / 360 - readonly property real gapAngle: ((Appearance.spacing.small + thickness) / (arcRadius || 1)) * (180 / Math.PI) - Layout.fillWidth: true implicitHeight: width color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2) radius: Appearance.rounding.large - Shape { - anchors.fill: parent - preferredRendererType: Shape.CurveRenderer - asynchronous: true - - ShapePath { - fillColor: "transparent" - strokeColor: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3) - strokeWidth: res.thickness - capStyle: ShapePath.RoundCap - - PathAngleArc { - startAngle: -90 + 360 * res.vValue + res.gapAngle - sweepAngle: 360 * (1 - res.vValue) - res.gapAngle * 2 - radiusX: res.arcRadius - radiusY: res.arcRadius - centerX: res.width / 2 - centerY: res.width / 2 - } - - Behavior on strokeColor { - ColorAnimation { - duration: Appearance.anim.durations.large - easing.type: Easing.BezierSpline - easing.bezierCurve: Appearance.anim.curves.standard - } - } - } - - ShapePath { - fillColor: "transparent" - strokeColor: res.colour - strokeWidth: res.thickness - capStyle: ShapePath.RoundCap - - PathAngleArc { - startAngle: -90 - sweepAngle: 360 * res.vValue - radiusX: res.arcRadius - radiusY: res.arcRadius - centerX: res.width / 2 - centerY: res.width / 2 - } + CircularProgress { + id: circ - Behavior on strokeColor { - ColorAnimation { - duration: Appearance.anim.durations.large - easing.type: Easing.BezierSpline - easing.bezierCurve: Appearance.anim.curves.standard - } - } - } + anchors.fill: parent + value: res.value + padding: Appearance.padding.large * 3 + fgColour: res.colour + bgColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3) + strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal } MaterialIcon { @@ -128,7 +81,7 @@ GridLayout { anchors.centerIn: parent text: res.icon color: res.colour - font.pointSize: (res.arcRadius * 0.7) || 1 + font.pointSize: (circ.arcRadius * 0.7) || 1 font.weight: 600 } |