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