blob: bfa2364b2e51f839c05ddd4ad16c1e9035437d85 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
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: 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
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: (res.arcRadius * 0.7) || 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
}
}
|
