102 lines
2.8 KiB
QML
102 lines
2.8 KiB
QML
import QtQuick
|
|
import Quickshell
|
|
import "root:/config"
|
|
import "root:/components"
|
|
import "root:/popouts"
|
|
|
|
// Centre-stage clock. Hovering drops the calendar.
|
|
BarPill {
|
|
id: root
|
|
|
|
required property var screenRef
|
|
|
|
accent: Theme.accent
|
|
slash: true
|
|
padding: Theme.padS
|
|
implicitWidth: layout.implicitWidth + contentPad * 2
|
|
|
|
SystemClock {
|
|
id: clock
|
|
precision: SystemClock.Seconds
|
|
}
|
|
|
|
onClicked: calendar.pinned = !calendar.pinned
|
|
|
|
Row {
|
|
id: layout
|
|
anchors.centerIn: parent
|
|
spacing: Theme.padM
|
|
|
|
Column {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: -1
|
|
|
|
Text {
|
|
text: Qt.formatDateTime(clock.date, "ddd").toUpperCase()
|
|
color: Theme.accent
|
|
font.family: Theme.fontMono
|
|
font.pixelSize: Theme.fsMicro
|
|
font.letterSpacing: 2.5
|
|
renderType: Text.NativeRendering
|
|
}
|
|
|
|
Text {
|
|
text: Qt.formatDateTime(clock.date, "dd MMM").toUpperCase()
|
|
color: Theme.subtext
|
|
font.family: Theme.fontMono
|
|
font.pixelSize: Theme.fsMicro
|
|
font.letterSpacing: 1
|
|
renderType: Text.NativeRendering
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: 2
|
|
height: 22
|
|
color: Theme.alpha(Theme.accent, 0.6)
|
|
transform: Matrix4x4 {
|
|
matrix: Qt.matrix4x4(1, -Theme.skew, 0, 22 * Theme.skew,
|
|
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
|
|
}
|
|
}
|
|
|
|
SplitText {
|
|
id: timeText
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: Qt.formatDateTime(clock.date, "HH:mm")
|
|
pixelSize: Theme.fsTitle
|
|
split: 1.4
|
|
}
|
|
|
|
// Seconds, kept quiet so they read as a ticking detail rather than noise.
|
|
Text {
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.verticalCenterOffset: 4
|
|
text: Qt.formatDateTime(clock.date, "ss")
|
|
color: Theme.alpha(Theme.primary, 0.8)
|
|
font.family: Theme.fontMono
|
|
font.pixelSize: Theme.fsMicro
|
|
renderType: Text.NativeRendering
|
|
}
|
|
}
|
|
|
|
// Glitch the time on the hour, because it should feel like something happened.
|
|
property int lastHour: -1
|
|
Connections {
|
|
target: clock
|
|
function onDateChanged() {
|
|
const h = clock.date.getHours();
|
|
if (root.lastHour !== -1 && h !== root.lastHour) timeText.glitch();
|
|
root.lastHour = h;
|
|
}
|
|
}
|
|
|
|
CalendarPopout {
|
|
id: calendar
|
|
anchorItem: root
|
|
triggerHovered: root.hovered
|
|
clockDate: clock.date
|
|
}
|
|
}
|