color lock screen clock with accent colors per segment

This commit is contained in:
Damocles 2026-04-18 10:19:45 +02:00
parent a1c581e443
commit a55d232b9a

View file

@ -6,6 +6,8 @@ Item {
required property real screenHeight required property real screenHeight
readonly property real _fontSize: Math.max(48, screenHeight * 0.28)
opacity: 0 opacity: 0
property real _slideX: -80 property real _slideX: -80
@ -30,19 +32,47 @@ Item {
rotation: -90 rotation: -90
transformOrigin: Item.Center transformOrigin: Item.Center
Text { Row {
id: _clockText id: _clockRow
text: Qt.formatTime(new Date(), "HH:mm")
color: S.Theme.base05 property string _hours: ""
font.pixelSize: Math.max(48, root.screenHeight * 0.28) property string _minutes: ""
font.family: S.Theme.fontFamily
font.bold: true function _update() {
const now = new Date();
_hours = Qt.formatTime(now, "HH");
_minutes = Qt.formatTime(now, "mm");
}
Component.onCompleted: _update()
Timer { Timer {
interval: 1000 interval: 1000
running: true running: true
repeat: true repeat: true
onTriggered: parent.text = Qt.formatTime(new Date(), "HH:mm") onTriggered: _clockRow._update()
}
Text {
text: _clockRow._hours
color: S.Theme.base0C
font.pixelSize: root._fontSize
font.family: S.Theme.fontFamily
font.bold: true
}
Text {
text: ":"
color: S.Theme.base0E
font.pixelSize: root._fontSize
font.family: S.Theme.fontFamily
font.bold: true
}
Text {
text: _clockRow._minutes
color: S.Theme.base09
font.pixelSize: root._fontSize
font.family: S.Theme.fontFamily
font.bold: true
} }
} }
@ -61,5 +91,5 @@ Item {
} }
} }
implicitWidth: _clockText.height implicitWidth: _clockRow.height
} }