lock: add resources

modules/lock/Content.qml

@@ -69,11 +69,15 @@ RowLayout {
 
         StyledRect {
             Layout.fillWidth: true
-            Layout.fillHeight: true
+            implicitHeight: resources.implicitHeight
 
             topRightRadius: Appearance.rounding.large
             radius: Appearance.rounding.small
             color: Colours.tPalette.m3surfaceContainer
+
+            Resources {
+                id: resources
+            }
         }
 
         StyledRect {

modules/lock/Resources.qml

@@ -0,0 +1,148 @@
+import qs.components
+import qs.components.misc
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+
+GridLayout {
+    id: root
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.margins: Appearance.padding.large
+
+    rowSpacing: Appearance.spacing.large
+    columnSpacing: Appearance.spacing.large
+    rows: 2
+    columns: 2
+
+    Ref {
+        service: SystemUsage
+    }
+
+    Resource {
+        Layout.topMargin: Appearance.padding.large
+        icon: "memory"
+        value: SystemUsage.cpuPerc
+        colour: Colours.palette.m3primary
+    }
+
+    Resource {
+        Layout.topMargin: Appearance.padding.large
+        icon: "thermostat"
+        value: Math.min(1, SystemUsage.cpuTemp / 90)
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        Layout.bottomMargin: Appearance.padding.large
+        icon: "memory_alt"
+        value: SystemUsage.memPerc
+        colour: Colours.palette.m3secondary
+    }
+
+    Resource {
+        Layout.bottomMargin: Appearance.padding.large
+        icon: "hard_disk"
+        value: SystemUsage.storagePerc
+        colour: Colours.palette.m3tertiary
+    }
+
+    component Resource: StyledRect {
+        id: res
+
+        required property string icon
+        required property real value
+        required property color colour
+
+        readonly property int thickness: 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
+
+            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
+                }
+
+                Behavior on strokeColor {
+                    ColorAnimation {
+                        duration: Appearance.anim.durations.large
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+            text: res.icon
+            color: res.colour
+            font.pointSize: (parent.width / 4) || 1
+            font.weight: 600
+        }
+
+        Behavior on value {
+            NumberAnimation {
+                duration: Appearance.anim.durations.large
+                easing.type: Easing.BezierSpline
+                easing.bezierCurve: Appearance.anim.curves.standard
+            }
+        }
+    }
+
+    component Anim: ColorAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}