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
readonly property real _fontSize: Math.max(48, screenHeight * 0.28)
opacity: 0
property real _slideX: -80
@ -30,19 +32,47 @@ Item {
rotation: -90
transformOrigin: Item.Center
Text {
id: _clockText
text: Qt.formatTime(new Date(), "HH:mm")
color: S.Theme.base05
font.pixelSize: Math.max(48, root.screenHeight * 0.28)
font.family: S.Theme.fontFamily
font.bold: true
Row {
id: _clockRow
property string _hours: ""
property string _minutes: ""
function _update() {
const now = new Date();
_hours = Qt.formatTime(now, "HH");
_minutes = Qt.formatTime(now, "mm");
}
Component.onCompleted: _update()
Timer {
interval: 1000
running: 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
}