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 property bool isOpen: false
11 implicitHeight: mainLayout.implicitHeight
12
13 property int calYear: new Date().getFullYear()
14 property int calMonth: new Date().getMonth()
15 property var calModel: calendarDays()
16
17 onIsOpenChanged: if (isOpen) resetMonth()
18
19 function calendarDays() {
20 var firstDay = new Date(calYear, calMonth, 1).getDay()
21 var daysInMonth = new Date(calYear, calMonth + 1, 0).getDate()
22 var prevDays = new Date(calYear, calMonth, 0).getDate()
23 var today = new Date()
24 var isCurrentMonth = (calYear === today.getFullYear() && calMonth === today.getMonth())
25 var days = []
26 for (var i = 0; i < 42; i++) {
27 var dayNum = i - firstDay + 1
28 if (dayNum < 1)
29 days.push({ day: prevDays + dayNum, inMonth: false, isToday: false })
30 else if (dayNum > daysInMonth)
31 days.push({ day: dayNum - daysInMonth, inMonth: false, isToday: false })
32 else
33 days.push({ day: dayNum, inMonth: true, isToday: isCurrentMonth && dayNum === today.getDate() })
34 }
35 return days
36 }
37
38 function prevMonth() {
39 if (calMonth === 0) { calMonth = 11; calYear-- }
40 else calMonth--
41 calModel = calendarDays()
42 }
43
44 function nextMonth() {
45 if (calMonth === 11) { calMonth = 0; calYear++ }
46 else calMonth++
47 calModel = calendarDays()
48 }
49
50 function resetMonth() {
51 var now = new Date()
52 calYear = now.getFullYear()
53 calMonth = now.getMonth()
54 calModel = calendarDays()
55 }
56
57 // Resource bar component
58 component ResourceBar: ColumnLayout {
59 property string icon
60 property string label
61 property string valueText
62 property real pct: 0
63 property color barColor
64
65 Layout.fillWidth: true
66 spacing: 2
67
68 // Animated value that smoothly transitions between updates
69 property real animatedPct: pct
70 Behavior on animatedPct { Anim { duration: Config.Appearance.anim.durations.large } }
71
72 RowLayout {
73 Layout.fillWidth: true
74 Text { color: barColor; font.family: Config.Appearance.font.family; font.pixelSize: 12; text: icon }
75 Text { color: Config.Colours.subtext0; font.family: Config.Appearance.font.family; font.pixelSize: 12; text: label }
76 Item { Layout.fillWidth: true }
77 Text { color: Config.Colours.text; font.family: Config.Appearance.font.family; font.pixelSize: 12; text: valueText }
78 }
79
80 Item {
81 Layout.fillWidth: true
82 height: 4
83 Rectangle { anchors.fill: parent; radius: 2; color: Config.Colours.surface1 }
84 Rectangle {
85 width: parent.width * (animatedPct / 100)
86 height: parent.height; radius: 2
87 color: barColor
88 }
89 }
90 }
91
92 RowLayout {
93 id: mainLayout
94 width: parent.width
95 spacing: 16
96
97 // Left: DateTime
98 ColumnLayout {
99 Layout.preferredWidth: 80
100 Layout.fillHeight: true
101 Layout.alignment: Qt.AlignVCenter
102 spacing: 0
103
104 Text {
105 id: dashHour
106 Layout.alignment: Qt.AlignHCenter
107 color: Config.Colours.blue
108 font.family: Config.Appearance.font.family
109 font.pixelSize: 48
110 font.bold: true
111 text: Qt.formatDateTime(new Date(), "HH")
112 }
113
114 Text {
115 Layout.alignment: Qt.AlignHCenter
116 color: Config.Colours.blue
117 font.family: Config.Appearance.font.family
118 font.pixelSize: 14
119 text: "\u2022\u2022\u2022"
120 }
121
122 Text {
123 id: dashMin
124 Layout.alignment: Qt.AlignHCenter
125 color: Config.Colours.blue
126 font.family: Config.Appearance.font.family
127 font.pixelSize: 48
128 font.bold: true
129 text: Qt.formatDateTime(new Date(), "mm")
130 }
131
132 Text {
133 Layout.alignment: Qt.AlignHCenter
134 Layout.topMargin: 4
135 color: Config.Colours.subtext0
136 font.family: Config.Appearance.font.family
137 font.pixelSize: Config.Appearance.font.size.small
138 text: Qt.formatDateTime(new Date(), "dddd")
139 }
140
141 Text {
142 Layout.alignment: Qt.AlignHCenter
143 color: Config.Colours.overlay0
144 font.family: Config.Appearance.font.family
145 font.pixelSize: Config.Appearance.font.size.small
146 text: Qt.formatDateTime(new Date(), "MMMM d, yyyy")
147 }
148
149 Timer {
150 interval: 1000
151 running: root.isOpen
152 repeat: true
153 onTriggered: {
154 var now = new Date()
155 dashHour.text = Qt.formatDateTime(now, "HH")
156 dashMin.text = Qt.formatDateTime(now, "mm")
157 }
158 }
159 }
160
161 Rectangle { width: 1; Layout.fillHeight: true; color: Config.Colours.surface1 }
162
163 // Center: Calendar
164 ColumnLayout {
165 Layout.fillWidth: true
166 Layout.fillHeight: true
167 spacing: 4
168
169 RowLayout {
170 Layout.fillWidth: true
171
172 Text {
173 color: Config.Colours.overlay0
174 font.family: Config.Appearance.font.family
175 font.pixelSize: 16
176 text: "\uf053"
177 MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: root.prevMonth() }
178 }
179 Item { Layout.fillWidth: true }
180 Text {
181 color: Config.Colours.text
182 font.family: Config.Appearance.font.family
183 font.pixelSize: Config.Appearance.font.size.normal
184 font.bold: true
185 text: new Date(root.calYear, root.calMonth, 1).toLocaleDateString(Qt.locale(), "MMMM yyyy")
186 MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: root.resetMonth() }
187 }
188 Item { Layout.fillWidth: true }
189 Text {
190 color: Config.Colours.overlay0
191 font.family: Config.Appearance.font.family
192 font.pixelSize: 16
193 text: "\uf054"
194 MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: root.nextMonth() }
195 }
196 }
197
198 Row {
199 Layout.fillWidth: true
200 Repeater {
201 model: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
202 delegate: Text {
203 required property string modelData
204 width: parent.width / 7
205 horizontalAlignment: Text.AlignHCenter
206 color: Config.Colours.overlay0
207 font.family: Config.Appearance.font.family
208 font.pixelSize: 11
209 text: modelData
210 }
211 }
212 }
213
214 Grid {
215 Layout.fillWidth: true
216 columns: 7
217 rowSpacing: 2
218
219 Repeater {
220 model: root.calModel
221 delegate: Item {
222 required property var modelData
223 width: parent.width / 7
224 height: 28
225
226 Rectangle {
227 anchors.centerIn: parent
228 width: 24; height: 24; radius: 12
229 color: modelData.isToday ? Config.Colours.blue : "transparent"
230 }
231
232 Text {
233 anchors.centerIn: parent
234 color: modelData.isToday ? Config.Colours.crust
235 : (modelData.inMonth ? Config.Colours.text : Config.Colours.overlay0)
236 font.family: Config.Appearance.font.family
237 font.pixelSize: 12
238 font.bold: modelData.isToday
239 text: modelData.day
240 }
241 }
242 }
243 }
244 }
245
246 Rectangle { width: 1; Layout.fillHeight: true; color: Config.Colours.surface1 }
247
248 // Right: Weather + Resources + Power
249 ColumnLayout {
250 Layout.preferredWidth: 200
251 Layout.fillHeight: true
252 spacing: 10
253
254 // Weather
255 RowLayout {
256 Layout.fillWidth: true
257 spacing: 8
258 visible: Services.Weather.weather !== ""
259
260 Text {
261 color: Config.Colours.yellow
262 font.family: Config.Appearance.font.family
263 font.pixelSize: 20
264 text: "\uf0eb"
265 }
266 Text {
267 Layout.fillWidth: true
268 color: Config.Colours.text
269 font.family: Config.Appearance.font.family
270 font.pixelSize: Config.Appearance.font.size.normal
271 text: Services.Weather.weather
272 wrapMode: Text.WordWrap
273 }
274 }
275
276 Rectangle {
277 Layout.fillWidth: true; height: 1; color: Config.Colours.surface1
278 visible: Services.Weather.weather !== ""
279 }
280
281 // Resources
282 Text {
283 color: Config.Colours.text
284 font.family: Config.Appearance.font.family
285 font.pixelSize: Config.Appearance.font.size.normal
286 font.bold: true
287 text: "Resources"
288 }
289
290 ResourceBar {
291 icon: "\uf2db"; label: "CPU"
292 valueText: Services.SystemUsage.cpuUsage + "%"
293 pct: Services.SystemUsage.cpuUsage
294 barColor: Config.Colours.peach
295 }
296
297 ResourceBar {
298 icon: "\uefc5"; label: "Memory"
299 valueText: Services.SystemUsage.memUsage + "%"
300 pct: Services.SystemUsage.memUsage
301 barColor: Config.Colours.mauve
302 }
303
304 ResourceBar {
305 icon: "\uf0a0"; label: "Storage"
306 valueText: Services.Storage.usagePercent + "%"
307 pct: Services.Storage.usagePercent
308 barColor: Config.Colours.sapphire
309 }
310
311 ResourceBar {
312 icon: "\uf2c9"; label: "Temp"
313 valueText: Services.SystemUsage.temperature + "\u00b0C"
314 pct: Math.min(Services.SystemUsage.temperature, 100)
315 barColor: Config.Colours.red
316 }
317
318 // Power profile
319 Rectangle {
320 Layout.fillWidth: true; height: 1; color: Config.Colours.surface1
321 }
322
323 RowLayout {
324 Layout.fillWidth: true
325 spacing: 8
326
327 Text {
328 color: {
329 if (Services.PowerProfile.profile === "performance") return Config.Colours.peach
330 if (Services.PowerProfile.profile === "power-saver") return Config.Colours.green
331 return Config.Colours.blue
332 }
333 font.family: Config.Appearance.font.family
334 font.pixelSize: 14
335 text: {
336 if (Services.PowerProfile.profile === "performance") return "\uf0e7"
337 if (Services.PowerProfile.profile === "power-saver") return "\uf06c"
338 return "\uf24e"
339 }
340 }
341 Text {
342 color: Config.Colours.subtext0
343 font.family: Config.Appearance.font.family
344 font.pixelSize: 12
345 text: {
346 if (Services.PowerProfile.profile === "performance") return "Performance"
347 if (Services.PowerProfile.profile === "power-saver") return "Power Saver"
348 return "Balanced"
349 }
350 }
351 Item { Layout.fillWidth: true }
352 Text {
353 color: Config.Colours.text
354 font.family: Config.Appearance.font.family
355 font.pixelSize: 12
356 text: Services.Battery.percent + "%"
357 visible: Services.Battery.hasBattery
358 }
359 }
360
361 Item { Layout.fillHeight: true }
362 }
363 }
364}