Lock Screen also uses this clock

This commit is contained in:
Corey Woodworth
2025-10-29 21:51:45 -04:00
parent 04d89905cf
commit b3cddc1ede
4 changed files with 56 additions and 80 deletions
+8 -6
View File
@@ -5,6 +5,8 @@ import Quickshell
Item {
property var now
property color backgroundColor: Color.mPrimary
property color clockColor: Color.mOnPrimary
anchors.fill: parent
Canvas {
@@ -17,8 +19,8 @@ Item {
property real markAlpha: 0.7
property color secondHandColor: {
var defaultColor = Color.mError
var backgroundL = Color.mPrimary.hslLightness
var hourMarkL = (Color.mOnPrimary.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
var backgroundL = backgroundColor.hslLightness
var hourMarkL = (clockColor.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha))
var bestWorstContrast = -1
var bestColor = defaultColor
@@ -54,7 +56,7 @@ Item {
var radius = Math.min(width, height) / 2
// Hour marks
ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, markAlpha)
ctx.strokeStyle = Qt.alpha(clockColor, markAlpha)
ctx.lineWidth = 2 * Style.uiScaleRatio
var scaleFactor = 0.7
@@ -76,7 +78,7 @@ Item {
ctx.save()
var hourAngle = (hours % 12 + minutes / 60) * Math.PI / 6
ctx.rotate(hourAngle)
ctx.strokeStyle = Color.mOnPrimary
ctx.strokeStyle = clockColor
ctx.lineWidth = 3 * Style.uiScaleRatio
ctx.lineCap = "round"
ctx.beginPath()
@@ -89,7 +91,7 @@ Item {
ctx.save()
var minuteAngle = (minutes + seconds / 60) * Math.PI / 30
ctx.rotate(minuteAngle)
ctx.strokeStyle = Color.mOnPrimary
ctx.strokeStyle = clockColor
ctx.lineWidth = 2 * Style.uiScaleRatio
ctx.lineCap = "round"
ctx.beginPath()
@@ -114,7 +116,7 @@ Item {
// Center dot
ctx.beginPath()
ctx.arc(0, 0, 3 * Style.uiScaleRatio, 0, 2 * Math.PI)
ctx.fillStyle = Color.mOnPrimary
ctx.fillStyle = clockColor
ctx.fill()
}
+4
View File
@@ -7,6 +7,8 @@ Item {
id: clockRoot
property var now
property color backgroundColor: Color.mPrimary
property color clockColor: Color.mOnPrimary
height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2
width: clockRoot.height
@@ -20,6 +22,8 @@ Item {
onLoaded: {
// Bind the loaded item's 'now' property to *this* component's 'now' property
item.now = Qt.binding(function() { return clockRoot.now })
item.backgroundColor = Qt.binding(function() { return clockRoot.backgroundColor })
item.clockColor = Qt.binding(function() { return clockRoot.clockColor })
}
}
}
+6 -4
View File
@@ -5,6 +5,8 @@ import Quickshell
Item {
property var now
property color backgroundColor: Color.mPrimary
property color clockColor: Color.mOnPrimary
anchors.fill: parent
// Digital clock's seconds circular progress
@@ -32,14 +34,14 @@ Item {
ctx.beginPath()
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
ctx.lineWidth = 2.5
ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, 0.15)
ctx.strokeStyle = Qt.alpha(clockColor, 0.15)
ctx.stroke()
// Progress arc
ctx.beginPath()
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
ctx.lineWidth = 2.5
ctx.strokeStyle = Color.mOnPrimary
ctx.strokeStyle = clockColor
ctx.lineCap = "round"
ctx.stroke()
}
@@ -59,7 +61,7 @@ Item {
pointSize: Style.fontSizeXS
font.weight: Style.fontWeightBold
color: Color.mOnPrimary
color: clockColor
family: Settings.data.ui.fontFixed
Layout.alignment: Qt.AlignHCenter
}
@@ -68,7 +70,7 @@ Item {
text: Qt.formatTime(now, "mm")
pointSize: Style.fontSizeXXS
font.weight: Style.fontWeightBold
color: Color.mOnPrimary
color: clockColor
family: Settings.data.ui.fontFixed
Layout.alignment: Qt.AlignHCenter
}
+38 -70
View File
@@ -12,6 +12,7 @@ import qs.Commons
import qs.Services
import qs.Widgets
import qs.Modules.Audio
import qs.Modules.Bar.Calendar
Loader {
id: lockScreen
@@ -363,81 +364,48 @@ Loader {
Layout.fillWidth: true
}
Item {
// Clock
ClockLoader {
// The 'now' property is available as Time.date
now: Time.date
// Apply layout properties from the old Item
Layout.preferredWidth: 70
Layout.preferredHeight: 70
Layout.alignment: Qt.AlignVCenter
// Seconds circular progress
Canvas {
id: secondsProgress
anchors.fill: parent
property real progress: Time.date.getSeconds() / 60
onProgressChanged: requestPaint()
Connections {
target: Time
function onDateChanged() {
const total = Time.date.getSeconds() * 1000 + Time.date.getMilliseconds()
secondsProgress.progress = total / 60000
}
}
onPaint: {
var ctx = getContext("2d")
var centerX = width / 2
var centerY = height / 2
var radius = Math.min(width, height) / 2 - 3
ctx.reset()
// Background circle
ctx.beginPath()
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
ctx.lineWidth = 2.5
ctx.strokeStyle = Qt.alpha(Color.mOnSurface, 0.15)
ctx.stroke()
// Progress arc
ctx.beginPath()
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI)
ctx.lineWidth = 2.5
ctx.strokeStyle = Color.mPrimary
ctx.lineCap = "round"
ctx.stroke()
}
}
// Digital clock
ColumnLayout {
anchors.centerIn: parent
spacing: 0
NText {
text: {
var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(Time.date, "hh AP") : Qt.locale().toString(Time.date, "HH")
return t
}
pointSize: Style.fontSizeM
font.weight: Style.fontWeightBold
family: Settings.data.ui.fontFixed
color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
}
NText {
text: Qt.formatTime(Time.date, "mm")
pointSize: Style.fontSizeM
font.weight: Style.fontWeightBold
family: Settings.data.ui.fontFixed
color: Color.mOnSurfaceVariant
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
}
}
// *** Override the colors to match the LockScreen style ***
backgroundColor: Color.mSurface
clockColor: Color.mOnSurface
}
// ColumnLayout {
// anchors.centerIn: parent
// spacing: 0
//
// NText {
// text: {
// var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(Time.date, "hh AP") : Qt.locale().toString(Time.date, "HH")
// return t
// }
// pointSize: Style.fontSizeM
// font.weight: Style.fontWeightBold
// family: Settings.data.ui.fontFixed
// color: Color.mOnSurface
// horizontalAlignment: Text.AlignHCenter
// Layout.alignment: Qt.AlignHCenter
// }
//
// NText {
// text: Qt.formatTime(Time.date, "mm")
// pointSize: Style.fontSizeM
// font.weight: Style.fontWeightBold
// family: Settings.data.ui.fontFixed
// color: Color.mOnSurfaceVariant
// horizontalAlignment: Text.AlignHCenter
// Layout.alignment: Qt.AlignHCenter
// }
// }
}
}