From 9b547d6ece904e4dc73d1f186f0ad56176f10375 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 5 Oct 2025 22:20:44 +0200 Subject: [PATCH] bg clock: move date indicator to new file --- .../background/cookieClock/CookieClock.qml | 159 ++---------------- .../background/cookieClock/DateIndicator.qml | 154 +++++++++++++++++ 2 files changed, 169 insertions(+), 144 deletions(-) create mode 100644 .config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 6c145fa81..bb21d3f59 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -188,15 +188,18 @@ Item { } // Second hand - SecondHand { - id: secondHand + Loader { + active: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none" anchors.fill: parent - handWidth: root.secondHandWidth - handLength: root.secondHandLength - dotSize: root.secondDotSize - clockSecond: root.clockSecond - style: Config.options.background.clock.cookie.secondHandStyle - color: root.colSecondHand + sourceComponent: SecondHand { + id: secondHand + handWidth: root.secondHandWidth + handLength: root.secondHandLength + dotSize: root.secondDotSize + clockSecond: root.clockSecond + style: Config.options.background.clock.cookie.secondHandStyle + color: root.colSecondHand + } } // Center dot @@ -234,142 +237,10 @@ Item { } } - // Date (the rotating one with the second hand) - Canvas { - z: 0 - width: cookie.width - height: cookie.height - rotation: secondHand.rotation + 45 // +45 degrees to align with minute hand - opacity: Config.options.background.clock.cookie.dateStyle === "rotating" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - onPaint: { - var ctx = getContext("2d"); - ctx.clearRect(0,0,width,height); - ctx.font = "700 30px " + Appearance.font.family.title; - - var text = DateTime.date.substring(0,3) + " " + DateTime.date.substring(4,7); - var radius = 78; - var angleStep = Math.PI / 2.35 / text.length; - - for (var i=0; i= 3) - ctx.fillStyle = root.colOnBackground; - else - ctx.fillStyle = Appearance.colors.colSecondaryHover; - - ctx.fillText(text[i], 0, 0); - ctx.restore(); - } - } - } - - // Date(only today's number) in right side of the clock - Rectangle{ - z: 1 - implicitWidth: 45 - implicitHeight: Config.options.background.clock.cookie.dateStyle === "rect" ? 30 : 0 - color: root.colOnBackground - radius: Appearance.rounding.small - anchors{ - verticalCenter: cookie.verticalCenter - right: cookie.right - rightMargin: 10 - } - Behavior on implicitHeight{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - StyledText{ - opacity: Config.options.background.clock.cookie.dateStyle === "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) - font { - family: Appearance.font.family.expressive - pixelSize: 20 - weight: 1000 - } - } - } - - // Date bubble style left side - Rectangle{ - z: 5 - implicitWidth: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0 - implicitHeight: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0 - color: Appearance.colors.colPrimaryContainer - radius: Appearance.rounding.large - anchors{ - left: cookie.left - bottom: cookie.bottom - bottomMargin: 5 - } - Behavior on implicitWidth{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on implicitHeight{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - StyledText{ - anchors.centerIn: parent - text: DateTime.date.substring(5,7) - color: Appearance.colors.colOnPrimaryContainer - opacity: Config.options.background.clock.cookie.dateStyle === "bubble" ? 1.0 : 0 - font { - family: Appearance.font.family.reading - pixelSize: 30 - weight: 1000 - } - Behavior on opacity{ - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - - // Date bubble style right side - Rectangle{ - z: 5 - implicitWidth: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0 - implicitHeight: Config.options.background.clock.cookie.dateStyle === "bubble" ? dateSquareSize : 0 - color: Appearance.colors.colTertiaryContainer - radius: Appearance.rounding.verylarge - anchors{ - right: cookie.right - top: cookie.top - topMargin: 5 - } - Behavior on implicitWidth{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on implicitHeight{ - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - StyledText{ - anchors.centerIn: parent - text: DateTime.date.substring(8,10) - color: Appearance.colors.colOnPrimaryContainer - opacity: Config.options.background.clock.cookie.dateStyle === "bubble" ? 1.0 : 0 - font { - family: Appearance.font.family.reading - pixelSize: 30 - weight: 1000 - } - Behavior on opacity{ - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } + DateIndicator { + anchors.fill: parent + colOnBackground: root.colOnBackground + style: Config.options.background.clock.cookie.dateStyle } // Hour Indicator numbers (3-6-9-12) diff --git a/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml new file mode 100644 index 000000000..aa36b3f8c --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml @@ -0,0 +1,154 @@ +pragma ComponentBehavior: Bound + +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import qs.modules.common.functions +import QtQuick + +Item { + id: root + property string style: "rotating" + property color colOnBackground: Appearance.colors.colOnSecondaryContainer + + Canvas { + z: 0 + width: parent.width + height: parent.height + rotation: { + if (!Config.options.time.secondPrecision) return 0; + return secondHand.rotation + 45 // +45 degrees to align with minute hand + } + opacity: root.style === "rotating" ? 1.0 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + onPaint: { + var ctx = getContext("2d"); + ctx.clearRect(0, 0, width, height); + ctx.font = "700 30px " + Appearance.font.family.title; + + var text = Qt.locale().toString(DateTime.clock.date, "ddd dd"); + var radius = 78; + var angleStep = Math.PI / 2.35 / text.length; + + for (var i = 0; i < text.length; i++) { + var angle = i * angleStep - Math.PI / 2; + var x = width / 2 + radius * Math.cos(angle); + var y = height / 2 + radius * Math.sin(angle); + + ctx.save(); + ctx.translate(x, y); + ctx.rotate(angle + Math.PI / 2); + + if (i >= 3) + ctx.fillStyle = root.colOnBackground; + else + ctx.fillStyle = Appearance.colors.colSecondaryHover; + + ctx.fillText(text[i], 0, 0); + ctx.restore(); + } + } + } + + // Date(only today's number) in right side of the clock + Rectangle { + z: 1 + implicitWidth: 45 + implicitHeight: root.style === "rect" ? 30 : 0 + color: root.colOnBackground + radius: Appearance.rounding.small + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 10 + } + Behavior on implicitHeight { + animation: Appearance.animation.elementResize.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) + font { + family: Appearance.font.family.expressive + pixelSize: 20 + weight: 1000 + } + } + } + + // Date bubble style left side + Rectangle { + z: 5 + implicitWidth: root.style === "bubble" ? dateSquareSize : 0 + implicitHeight: root.style === "bubble" ? dateSquareSize : 0 + color: Appearance.colors.colPrimaryContainer + radius: Appearance.rounding.large + anchors { + left: parent.left + bottom: parent.bottom + bottomMargin: 5 + } + Behavior on implicitWidth { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + Behavior on implicitHeight { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + StyledText { + anchors.centerIn: parent + text: DateTime.date.substring(5, 7) + color: Appearance.colors.colOnPrimaryContainer + opacity: root.style === "bubble" ? 1.0 : 0 + font { + family: Appearance.font.family.reading + pixelSize: 30 + weight: 1000 + } + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } + } + + // Date bubble style right side + Rectangle { + z: 5 + implicitWidth: root.style === "bubble" ? dateSquareSize : 0 + implicitHeight: root.style === "bubble" ? dateSquareSize : 0 + color: Appearance.colors.colTertiaryContainer + radius: Appearance.rounding.verylarge + anchors { + right: parent.right + top: parent.top + topMargin: 5 + } + Behavior on implicitWidth { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + Behavior on implicitHeight { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + StyledText { + anchors.centerIn: parent + text: DateTime.date.substring(8, 10) + color: Appearance.colors.colOnPrimaryContainer + opacity: root.style === "bubble" ? 1.0 : 0 + font { + family: Appearance.font.family.reading + pixelSize: 30 + weight: 1000 + } + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } + } +}