From 41c2814610c95e9b82a4e4848d2a9c46c3cbf27e Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sat, 11 Oct 2025 17:40:24 +0200 Subject: [PATCH] cookie clock: cleaner date indicator, adjust colors --- .../background/cookieClock/CookieClock.qml | 18 ++--- .../background/cookieClock/CookieQuote.qml | 1 + .../background/cookieClock/HourMarks.qml | 2 +- .../background/cookieClock/MinuteHand.qml | 1 - .../dateIndicator/DateIndicator.qml | 68 ++++++++----------- .../dateIndicator/RectangleDate.qml | 23 +------ .../dateIndicator/RotatingDate.qml | 36 ++++------ 7 files changed, 55 insertions(+), 94 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 298648902..95c928d86 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -26,7 +26,8 @@ Item { property color colShadow: Appearance.colors.colShadow property color colBackground: Appearance.colors.colSecondaryContainer - property color colOnBackground: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.5) + property color colOnBackground: ColorUtils.mix(Appearance.colors.colSecondary, Appearance.colors.colSecondaryContainer, 0.3) + property color colBackgroundInfo: ColorUtils.mix(Appearance.colors.colPrimary, Appearance.colors.colSecondaryContainer, 0.55) property color colHourHand: Appearance.colors.colPrimary property color colMinuteHand: Appearance.colors.colSecondary property color colSecondHand: Appearance.colors.colTertiary @@ -75,8 +76,8 @@ Item { shown: Config.options.background.clock.cookie.hourMarks sourceComponent: HourMarks { implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity) - color: root.colTimeIndicators - colOnBackground: root.colOnBackground + color: root.colOnBackground + colOnBackground: ColorUtils.mix(root.colBackgroundInfo, root.colOnBackground, 0.5) } } @@ -91,14 +92,14 @@ Item { } sourceComponent: TimeColumn { - color: root.colOnBackground + color: root.colBackgroundInfo } } // Hour hand FadeLoader { anchors.fill: parent - z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1 + z: 1 shown: Config.options.background.clock.cookie.hourHandStyle !== "hide" sourceComponent: HourHand { clockHour: root.clockHour @@ -111,6 +112,7 @@ Item { // Minute hand FadeLoader { anchors.fill: parent + z: 2 shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide" sourceComponent: MinuteHand { anchors.fill: parent @@ -124,7 +126,7 @@ Item { FadeLoader { id: secondHandLoader z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3 - shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none" + shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "hide" anchors.fill: parent sourceComponent: SecondHand { id: secondHand @@ -141,7 +143,7 @@ Item { shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold" sourceComponent: Rectangle { color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand - implicitWidth: 8 + implicitWidth: 6 implicitHeight: implicitWidth radius: width / 2 } @@ -150,7 +152,7 @@ Item { // Date DateIndicator { anchors.fill: parent - colOnBackground: root.colOnBackground + colOnBackground: root.colBackgroundInfo style: Config.options.background.clock.cookie.dateStyle dateSquareSize: root.dateSquareSize } diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml index 9e049a657..8fef7313a 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml @@ -50,6 +50,7 @@ Item { id: quoteStyledText horizontalAlignment: Text.AlignLeft text: Config.options.background.quote + color: Appearance.colors.colOnSecondaryContainer font { family: Appearance.font.family.reading pixelSize: Appearance.font.pixelSize.large diff --git a/.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml index c20b14a60..ec1bfab8b 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/HourMarks.qml @@ -13,7 +13,7 @@ Item { property real markWidth: 4 property color color: Appearance.colors.colOnSecondaryContainer property color colOnBackground: Appearance.colors.colSecondaryContainer - property real padding: 10 + property real padding: 8 Rectangle { color: root.color diff --git a/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml b/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml index 29ec8f893..0b8a78d16 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/MinuteHand.qml @@ -13,7 +13,6 @@ Item { property real handWidth: style === "bold" ? 18 : style === "medium" ? 12 : 5 property color color: Appearance.colors.colSecondary - z: root.style === "thin" ? 1 : 3 rotation: -90 + (360 / 60) * root.clockMinute Behavior on rotation { diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml index d2626d751..2056bb692 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/DateIndicator.qml @@ -9,83 +9,69 @@ import QtQuick Item { id: root - readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle property string style: "rotating" property color colOnBackground: Appearance.colors.colOnSecondaryContainer property color colBackground: Appearance.colors.colOnSecondaryContainer property real dateSquareSize: 64 // Rotating date - Loader { + FadeLoader { anchors.fill: parent - active: opacity > 0 + shown: Config.options.background.clock.cookie.dateStyle === "rotating" sourceComponent: RotatingDate { - style: root.style + color: root.colOnBackground } } // Rectangle date (only today's number) in right side of the clock - Loader { + FadeLoader { id: rectLoader - - property real animIndex: root.style === "rect" ? 1.0 : 0.0 - Behavior on animIndex { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + shown: root.style === "rect" + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 40 - rectLoader.opacity * 30 } - active: animIndex > 0 - - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - sourceComponent: RectangleDate { color: Appearance.colors.colSecondaryContainerHover radius: Appearance.rounding.small - animIndex: rectLoader.animIndex + implicitWidth: 45 * rectLoader.opacity + implicitHeight: 30 * rectLoader.opacity } } - // Date bubble / day - Loader { + // Bubble style: day of month + FadeLoader { id: dayBubbleLoader - property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 - Behavior on targetSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - - active: targetSize > 0 - width: targetSize - height: targetSize - + shown: root.style === "bubble" + property real targetSize: root.dateSquareSize * opacity anchors { left: parent.left - bottom: parent.bottom - topMargin: 50 + top: parent.top } + sourceComponent: BubbleDate { + implicitWidth: dayBubbleLoader.targetSize + implicitHeight: dayBubbleLoader.targetSize bubbleIndex: 0 targetSize: dayBubbleLoader.targetSize } } - // Date bubble / month - Loader { + // Bubble style: month + FadeLoader { id: monthBubbleLoader - property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 - Behavior on targetSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - - width: targetSize - height: targetSize - active: targetSize > 0 - + shown: root.style === "bubble" + property real targetSize: root.dateSquareSize * opacity anchors { right: parent.right - top: parent.top - bottomMargin: 50 + bottom: parent.bottom } + sourceComponent: BubbleDate { + implicitWidth: monthBubbleLoader.targetSize + implicitHeight: monthBubbleLoader.targetSize bubbleIndex: 1 targetSize: monthBubbleLoader.targetSize } diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml index c2410c81e..47653dae3 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RectangleDate.qml @@ -8,34 +8,15 @@ import QtQuick Rectangle { id: rect readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle - property real animIndex: 0 - opacity: animIndex - - width: 45 * animIndex - height: 30 * animIndex - - x: root.dialStyle === "numbers" ? -40 : -10 - y: root.dialStyle === "numbers" ? 55 : 0 - - Behavior on x { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - Behavior on y { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } StyledText { - opacity: root.style === "rect" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } anchors.centerIn: parent color: Appearance.colors.colSecondaryHover - text: DateTime.date.substring(5, 7) + text: Qt.locale().toString(DateTime.clock.date, "dd") font { family: Appearance.font.family.expressive pixelSize: 20 weight: 1000 } } -} \ No newline at end of file +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml index 34fbef94e..664c3aabc 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicator/RotatingDate.qml @@ -10,6 +10,11 @@ Item { id: root property string style: Config.options.background.clock.cookie.dateStyle + property color color: Appearance.colors.colOnSecondaryContainer + property real angleStep: 12 * Math.PI / 180 + property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd") + + readonly property int clockSecond: DateTime.clock.seconds readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle readonly property bool timeIndicators: Config.options.background.clock.cookie.timeIndicators @@ -18,20 +23,9 @@ Item { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } - property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd") - property real angleStep: Math.PI / 2.35 / dateText.length - - property color dayColor: Appearance.colors.colSecondary - property color monthColor: Appearance.colors.colSecondaryHover - - opacity: style === "rotating" ? 1.0 : 0.0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - rotation: { if (!Config.options.time.secondPrecision) return 0 - else return secondHandLoader.item.rotation + 45 // +45 to center the text + else return (360 / 60 * clockSecond) + 180 - (angleStep / Math.PI * 180 * dateText.length) / 2 } Repeater { @@ -40,20 +34,18 @@ Item { delegate: Text { required property int index property real angle: index * root.angleStep - Math.PI / 2 - x: root.width / 2 + root.radius * Math.cos(angle) - width / 2 y: root.height / 2 + root.radius * Math.sin(angle) - height / 2 - - text: root.dateText.charAt(index) - - font.family: Appearance.font.family.title - font.pixelSize: 30 - font.weight: Font.DemiBold - - color: index < 3 ? root.dayColor : root.monthColor - rotation: angle * 180 / Math.PI + 90 + color: root.color + font { + family: Appearance.font.family.title + pixelSize: 30 + weight: Font.DemiBold + } + + text: root.dateText.charAt(index) } } }