feat: import M3Shapes, M3 loading indicator and weather + resources + media revamp in lockscreen

Modules/Lock/Resources.qml

@@ -1,81 +1,82 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
+import M3Shapes
 import ZShell.Services
 import qs.Components
-import qs.Helpers
 import qs.Config
+import qs.Effects
 
-GridLayout {
+CustomRect {
 	id: root
 
-	anchors.left: parent.left
-	anchors.margins: Appearance.padding.large
-	anchors.right: parent.right
-	columnSpacing: Appearance.spacing.large
-	columns: 2
-	rowSpacing: Appearance.spacing.large
-	rows: 1
+	readonly property real fontScale: {
+		const diff = width / 391 - 1; // 391 is the width at 1080 height screen
+		return 1 + Math.pow(Math.abs(diff), 0.8) * Math.sign(diff);
+	}
+
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
+	radius: Appearance.rounding.small
+
+	ServiceRef {
+		service: Cpu
+	}
 
 	ServiceRef {
 		service: Memory
 	}
 
 	ServiceRef {
-		service: Cpu
+		service: Storage
 	}
 
-	Resource {
-		Layout.bottomMargin: Appearance.padding.large
-		Layout.topMargin: Appearance.padding.large
-		fgColor: DynamicColors.palette.m3primary
-		icon: "memory"
-		value: Cpu.percentage
+	RowLayout {
+		id: layout
+
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.large
+		spacing: Appearance.spacing.large
+
+		Resource {
+			id: cpu
+
+			fgColor: DynamicColors.palette.m3primary
+			icon: "memory"
+			value: Cpu.percentage
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3tertiary
+			icon: "memory_alt"
+			value: Memory.percentage
+		}
+
+		Resource {
+			fgColor: DynamicColors.palette.m3secondary
+			icon: "hard_disk"
+			value: Storage.percentage
+		}
 	}
 
-	Resource {
-		Layout.bottomMargin: Appearance.padding.large
-		Layout.topMargin: Appearance.padding.large
-		fgColor: DynamicColors.palette.m3secondary
-		icon: "memory_alt"
-		value: Memory.percentage
-	}
-
-	component Resource: CustomRect {
+	component Resource: CircularProgress {
 		id: res
 
-		required property color fgColor
 		required property string icon
-		required property real value
 
 		Layout.fillWidth: true
-		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
-		implicitHeight: width
-		radius: Appearance.rounding.large
+		implicitSize: width
 
-		Behavior on value {
+		Behavior on clampedVal {
 			Anim {
-				duration: Appearance.anim.durations.large
 			}
 		}
 
-		CircularProgress {
-			id: circ
-
-			anchors.fill: parent
-			bgColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 3)
-			fgColor: res.fgColor
-			padding: Appearance.padding.large * 3
-			strokeWidth: width < 200 ? Appearance.padding.smaller : Appearance.padding.normal
-			value: res.value
-		}
-
 		MaterialIcon {
-			id: icon
-
 			anchors.centerIn: parent
 			color: res.fgColor
-			font.pointSize: (circ.arcRadius * 0.7) || 1
-			font.weight: 600
+			font.pointSize: Appearance.font.size.extraLarge
 			text: res.icon
 		}
 	}