diff --git a/Modules/Bar/Calendar/AnalogClock.qml b/Modules/Bar/Calendar/AnalogClock.qml index 40f1b030..5f936eac 100644 --- a/Modules/Bar/Calendar/AnalogClock.qml +++ b/Modules/Bar/Calendar/AnalogClock.qml @@ -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() } diff --git a/Modules/Bar/Calendar/ClockLoader.qml b/Modules/Bar/Calendar/ClockLoader.qml index 97da645b..e199bcda 100644 --- a/Modules/Bar/Calendar/ClockLoader.qml +++ b/Modules/Bar/Calendar/ClockLoader.qml @@ -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 }) } } } diff --git a/Modules/Bar/Calendar/DigitalClock.qml b/Modules/Bar/Calendar/DigitalClock.qml index 9e5e7293..32035143 100644 --- a/Modules/Bar/Calendar/DigitalClock.qml +++ b/Modules/Bar/Calendar/DigitalClock.qml @@ -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 } diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 92d7a443..93e9261c 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -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 + // } + // } + } }