me like nix
1import QtQuick
2import QtQuick.Layouts
3import "../../../config" as Config
4import "../../../components"
5import "../../../services" as Services
6
7Item {
8 id: root
9
10 implicitHeight: perfLayout.implicitHeight
11
12 ColumnLayout {
13 id: perfLayout
14 width: parent.width
15 spacing: 12
16
17 // CPU
18 Rectangle {
19 Layout.fillWidth: true
20 implicitHeight: cpuCol.implicitHeight + 24
21 radius: Config.Appearance.rounding.normal
22 color: Config.Colours.surface0
23
24 ColumnLayout {
25 id: cpuCol
26 anchors.fill: parent
27 anchors.margins: 12
28 spacing: 8
29
30 RowLayout {
31 Layout.fillWidth: true
32 Text { color: Config.Colours.peach; font.family: Config.Appearance.font.family; font.pixelSize: 18; text: "\uf2db" }
33 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.normal; font.bold: true; text: "CPU" }
34 Item { Layout.fillWidth: true }
35 Text { color: Config.Colours.peach; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.large; font.bold: true; text: Services.SystemUsage.cpuUsage + "%" }
36 }
37
38 Item {
39 Layout.fillWidth: true; height: 8
40 property real animatedPct: Services.SystemUsage.cpuUsage
41 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
42 Rectangle { anchors.fill: parent; radius: 4; color: Config.Colours.surface1 }
43 Rectangle {
44 width: parent.width * parent.animatedPct / 100
45 height: parent.height; radius: 4; color: Config.Colours.peach
46 }
47 }
48 }
49 }
50
51 // Memory
52 Rectangle {
53 Layout.fillWidth: true
54 implicitHeight: memCol.implicitHeight + 24
55 radius: Config.Appearance.rounding.normal
56 color: Config.Colours.surface0
57
58 ColumnLayout {
59 id: memCol
60 anchors.fill: parent
61 anchors.margins: 12
62 spacing: 8
63
64 RowLayout {
65 Layout.fillWidth: true
66 Text { color: Config.Colours.mauve; font.family: Config.Appearance.font.family; font.pixelSize: 18; text: "\uefc5" }
67 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.normal; font.bold: true; text: "Memory" }
68 Item { Layout.fillWidth: true }
69 Text { color: Config.Colours.mauve; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.large; font.bold: true; text: Services.SystemUsage.memUsage + "%" }
70 }
71
72 Item {
73 Layout.fillWidth: true; height: 8
74 property real animatedPct: Services.SystemUsage.memUsage
75 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
76 Rectangle { anchors.fill: parent; radius: 4; color: Config.Colours.surface1 }
77 Rectangle {
78 width: parent.width * parent.animatedPct / 100
79 height: parent.height; radius: 4; color: Config.Colours.mauve
80 }
81 }
82 }
83 }
84
85 // Temperature
86 Rectangle {
87 Layout.fillWidth: true
88 implicitHeight: tempCol.implicitHeight + 24
89 radius: Config.Appearance.rounding.normal
90 color: Config.Colours.surface0
91
92 ColumnLayout {
93 id: tempCol
94 anchors.fill: parent
95 anchors.margins: 12
96 spacing: 8
97
98 RowLayout {
99 Layout.fillWidth: true
100 Text { color: Config.Colours.red; font.family: Config.Appearance.font.family; font.pixelSize: 18; text: "\uf2c9" }
101 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.normal; font.bold: true; text: "Temperature" }
102 Item { Layout.fillWidth: true }
103 Text { color: Config.Colours.red; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.large; font.bold: true; text: Services.SystemUsage.temperature + "\u00b0C" }
104 }
105
106 Item {
107 Layout.fillWidth: true; height: 8
108 property real animatedPct: Math.min(Services.SystemUsage.temperature, 100)
109 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
110 Rectangle { anchors.fill: parent; radius: 4; color: Config.Colours.surface1 }
111 Rectangle {
112 width: parent.width * parent.animatedPct / 100
113 height: parent.height; radius: 4; color: Config.Colours.red
114 }
115 }
116 }
117 }
118
119 // Storage
120 Rectangle {
121 Layout.fillWidth: true
122 implicitHeight: storageCol.implicitHeight + 24
123 radius: Config.Appearance.rounding.normal
124 color: Config.Colours.surface0
125
126 ColumnLayout {
127 id: storageCol
128 anchors.fill: parent
129 anchors.margins: 12
130 spacing: 8
131
132 RowLayout {
133 Layout.fillWidth: true
134 Text { color: Config.Colours.sapphire; font.family: Config.Appearance.font.family; font.pixelSize: 18; text: "\uf0a0" }
135 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.normal; font.bold: true; text: "Storage" }
136 Item { Layout.fillWidth: true }
137 Text { color: Config.Colours.subtext0; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.small; text: Services.Storage.usedStr + " / " + Services.Storage.totalStr }
138 Text { color: Config.Colours.sapphire; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.large; font.bold: true; text: Services.Storage.usagePercent + "%" }
139 }
140
141 Item {
142 Layout.fillWidth: true; height: 8
143 property real animatedPct: Services.Storage.usagePercent
144 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
145 Rectangle { anchors.fill: parent; radius: 4; color: Config.Colours.surface1 }
146 Rectangle {
147 width: parent.width * parent.animatedPct / 100
148 height: parent.height; radius: 4; color: Config.Colours.sapphire
149 }
150 }
151 }
152 }
153
154 // Battery
155 Rectangle {
156 Layout.fillWidth: true
157 visible: Services.Battery.hasBattery
158 implicitHeight: batCol.implicitHeight + 24
159 radius: Config.Appearance.rounding.normal
160 color: Config.Colours.surface0
161
162 ColumnLayout {
163 id: batCol
164 anchors.fill: parent
165 anchors.margins: 12
166 spacing: 8
167
168 RowLayout {
169 Layout.fillWidth: true
170 Text { color: Config.Colours.green; font.family: Config.Appearance.font.family; font.pixelSize: 18; text: Services.Battery.status === "Charging" ? "\uf0e7" : "\uf241" }
171 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.normal; font.bold: true; text: "Battery" }
172 Item { Layout.fillWidth: true }
173 Text { color: Config.Colours.subtext0; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.small; text: Services.Battery.status }
174 Text { color: Config.Colours.green; font.family: Config.Appearance.font.family; font.pixelSize: Config.Appearance.font.size.large; font.bold: true; text: Services.Battery.percent + "%" }
175 }
176
177 Item {
178 Layout.fillWidth: true; height: 8
179 property real animatedPct: Services.Battery.percent
180 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
181 Rectangle { anchors.fill: parent; radius: 4; color: Config.Colours.surface1 }
182 Rectangle {
183 width: parent.width * parent.animatedPct / 100
184 height: parent.height; radius: 4; color: Config.Colours.green
185 }
186 }
187 }
188 }
189 }
190}