init

desktop/kadence_desktop/qml/components/TimerDial.qml

@@ -0,0 +1,87 @@
+// The countdown ring, drawn with Canvas.
+//
+// A hero number inside a progress arc: the number is what you read, the arc is
+// the glance. The arc colour is the only thing that says focus vs break.
+import QtQuick
+import QtQuick.Controls.Material
+
+Item {
+    id: dial
+    property real progress: 0          // 0..1 elapsed
+    property string clockText: "00:00"
+    property string label: ""
+    property string sublabel: ""
+    property color accent: "#2a78d6"
+    property bool paused: false
+
+    implicitWidth: 260
+    implicitHeight: 260
+
+    onProgressChanged: canvas.requestPaint()
+    onAccentChanged: canvas.requestPaint()
+    onPausedChanged: canvas.requestPaint()
+
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+        antialiasing: true
+
+        onPaint: {
+            var ctx = getContext("2d")
+            ctx.reset()
+            var centre = Math.min(width, height) / 2
+            var stroke = Math.max(10, centre * 0.11)
+            var radius = centre - stroke
+
+            ctx.lineCap = "round"
+            ctx.lineWidth = stroke
+
+            ctx.beginPath()
+            ctx.strokeStyle = Qt.rgba(0.5, 0.5, 0.5, 0.18)
+            ctx.arc(centre, centre, radius, 0, Math.PI * 2)
+            ctx.stroke()
+
+            var remaining = 1 - Math.max(0, Math.min(1, dial.progress))
+            if (remaining > 0) {
+                ctx.beginPath()
+                ctx.globalAlpha = dial.paused ? 0.45 : 1
+                ctx.strokeStyle = dial.accent
+                ctx.arc(centre, centre, radius, -Math.PI / 2, -Math.PI / 2 + remaining * Math.PI * 2)
+                ctx.stroke()
+            }
+        }
+    }
+
+    Column {
+        anchors.centerIn: parent
+        spacing: 4
+        width: parent.width * 0.72
+
+        Label {
+            width: parent.width
+            text: dial.label.toUpperCase()
+            font.pixelSize: 11
+            font.letterSpacing: 1.5
+            opacity: 0.65
+            horizontalAlignment: Text.AlignHCenter
+        }
+        Label {
+            width: parent.width
+            text: dial.clockText
+            font.pixelSize: Math.round(dial.width * 0.2)
+            font.weight: Font.Light
+            font.family: "Roboto Mono, monospace"
+            opacity: dial.paused ? 0.6 : 1
+            horizontalAlignment: Text.AlignHCenter
+        }
+        Label {
+            width: parent.width
+            text: dial.sublabel
+            visible: dial.sublabel !== ""
+            font.pixelSize: 13
+            opacity: 0.75
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
+}