color lock screen clock with accent colors per segment
This commit is contained in:
parent
a1c581e443
commit
a55d232b9a
1 changed files with 39 additions and 9 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue