From 04d89905cf3b0dec504b3b30b58b3b6c91f33aa7 Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 21:00:15 -0400 Subject: [PATCH 1/7] Split clocks out into multiple files --- Modules/Bar/Calendar/AnalogClock.qml | 135 +++++++++++++++++ Modules/Bar/Calendar/CalendarPanel.qml | 195 +------------------------ Modules/Bar/Calendar/ClockLoader.qml | 25 ++++ Modules/Bar/Calendar/DigitalClock.qml | 76 ++++++++++ 4 files changed, 238 insertions(+), 193 deletions(-) create mode 100644 Modules/Bar/Calendar/AnalogClock.qml create mode 100644 Modules/Bar/Calendar/ClockLoader.qml create mode 100644 Modules/Bar/Calendar/DigitalClock.qml diff --git a/Modules/Bar/Calendar/AnalogClock.qml b/Modules/Bar/Calendar/AnalogClock.qml new file mode 100644 index 00000000..40f1b030 --- /dev/null +++ b/Modules/Bar/Calendar/AnalogClock.qml @@ -0,0 +1,135 @@ +import QtQuick +import qs.Commons +import Quickshell + + +Item { + property var now + anchors.fill: parent + + Canvas { + id: clockCanvas + anchors.fill: parent + + property int hours: now.getHours() + property int minutes: now.getMinutes() + property int seconds: now.getSeconds() + 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 bestWorstContrast = -1 + var bestColor = defaultColor + + var candidates = [ + Color.mSecondary, + Color.mTertiary, + Color.mError, + ] + + for (var i = 0; i < candidates.length; i++) { + var candidateColor = candidates[i] + var candidateL = candidateColor.hslLightness + + var diffBackground = Math.abs(backgroundL - candidateL) + var diffHourMark = Math.abs(hourMarkL - candidateL) + + var currentWorstContrast = Math.min(diffBackground, diffHourMark) + + if (currentWorstContrast > bestWorstContrast) { + bestWorstContrast = currentWorstContrast + bestColor = candidateColor + } + } + + return bestColor + } + + onPaint: { + var ctx = getContext("2d") + ctx.reset() + ctx.translate(width / 2, height / 2) + var radius = Math.min(width, height) / 2 + + // Hour marks + ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, markAlpha) + ctx.lineWidth = 2 * Style.uiScaleRatio + var scaleFactor = 0.7 + + for (var i = 0; i < 12; i++) { + var scaleFactor = 0.8 + if (i % 3 === 0) { + scaleFactor = 0.65 + } + ctx.save() + ctx.rotate(i * Math.PI / 6) + ctx.beginPath() + ctx.moveTo(0, -radius * scaleFactor) + ctx.lineTo(0, -radius) + ctx.stroke() + ctx.restore() + } + + // Hour hand + ctx.save() + var hourAngle = (hours % 12 + minutes / 60) * Math.PI / 6 + ctx.rotate(hourAngle) + ctx.strokeStyle = Color.mOnPrimary + ctx.lineWidth = 3 * Style.uiScaleRatio + ctx.lineCap = "round" + ctx.beginPath() + ctx.moveTo(0, 0) + ctx.lineTo(0, -radius * 0.6) + ctx.stroke() + ctx.restore() + + // Minute hand + ctx.save() + var minuteAngle = (minutes + seconds / 60) * Math.PI / 30 + ctx.rotate(minuteAngle) + ctx.strokeStyle = Color.mOnPrimary + ctx.lineWidth = 2 * Style.uiScaleRatio + ctx.lineCap = "round" + ctx.beginPath() + ctx.moveTo(0, 0) + ctx.lineTo(0, -radius * 0.9) + ctx.stroke() + ctx.restore() + + // Second hand + ctx.save() + var secondAngle = seconds * Math.PI / 30 + ctx.rotate(secondAngle) + ctx.strokeStyle = secondHandColor + ctx.lineWidth = 1.6 * Style.uiScaleRatio + ctx.lineCap = "round" + ctx.beginPath() + ctx.moveTo(0, 0) + ctx.lineTo(0, -radius) + ctx.stroke() + ctx.restore() + + // Center dot + ctx.beginPath() + ctx.arc(0, 0, 3 * Style.uiScaleRatio, 0, 2 * Math.PI) + ctx.fillStyle = Color.mOnPrimary + ctx.fill() + } + + Timer { + interval: 1000 + running: true + repeat: true + onTriggered: { + clockCanvas.hours = now.getHours() + clockCanvas.minutes = now.getMinutes() + clockCanvas.seconds = now.getSeconds() + clockCanvas.requestPaint() + } + } + + Component.onCompleted: requestPaint() + } +} diff --git a/Modules/Bar/Calendar/CalendarPanel.qml b/Modules/Bar/Calendar/CalendarPanel.qml index 20e5a7e6..ede7bff6 100644 --- a/Modules/Bar/Calendar/CalendarPanel.qml +++ b/Modules/Bar/Calendar/CalendarPanel.qml @@ -215,204 +215,13 @@ NPanel { } // Analog clock - Item { - id: clockItem + ClockLoader { anchors.right: parent.right anchors.rightMargin: Style.marginM anchors.verticalCenter: parent.verticalCenter Layout.alignment: Qt.AlignVCenter - height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2 - width: clockItem.height - Canvas { - id: clockCanvas - visible: Settings.data.location.analogClockInCalendar - anchors.fill: parent - - property int hours: now.getHours() - property int minutes: now.getMinutes() - property int seconds: now.getSeconds() - 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 bestWorstContrast = -1 - var bestColor = defaultColor - - var candidates = [Color.mSecondary, Color.mTertiary, Color.mError] - - for (var i = 0; i < candidates.length; i++) { - var candidateColor = candidates[i] - var candidateL = candidateColor.hslLightness - - var diffBackground = Math.abs(backgroundL - candidateL) - var diffHourMark = Math.abs(hourMarkL - candidateL) - - var currentWorstContrast = Math.min(diffBackground, diffHourMark) - - if (currentWorstContrast > bestWorstContrast) { - bestWorstContrast = currentWorstContrast - bestColor = candidateColor - } - } - - return bestColor - } - - onPaint: { - var ctx = getContext("2d") - ctx.reset() - ctx.translate(width / 2, height / 2) - var radius = Math.min(width, height) / 2 - - // Hour marks - ctx.strokeStyle = Qt.alpha(Color.mOnPrimary, markAlpha) - ctx.lineWidth = 2 * Style.uiScaleRatio - var scaleFactor = 0.7 - - for (var i = 0; i < 12; i++) { - var scaleFactor = 0.8 - if (i % 3 === 0) { - scaleFactor = 0.65 - } - ctx.save() - ctx.rotate(i * Math.PI / 6) - ctx.beginPath() - ctx.moveTo(0, -radius * scaleFactor) - ctx.lineTo(0, -radius) - ctx.stroke() - ctx.restore() - } - - // Hour hand - ctx.save() - var hourAngle = (hours % 12 + minutes / 60) * Math.PI / 6 - ctx.rotate(hourAngle) - ctx.strokeStyle = Color.mOnPrimary - ctx.lineWidth = 3 * Style.uiScaleRatio - ctx.lineCap = "round" - ctx.beginPath() - ctx.moveTo(0, 0) - ctx.lineTo(0, -radius * 0.6) - ctx.stroke() - ctx.restore() - - // Minute hand - ctx.save() - var minuteAngle = (minutes + seconds / 60) * Math.PI / 30 - ctx.rotate(minuteAngle) - ctx.strokeStyle = Color.mOnPrimary - ctx.lineWidth = 2 * Style.uiScaleRatio - ctx.lineCap = "round" - ctx.beginPath() - ctx.moveTo(0, 0) - ctx.lineTo(0, -radius * 0.9) - ctx.stroke() - ctx.restore() - - // Second hand - ctx.save() - var secondAngle = seconds * Math.PI / 30 - ctx.rotate(secondAngle) - ctx.strokeStyle = secondHandColor - ctx.lineWidth = 1.6 * Style.uiScaleRatio - ctx.lineCap = "round" - ctx.beginPath() - ctx.moveTo(0, 0) - ctx.lineTo(0, -radius) - ctx.stroke() - ctx.restore() - - // Center dot - ctx.beginPath() - ctx.arc(0, 0, 3 * Style.uiScaleRatio, 0, 2 * Math.PI) - ctx.fillStyle = Color.mOnPrimary - ctx.fill() - } - - Timer { - interval: 1000 - running: true - repeat: true - onTriggered: { - clockCanvas.hours = now.getHours() - clockCanvas.minutes = now.getMinutes() - clockCanvas.seconds = now.getSeconds() - clockCanvas.requestPaint() - } - } - - Component.onCompleted: requestPaint() - } - - // Digital clock's seconds circular progress - Canvas { - id: secondsProgress - visible: !Settings.data.location.analogClockInCalendar - anchors.fill: parent - property real progress: now.getSeconds() / 60 - onProgressChanged: requestPaint() - Connections { - target: Time - function onDateChanged() { - const total = now.getSeconds() * 1000 + now.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.mOnPrimary, 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.lineCap = "round" - ctx.stroke() - } - } - - // Digital clock - ColumnLayout { - visible: !Settings.data.location.analogClockInCalendar - anchors.centerIn: parent - spacing: -Style.marginXXS - - NText { - text: { - var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(now, "hh AP") : Qt.locale().toString(now, "HH") - return t.split(" ")[0] - } - - pointSize: Style.fontSizeXS - font.weight: Style.fontWeightBold - color: Color.mOnPrimary - family: Settings.data.ui.fontFixed - Layout.alignment: Qt.AlignHCenter - } - - NText { - text: Qt.formatTime(now, "mm") - pointSize: Style.fontSizeXXS - font.weight: Style.fontWeightBold - color: Color.mOnPrimary - family: Settings.data.ui.fontFixed - Layout.alignment: Qt.AlignHCenter - } - } + now: root.now } } diff --git a/Modules/Bar/Calendar/ClockLoader.qml b/Modules/Bar/Calendar/ClockLoader.qml new file mode 100644 index 00000000..97da645b --- /dev/null +++ b/Modules/Bar/Calendar/ClockLoader.qml @@ -0,0 +1,25 @@ +import QtQuick +import qs.Commons +import qs.Services +import Quickshell + +Item { + id: clockRoot + + property var now + + height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2 + width: clockRoot.height + + Loader { + id: clockLoader + anchors.fill: parent + + source: Settings.data.location.analogClockInCalendar ? "AnalogClock.qml" : "DigitalClock.qml" + + onLoaded: { + // Bind the loaded item's 'now' property to *this* component's 'now' property + item.now = Qt.binding(function() { return clockRoot.now }) + } + } +} diff --git a/Modules/Bar/Calendar/DigitalClock.qml b/Modules/Bar/Calendar/DigitalClock.qml new file mode 100644 index 00000000..9e5e7293 --- /dev/null +++ b/Modules/Bar/Calendar/DigitalClock.qml @@ -0,0 +1,76 @@ +import QtQuick +import qs.Commons +import Quickshell + + +Item { + property var now + anchors.fill: parent + + // Digital clock's seconds circular progress + Canvas { + id: secondsProgress + visible: !Settings.data.location.analogClockInCalendar + anchors.fill: parent + property real progress: now.getSeconds() / 60 + onProgressChanged: requestPaint() + Connections { + target: Time + function onDateChanged() { + const total = now.getSeconds() * 1000 + now.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.mOnPrimary, 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.lineCap = "round" + ctx.stroke() + } + } + + // Digital clock + ColumnLayout { + visible: !Settings.data.location.analogClockInCalendar + anchors.centerIn: parent + spacing: -Style.marginXXS + + NText { + text: { + var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(now, "hh AP") : Qt.locale().toString(now, "HH") + return t.split(" ")[0] + } + + pointSize: Style.fontSizeXS + font.weight: Style.fontWeightBold + color: Color.mOnPrimary + family: Settings.data.ui.fontFixed + Layout.alignment: Qt.AlignHCenter + } + + NText { + text: Qt.formatTime(now, "mm") + pointSize: Style.fontSizeXXS + font.weight: Style.fontWeightBold + color: Color.mOnPrimary + family: Settings.data.ui.fontFixed + Layout.alignment: Qt.AlignHCenter + } + } +} From b3cddc1ededda12ab5ef2e67bce4ac112a98532b Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 21:51:45 -0400 Subject: [PATCH 2/7] Lock Screen also uses this clock --- Modules/Bar/Calendar/AnalogClock.qml | 14 ++-- Modules/Bar/Calendar/ClockLoader.qml | 4 + Modules/Bar/Calendar/DigitalClock.qml | 10 ++- Modules/LockScreen/LockScreen.qml | 108 +++++++++----------------- 4 files changed, 56 insertions(+), 80 deletions(-) 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 + // } + // } + } } From 376dedeb6f42eb8a0f58d430a29225b3a39289be Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 22:43:28 -0400 Subject: [PATCH 3/7] Move color logic to ClockLoader --- Modules/Bar/Calendar/AnalogClock.qml | 34 ++------------------ Modules/Bar/Calendar/ClockLoader.qml | 46 ++++++++++++++++++++++++++- Modules/Bar/Calendar/DigitalClock.qml | 7 ++-- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/Modules/Bar/Calendar/AnalogClock.qml b/Modules/Bar/Calendar/AnalogClock.qml index 5f936eac..1fc87f2d 100644 --- a/Modules/Bar/Calendar/AnalogClock.qml +++ b/Modules/Bar/Calendar/AnalogClock.qml @@ -7,6 +7,8 @@ Item { property var now property color backgroundColor: Color.mPrimary property color clockColor: Color.mOnPrimary + property color secondHandColor: Color.mError + property real markAlpha: 0.7 anchors.fill: parent Canvas { @@ -16,38 +18,6 @@ Item { property int hours: now.getHours() property int minutes: now.getMinutes() property int seconds: now.getSeconds() - property real markAlpha: 0.7 - property color secondHandColor: { - var defaultColor = Color.mError - var backgroundL = backgroundColor.hslLightness - var hourMarkL = (clockColor.hslLightness * markAlpha) + (backgroundL *(1.0-markAlpha)) - - var bestWorstContrast = -1 - var bestColor = defaultColor - - var candidates = [ - Color.mSecondary, - Color.mTertiary, - Color.mError, - ] - - for (var i = 0; i < candidates.length; i++) { - var candidateColor = candidates[i] - var candidateL = candidateColor.hslLightness - - var diffBackground = Math.abs(backgroundL - candidateL) - var diffHourMark = Math.abs(hourMarkL - candidateL) - - var currentWorstContrast = Math.min(diffBackground, diffHourMark) - - if (currentWorstContrast > bestWorstContrast) { - bestWorstContrast = currentWorstContrast - bestColor = candidateColor - } - } - - return bestColor - } onPaint: { var ctx = getContext("2d") diff --git a/Modules/Bar/Calendar/ClockLoader.qml b/Modules/Bar/Calendar/ClockLoader.qml index e199bcda..02d6d1dc 100644 --- a/Modules/Bar/Calendar/ClockLoader.qml +++ b/Modules/Bar/Calendar/ClockLoader.qml @@ -7,8 +7,49 @@ Item { id: clockRoot property var now + + // Default colors property color backgroundColor: Color.mPrimary property color clockColor: Color.mOnPrimary + readonly property real markAlpha: 0.7 // alpha value of hour markers in AnalogClock + property color secondHandColor: { + var defaultColor = Color.mError + var backgroundL = backgroundColor.hslLightness + var hourMarkL + + if (Settings.data.location.analogClockInCalendar) { + hourMarkL = (clockColor.hslLightness * markAlpha) + (backgroundL * (1.0 - markAlpha)) + } else { + hourMarkL = backgroundL + } + + var bestWorstContrast = -1 + var bestColor = defaultColor + + var candidates = [ + Color.mSecondary, + Color.mTertiary, + Color.mError, + ] + + for (var i = 0; i < candidates.length; i++) { + var candidateColor = candidates[i] + var candidateL = candidateColor.hslLightness + + var diffBackground = Math.abs(backgroundL - candidateL) + var diffHourMark = Math.abs(hourMarkL - candidateL) + + var currentWorstContrast = Math.min(diffBackground, diffHourMark) + + if (currentWorstContrast > bestWorstContrast) { + bestWorstContrast = currentWorstContrast + bestColor = candidateColor + } + } + + return bestColor + } + height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2 width: clockRoot.height @@ -20,10 +61,13 @@ Item { source: Settings.data.location.analogClockInCalendar ? "AnalogClock.qml" : "DigitalClock.qml" 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 }) + item.secondHandColor = Qt.binding(function() { return clockRoot.secondHandColor }) + if (item.hasOwnProperty("markAlpha")) { + item.markAlpha = Qt.binding(function() { return clockRoot.markAlpha }) + } } } } diff --git a/Modules/Bar/Calendar/DigitalClock.qml b/Modules/Bar/Calendar/DigitalClock.qml index 32035143..3a129e36 100644 --- a/Modules/Bar/Calendar/DigitalClock.qml +++ b/Modules/Bar/Calendar/DigitalClock.qml @@ -1,5 +1,7 @@ import QtQuick +import QtQuick.Layouts import qs.Commons +import qs.Widgets import Quickshell @@ -7,12 +9,12 @@ Item { property var now property color backgroundColor: Color.mPrimary property color clockColor: Color.mOnPrimary + property color secondHandColor: Color.mError anchors.fill: parent // Digital clock's seconds circular progress Canvas { id: secondsProgress - visible: !Settings.data.location.analogClockInCalendar anchors.fill: parent property real progress: now.getSeconds() / 60 onProgressChanged: requestPaint() @@ -41,7 +43,7 @@ Item { ctx.beginPath() ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI) ctx.lineWidth = 2.5 - ctx.strokeStyle = clockColor + ctx.strokeStyle = secondHandColor ctx.lineCap = "round" ctx.stroke() } @@ -49,7 +51,6 @@ Item { // Digital clock ColumnLayout { - visible: !Settings.data.location.analogClockInCalendar anchors.centerIn: parent spacing: -Style.marginXXS From 475f4a6bdaee7584c0917e7b9fb6c8d45bc93387 Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 22:51:59 -0400 Subject: [PATCH 4/7] Removed commented out block --- Modules/LockScreen/LockScreen.qml | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 93e9261c..2d19fc5d 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -378,34 +378,6 @@ Loader { 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 - // } - // } - } } From 9c66d64d85f06411fce8ecfa920f291f6b44afd8 Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 22:53:56 -0400 Subject: [PATCH 5/7] Removed more useless comments --- Modules/LockScreen/LockScreen.qml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 2d19fc5d..3251099c 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -366,15 +366,10 @@ Loader { // 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 - - // *** Override the colors to match the LockScreen style *** backgroundColor: Color.mSurface clockColor: Color.mOnSurface } From f39ea9e704d71927257078c2c1ef5f707ce81ae8 Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Wed, 29 Oct 2025 23:28:22 -0400 Subject: [PATCH 6/7] Change secondHandColor on LockScreen back to mPrimary --- Modules/LockScreen/LockScreen.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 3251099c..370fa202 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -372,6 +372,7 @@ Loader { Layout.alignment: Qt.AlignVCenter backgroundColor: Color.mSurface clockColor: Color.mOnSurface + secondHandColor: Color.mPrimary } } } From ddb0b90ef71a26535bec06359900ab6cdd703c6e Mon Sep 17 00:00:00 2001 From: Corey Woodworth Date: Thu, 30 Oct 2025 00:00:42 -0400 Subject: [PATCH 7/7] Split secondHandColor into progressColor for DigitalClock so that it can be defined from CalendarPanel --- Modules/Bar/Calendar/CalendarPanel.qml | 2 +- Modules/Bar/Calendar/ClockLoader.qml | 8 +++++++- Modules/Bar/Calendar/DigitalClock.qml | 4 ++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/Modules/Bar/Calendar/CalendarPanel.qml b/Modules/Bar/Calendar/CalendarPanel.qml index ede7bff6..9941f309 100644 --- a/Modules/Bar/Calendar/CalendarPanel.qml +++ b/Modules/Bar/Calendar/CalendarPanel.qml @@ -219,8 +219,8 @@ NPanel { anchors.right: parent.right anchors.rightMargin: Style.marginM anchors.verticalCenter: parent.verticalCenter + progressColor: Color.mOnPrimary Layout.alignment: Qt.AlignVCenter - now: root.now } } diff --git a/Modules/Bar/Calendar/ClockLoader.qml b/Modules/Bar/Calendar/ClockLoader.qml index 02d6d1dc..ae027702 100644 --- a/Modules/Bar/Calendar/ClockLoader.qml +++ b/Modules/Bar/Calendar/ClockLoader.qml @@ -49,6 +49,7 @@ Item { return bestColor } + property color progressColor: clockRoot.secondHandColor height: Math.round((Style.fontSizeXXXL * 1.9) / 2 * Style.uiScaleRatio) * 2 @@ -64,7 +65,12 @@ Item { item.now = Qt.binding(function() { return clockRoot.now }) item.backgroundColor = Qt.binding(function() { return clockRoot.backgroundColor }) item.clockColor = Qt.binding(function() { return clockRoot.clockColor }) - item.secondHandColor = Qt.binding(function() { return clockRoot.secondHandColor }) + if (item.hasOwnProperty("secondHandColor")) { + item.secondHandColor = Qt.binding(function() { return clockRoot.secondHandColor }) + } + if (item.hasOwnProperty("progressColor")) { + item.progressColor = Qt.binding(function() { return clockRoot.progressColor }) + } if (item.hasOwnProperty("markAlpha")) { item.markAlpha = Qt.binding(function() { return clockRoot.markAlpha }) } diff --git a/Modules/Bar/Calendar/DigitalClock.qml b/Modules/Bar/Calendar/DigitalClock.qml index 3a129e36..f5ff2ccb 100644 --- a/Modules/Bar/Calendar/DigitalClock.qml +++ b/Modules/Bar/Calendar/DigitalClock.qml @@ -9,7 +9,7 @@ Item { property var now property color backgroundColor: Color.mPrimary property color clockColor: Color.mOnPrimary - property color secondHandColor: Color.mError + property color progressColor: Color.mError anchors.fill: parent // Digital clock's seconds circular progress @@ -43,7 +43,7 @@ Item { ctx.beginPath() ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI) ctx.lineWidth = 2.5 - ctx.strokeStyle = secondHandColor + ctx.strokeStyle = progressColor ctx.lineCap = "round" ctx.stroke() }