nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: expressive lock clock

Browse source
This commit is contained in:
Soramane 2026-05-28 17:08:15 +08:00
parent f829fc882c
commit 69428059e0
2 changed files with 92 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
modules/lock/Center.qml
View file

@ -22,58 +22,21 @@ ColumnLayout {
spacing: Tokens.spacing.largeIncreased * 2
RowLayout {
Clock {
Layout.alignment: Qt.AlignHCenter
spacing: Tokens.spacing.small
StyledText {
Layout.alignment: Qt.AlignVCenter
text: Time.hourStr
color: Colours.palette.m3secondary
font: Tokens.font.clock.size(Math.floor(28 * 3 * root.centerScale)).weight(Font.Bold).build()
}
StyledText {
Layout.alignment: Qt.AlignVCenter
text: ":"
color: Colours.palette.m3primary
font: Tokens.font.clock.size(Math.floor(28 * 3 * root.centerScale)).weight(Font.Bold).build()
}
StyledText {
Layout.alignment: Qt.AlignVCenter
text: Time.minuteStr
color: Colours.palette.m3secondary
font: Tokens.font.clock.size(Math.floor(28 * 3 * root.centerScale)).weight(Font.Bold).build()
}
Loader {
asynchronous: true
Layout.leftMargin: Tokens.spacing.small
Layout.alignment: Qt.AlignVCenter
active: GlobalConfig.services.useTwelveHourClock
visible: active
sourceComponent: StyledText {
text: Time.amPmStr
color: Colours.palette.m3primary
font: Tokens.font.clock.size(Math.floor(28 * 2 * root.centerScale)).weight(Font.Bold).build()
}
}
centerScale: root.centerScale
}
StyledText {
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: -Tokens.padding.extraLargeIncreased
Layout.topMargin: -Tokens.padding.largeIncreased
text: Time.format("dddd, d MMMM yyyy")
color: Colours.palette.m3tertiary
font: Tokens.font.mono.builders.large.size(Math.floor(28 * root.centerScale)).weight(Font.Bold).build()
text: Time.format("dddd • d MMM").toUpperCase()
color: Colours.palette.m3onSurface
font: Tokens.font.title.builders.medium.weight(Font.DemiBold).build()
}
StyledClippingRect {
Layout.topMargin: Tokens.spacing.largeIncreased * 2
Layout.alignment: Qt.AlignHCenter
implicitWidth: root.centerWidth / 2

86
modules/lock/Clock.qml Normal file
View file

@ -0,0 +1,86 @@
import QtQuick
import Caelestia.Config
import qs.components
import qs.services
Item {
id: root
required property real centerScale
function calcTopOff(metrics: TextMetrics): real {
return metrics.tightBoundingRect.y - metrics.boundingRect.y;
}
implicitWidth: hours.implicitWidth + minutes.implicitWidth + Tokens.spacing.small
implicitHeight: hourMetrics.tightBoundingRect.height
StyledText {
id: hours
y: -root.calcTopOff(hourMetrics)
text: Time.hourStr
color: Colours.palette.m3primary
font: Tokens.font.headline.builders.large.scale(7 * root.centerScale).width(30).build()
TextMetrics {
id: hourMetrics
text: hours.text
font: hours.font
}
}
StyledText {
id: minutes
anchors.right: parent.right
y: -root.calcTopOff(minuteMetrics)
text: Time.minuteStr
color: Colours.palette.m3secondary
font: Tokens.font.headline.builders.large.scale(3.8 * root.centerScale).width(30).build()
TextMetrics {
id: minuteMetrics
text: minutes.text
font: minutes.font
}
}
StyledRect {
anchors.left: minutes.left
anchors.leftMargin: minuteMetrics.tightBoundingRect.x
y: hourMetrics.tightBoundingRect.height - implicitHeight
color: Colours.tPalette.m3surfaceContainerHigh
radius: Tokens.rounding.large
implicitWidth: minuteMetrics.tightBoundingRect.width
implicitHeight: amPmMetrics.tightBoundingRect.height + Tokens.padding.large * 2
StyledText {
id: amPm
anchors.centerIn: parent
width: amPmMetrics.tightBoundingRect.width
height: amPmMetrics.tightBoundingRect.height
transform: Translate {
x: -amPmMetrics.tightBoundingRect.x
y: -root.calcTopOff(amPmMetrics)
}
text: Time.amPmStr
color: Colours.palette.m3onSurface
font: Tokens.font.headline.builders.small.scale(2 * root.centerScale).width(30).build()
TextMetrics {
id: amPmMetrics
text: amPm.text
font: amPm.font
}
}
}
}