From f74a4f056e106a6302e8bf3010b64a5584825b2a Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Tue, 7 Oct 2025 20:13:37 +0300 Subject: [PATCH 01/14] refractor each date indicator to a new file --- .../background/cookieClock/CookieClock.qml | 2 + .../background/cookieClock/DateIndicator.qml | 188 ------------------ .../cookieClock/dateIndicators/BubbleDate.qml | 38 ++++ .../dateIndicators/DateIndicator.qml | 94 +++++++++ .../dateIndicators/RectangleDate.qml | 27 +++ .../dateIndicators/RotatingDate.qml | 44 ++++ 6 files changed, 205 insertions(+), 188 deletions(-) delete mode 100644 .config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml create mode 100644 .config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml create mode 100644 .config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml create mode 100644 .config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml create mode 100644 .config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index db5da0210..9dc74d790 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -9,6 +9,8 @@ import QtQuick import QtQuick.Layouts import Qt5Compat.GraphicalEffects +import "./dateIndicators" + Item { id: root diff --git a/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml deleted file mode 100644 index f9824bae3..000000000 --- a/.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml +++ /dev/null @@ -1,188 +0,0 @@ -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 - property color colBackground: Appearance.colors.colOnSecondaryContainer - property real dateSquareSize: 64 - - Loader { - anchors.fill: parent - opacity: root.style === "rotating" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - - active: opacity > 0 - sourceComponent: Canvas { - z: 0 - rotation: { - if (!Config.options.time.secondPrecision) - return 0; - return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center - } - - 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(); - } - } - } - } - - // Square date (only today's number) in right side of the clock - Loader { - anchors { - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 10 - } - width: root.style === "rect" ? 45 : 0 - height: root.style === "rect" ? 30 : 0 - Behavior on width { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on height { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - active: height > 0 - sourceComponent: Rectangle { - z: 1 - color: root.colBackground - radius: Appearance.rounding.small - 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 - Loader { - anchors { - left: parent.left - bottom: parent.bottom - topMargin: 50 - } - property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 - width: targetSize - height: targetSize - Behavior on targetSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - active: targetSize > 0 - sourceComponent: Item { - MaterialCookie { - z: 5 - sides: 4 - anchors.centerIn: parent - color: Appearance.colors.colPrimaryContainer - implicitSize: root.style === "bubble" ? root.dateSquareSize : 0 - constantlyRotate: Config.options.background.clock.cookie.constantlyRotate - Behavior on implicitSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - } - StyledText { - z: 6 - anchors.centerIn: parent - text: DateTime.date.substring(5, 7) - color: Appearance.colors.colPrimary - opacity: root.style === "bubble" ? 1.0 : 0 - font { - family: Appearance.font.family.expressive - pixelSize: 30 - weight: 1000 - } - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - } - - // Date bubble style right side - Loader { - anchors { - right: parent.right - top: parent.top - bottomMargin: 50 - } - property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 - width: targetSize - height: targetSize - Behavior on targetSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - - active: targetSize > 0 - sourceComponent: Item { - MaterialCookie { - z: 5 - sides: 1 - anchors.centerIn: parent - color: Appearance.colors.colTertiaryContainer - implicitSize: root.style === "bubble" ? root.dateSquareSize : 0 - constantlyRotate: Config.options.background.clock.cookie.constantlyRotate - Behavior on implicitSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - } - StyledText { - z: 6 - anchors.centerIn: parent - text: DateTime.date.substring(8, 10) - color: Appearance.colors.colTertiary - opacity: root.style === "bubble" ? 1.0 : 0 - font { - family: Appearance.font.family.expressive - pixelSize: 30 - weight: 1000 - } - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - } - } - } -} diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml new file mode 100644 index 000000000..41c8ca85e --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml @@ -0,0 +1,38 @@ +pragma ComponentBehavior: Bound + +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Item { + property int bubbleIndex: 0 + + MaterialCookie { + z: 5 + sides: 4 + anchors.centerIn: parent + color: bubbleIndex === 0.0 ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer + implicitSize: root.style === "bubble" ? root.dateSquareSize : 0 + constantlyRotate: Config.options.background.clock.cookie.constantlyRotate + Behavior on implicitSize { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + } + StyledText { + z: 6 + anchors.centerIn: parent + text: bubbleIndex === 0.0 ? DateTime.date.substring(5, 7) : DateTime.date.substring(8, 10) + color: bubbleIndex === 0.0 ? Appearance.colors.colPrimary : Appearance.colors.colTertiary + opacity: root.style === "bubble" ? 1.0 : 0 + font { + family: Appearance.font.family.expressive + pixelSize: 30 + weight: 1000 + } + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml new file mode 100644 index 000000000..465a5751e --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -0,0 +1,94 @@ +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 + property color colBackground: Appearance.colors.colOnSecondaryContainer + property real dateSquareSize: 64 + + // Rotating date + Loader { + opacity: root.style === "rotating" ? 1.0 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + + anchors.fill: parent + active: opacity > 0 + sourceComponent: RotatingDate {} + } + + // Square date (only today's number) in right side of the clock + Loader { + width: root.style === "rect" ? 45 : 0 + height: root.style === "rect" ? 30 : 0 + + Behavior on height { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + Behavior on width { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } + + active: height > 0 + sourceComponent: RectangleDate {} + + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: 10 + } + + } + + // Date bubble style day + Loader { + 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 + + anchors { + left: parent.left + bottom: parent.bottom + topMargin: 50 + } + sourceComponent: BubbleDate { + bubbleIndex: 0 + } + } + + // Date bubble month + Loader { + 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 + + + anchors { + right: parent.right + top: parent.top + bottomMargin: 50 + } + sourceComponent: BubbleDate { + bubbleIndex: 1 + } + } +} diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml new file mode 100644 index 000000000..a96e9ba07 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml @@ -0,0 +1,27 @@ +pragma ComponentBehavior: Bound + +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Rectangle { + z: 1 + color: root.colBackground + radius: Appearance.rounding.small + 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 + } + } +} \ No newline at end of file diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml new file mode 100644 index 000000000..70e282324 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml @@ -0,0 +1,44 @@ +pragma ComponentBehavior: Bound + +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import QtQuick + +Canvas { + z: 0 + rotation: { + if (!Config.options.time.secondPrecision) + return 0; + return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center + } + + 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(); + } + } +} \ No newline at end of file From 68ea59328eadef1659ce6da1f93e55b4d51fae42 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Tue, 7 Oct 2025 21:46:40 +0300 Subject: [PATCH 02/14] change 'rotating' dateStyle radius, fix bubble dateStyle --- .../cookieClock/dateIndicators/BubbleDate.qml | 2 +- .../dateIndicators/DateIndicator.qml | 18 +++++++----------- .../dateIndicators/RectangleDate.qml | 2 -- .../dateIndicators/RotatingDate.qml | 9 +++++++-- 4 files changed, 15 insertions(+), 16 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml index 41c8ca85e..7479574ac 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml @@ -11,7 +11,7 @@ Item { MaterialCookie { z: 5 - sides: 4 + sides: bubbleIndex === 0 ? 4 : 1 anchors.centerIn: parent color: bubbleIndex === 0.0 ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer implicitSize: root.style === "bubble" ? root.dateSquareSize : 0 diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index 465a5751e..3e96dae05 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -16,11 +16,6 @@ Item { // Rotating date Loader { - opacity: root.style === "rotating" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } - anchors.fill: parent active: opacity > 0 sourceComponent: RotatingDate {} @@ -39,17 +34,19 @@ Item { } active: height > 0 - sourceComponent: RectangleDate {} - anchors { verticalCenter: parent.verticalCenter right: parent.right rightMargin: 10 } - + + sourceComponent: RectangleDate { + color: root.colBackground + radius: Appearance.rounding.small + } } - // Date bubble style day + // Date bubble / day Loader { property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 Behavior on targetSize { @@ -70,7 +67,7 @@ Item { } } - // Date bubble month + // Date bubble / month Loader { property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 Behavior on targetSize { @@ -80,7 +77,6 @@ Item { width: targetSize height: targetSize active: targetSize > 0 - anchors { right: parent.right diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml index a96e9ba07..ac9e63bbc 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml @@ -8,8 +8,6 @@ import QtQuick Rectangle { z: 1 - color: root.colBackground - radius: Appearance.rounding.small StyledText { opacity: root.style === "rect" ? 1.0 : 0 Behavior on opacity { diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml index 70e282324..96c39fe5a 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml @@ -8,19 +8,24 @@ import QtQuick Canvas { z: 0 + + opacity: root.style === "rotating" ? 1.0 : 0 + Behavior on opacity { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } + rotation: { if (!Config.options.time.secondPrecision) return 0; return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center } - 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 radius = 65; var angleStep = Math.PI / 2.35 / text.length; for (var i = 0; i < text.length; i++) { From 6c23d482dd7466a2824a1b5431a3a7ec1e2c2419 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 18:53:45 +0300 Subject: [PATCH 03/14] refactor 'rotating' date indicator with repeater/text --- .../background/cookieClock/MinuteMarks.qml | 8 ++- .../dateIndicators/RotatingDate.qml | 58 +++++++++---------- 2 files changed, 34 insertions(+), 32 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml index 6ac1a3e0d..40ca0b3c7 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/MinuteMarks.qml @@ -16,6 +16,7 @@ Item { property int minuteLineSize: 4 property color color: Appearance.colors.colOnSecondaryContainer property string style: Config.options.background.clock.cookie.dialNumberStyle // "dots", "numbers", "full", "hide" + property string dateStyle : Config.options.background.clock.cookie.dateStyle Repeater { model: 12 @@ -64,7 +65,7 @@ Item { anchors { left: parent.left verticalCenter: parent.verticalCenter - leftMargin: root.style === "numbers" ? 32 : 96 + leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96 } Behavior on anchors.leftMargin { animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) @@ -78,9 +79,12 @@ Item { rotation: numberItem.index % 2 === 0 ? numberItem.index * 90 : -numberItem.index * 90 //A better way can be found to show texts on right angle font { family: Appearance.font.family.reading - pixelSize: 80 + pixelSize: root.dateStyle === "rotating" ? 70 : 80 weight: 1000 } + Behavior on font.pixelSize { + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) + } } } } diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml index 96c39fe5a..9ba30530e 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml @@ -6,44 +6,42 @@ import qs.modules.common import qs.modules.common.widgets import QtQuick -Canvas { - z: 0 +Item { + id: root - opacity: root.style === "rotating" ? 1.0 : 0 - Behavior on opacity { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) - } + property real radius: 65 + + 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 rotation: { - if (!Config.options.time.secondPrecision) - return 0; - return (secondHandLoader.item.rotation + 45); // +45 degrees to align text's center + if (!Config.options.time.secondPrecision) return 0 + else return secondHandLoader.item.rotation + 45 // +45 to center the text } - 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 = 65; - var angleStep = Math.PI / 2.35 / text.length; + Repeater { + model: root.dateText.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); + delegate: Text { + required property int index + property real angle: index * root.angleStep - Math.PI / 2 - ctx.save(); - ctx.translate(x, y); - ctx.rotate(angle + 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 - if (i >= 3) - ctx.fillStyle = root.colOnBackground; - else - ctx.fillStyle = Appearance.colors.colSecondaryHover; + 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 - ctx.fillText(text[i], 0, 0); - ctx.restore(); } } -} \ No newline at end of file +} From eeed075be22e61103f0ccf39b36e106677655642 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 19:00:21 +0300 Subject: [PATCH 04/14] make 'numbers' dial and 'rotating' date respect each other on position --- .../cookieClock/dateIndicators/DateIndicator.qml | 4 +++- .../cookieClock/dateIndicators/RotatingDate.qml | 13 ++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index 3e96dae05..1c7bbebca 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -18,7 +18,9 @@ Item { Loader { anchors.fill: parent active: opacity > 0 - sourceComponent: RotatingDate {} + sourceComponent: RotatingDate { + style: root.style + } } // Square date (only today's number) in right side of the clock diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml index 9ba30530e..344f8058b 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml @@ -9,7 +9,13 @@ import QtQuick Item { id: root - property real radius: 65 + property string style: Config.options.background.clock.cookie.dateStyle + readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle + + property real radius: style === "rotating" ? dialStyle === "numbers" ? 90 : 65 : 0 + Behavior on radius { + animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + } property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd") property real angleStep: Math.PI / 2.35 / dateText.length @@ -17,6 +23,11 @@ Item { 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 From 5c29ac8d1e83dc7048f256b211b1778479127f53 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 19:05:34 +0300 Subject: [PATCH 05/14] 'rotating' date also respects timeIndicators --- .../background/cookieClock/dateIndicators/RotatingDate.qml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml index 344f8058b..dc381d332 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RotatingDate.qml @@ -11,10 +11,11 @@ Item { property string style: Config.options.background.clock.cookie.dateStyle readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle + readonly property bool timeIndicators: Config.options.background.clock.cookie.timeIndicators - property real radius: style === "rotating" ? dialStyle === "numbers" ? 90 : 65 : 0 + property real radius: style === "rotating" ? dialStyle === "numbers" || timeIndicators ? 90 : 75 : 0 Behavior on radius { - animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this) + animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } property string dateText: Qt.locale().toString(DateTime.clock.date, "ddd dd") From 4fb7f7c1e7b37cf1bc37d14af1356ef96c3df972 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 20:10:21 +0300 Subject: [PATCH 06/14] 'rect' date respects 'numbers' dial style position --- .../dateIndicators/DateIndicator.qml | 23 ++++++++----------- .../dateIndicators/RectangleDate.qml | 19 +++++++++++++++ 2 files changed, 28 insertions(+), 14 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index 1c7bbebca..943995ffc 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -9,6 +9,7 @@ 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 @@ -23,28 +24,22 @@ Item { } } - // Square date (only today's number) in right side of the clock + // Rectangle date (only today's number) in right side of the clock Loader { - width: root.style === "rect" ? 45 : 0 - height: root.style === "rect" ? 30 : 0 - - Behavior on height { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } - Behavior on width { + id: rectLoader + z: 0 + + property real animIndex: root.style === "rect" ? 1.0 : 0.0 + Behavior on animIndex { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) } - active: height > 0 - anchors { - verticalCenter: parent.verticalCenter - right: parent.right - rightMargin: 10 - } + active: animIndex > 0 sourceComponent: RectangleDate { color: root.colBackground radius: Appearance.rounding.small + animIndex: rectLoader.animIndex } } diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml index ac9e63bbc..67d5709e3 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml @@ -8,6 +8,25 @@ import QtQuick Rectangle { z: 1 + + readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle + + property real animIndex: 0 + opacity: animIndex + + width: 45 + height: 30 + + x: dialStyle === "numbers" ? 155 : 175 + y: dialStyle === "numbers" ? 155 : 100 + + 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 { From 19230db8b7f732246813c17ce78e0d6cad50ad97 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 20:30:30 +0300 Subject: [PATCH 07/14] fix 'rect' date z layer problem --- .../ii/modules/background/cookieClock/CookieClock.qml | 1 + .../background/cookieClock/dateIndicators/DateIndicator.qml | 3 +-- .../background/cookieClock/dateIndicators/RectangleDate.qml | 6 +----- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml index 9dc74d790..d5472369e 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml @@ -120,6 +120,7 @@ Item { id: secondHandLoader active: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none" anchors.fill: parent + z: 2 sourceComponent: SecondHand { id: secondHand handWidth: root.secondHandWidth diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index 943995ffc..850bc34f8 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -27,7 +27,6 @@ Item { // Rectangle date (only today's number) in right side of the clock Loader { id: rectLoader - z: 0 property real animIndex: root.style === "rect" ? 1.0 : 0.0 Behavior on animIndex { @@ -37,7 +36,7 @@ Item { active: animIndex > 0 sourceComponent: RectangleDate { - color: root.colBackground + color: Appearance.colors.colSecondaryContainerHover radius: Appearance.rounding.small animIndex: rectLoader.animIndex } diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml index 67d5709e3..c24222206 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml @@ -1,4 +1,3 @@ -pragma ComponentBehavior: Bound import qs import qs.services @@ -7,17 +6,14 @@ import qs.modules.common.widgets import QtQuick Rectangle { - z: 1 - readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle - property real animIndex: 0 opacity: animIndex width: 45 height: 30 - x: dialStyle === "numbers" ? 155 : 175 + x: dialStyle === "numbers" ? 155 : 150 y: dialStyle === "numbers" ? 155 : 100 Behavior on x { From 70f3a257981f313203aeafc59c35efbef3cd9cf9 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 21:16:14 +0300 Subject: [PATCH 08/14] add animation to 'rect' date style --- .../cookieClock/dateIndicators/DateIndicator.qml | 5 ++++- .../cookieClock/dateIndicators/RectangleDate.qml | 13 +++++++------ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index 850bc34f8..f1977117e 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -27,7 +27,7 @@ Item { // Rectangle date (only today's number) in right side of the clock Loader { id: rectLoader - + property real animIndex: root.style === "rect" ? 1.0 : 0.0 Behavior on animIndex { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) @@ -35,6 +35,9 @@ Item { active: animIndex > 0 + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + sourceComponent: RectangleDate { color: Appearance.colors.colSecondaryContainerHover radius: Appearance.rounding.small diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml index c24222206..c2410c81e 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/RectangleDate.qml @@ -6,15 +6,16 @@ import qs.modules.common.widgets import QtQuick Rectangle { + id: rect readonly property string dialStyle: Config.options.background.clock.cookie.dialNumberStyle property real animIndex: 0 - opacity: animIndex + opacity: animIndex - width: 45 - height: 30 - - x: dialStyle === "numbers" ? 155 : 150 - y: dialStyle === "numbers" ? 155 : 100 + 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) From aa064fb6c5829dc102118af903c30710cf63dbed Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 22:21:50 +0300 Subject: [PATCH 09/14] fix: 'bubble' date indicator start animation not working --- .../background/cookieClock/dateIndicators/BubbleDate.qml | 6 ++---- .../background/cookieClock/dateIndicators/DateIndicator.qml | 4 ++++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml index 7479574ac..079c9650a 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/BubbleDate.qml @@ -8,17 +8,15 @@ import QtQuick Item { property int bubbleIndex: 0 + property real targetSize: 0 MaterialCookie { z: 5 sides: bubbleIndex === 0 ? 4 : 1 anchors.centerIn: parent color: bubbleIndex === 0.0 ? Appearance.colors.colPrimaryContainer : Appearance.colors.colTertiaryContainer - implicitSize: root.style === "bubble" ? root.dateSquareSize : 0 + implicitSize: targetSize constantlyRotate: Config.options.background.clock.cookie.constantlyRotate - Behavior on implicitSize { - animation: Appearance.animation.elementResize.numberAnimation.createObject(this) - } } StyledText { z: 6 diff --git a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml index f1977117e..d2626d751 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/dateIndicators/DateIndicator.qml @@ -47,6 +47,7 @@ Item { // Date bubble / day Loader { + id: dayBubbleLoader property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 Behavior on targetSize { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) @@ -63,11 +64,13 @@ Item { } sourceComponent: BubbleDate { bubbleIndex: 0 + targetSize: dayBubbleLoader.targetSize } } // Date bubble / month Loader { + id: monthBubbleLoader property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0 Behavior on targetSize { animation: Appearance.animation.elementResize.numberAnimation.createObject(this) @@ -84,6 +87,7 @@ Item { } sourceComponent: BubbleDate { bubbleIndex: 1 + targetSize: monthBubbleLoader.targetSize } } } From 64455b594b1a86460ae851ad8c5cdff06c2a5f31 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 23:30:21 +0300 Subject: [PATCH 10/14] add cookie quote again (you can revert this if you dont want) --- .../ii/modules/background/Background.qml | 9 +++ .../background/cookieClock/CookieQuote.qml | 62 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 .config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml index 47962f514..69e249c9a 100644 --- a/.config/quickshell/ii/modules/background/Background.qml +++ b/.config/quickshell/ii/modules/background/Background.qml @@ -24,6 +24,7 @@ Variants { readonly property real clockSizePadding: 20 readonly property real screenSizePadding: 50 readonly property string clockStyle: Config.options.background.clock.style + readonly property bool showQuote: Config.options.background.showQuote && Config.options.background.quote !== "" model: Quickshell.screens PanelWindow { @@ -339,6 +340,14 @@ Variants { active: visible sourceComponent: CookieClock {} } + + Loader { + id: cookieQuoteLoader + visible: root.showQuote + active: visible + anchors.horizontalCenter: parent.horizontalCenter + sourceComponent: CookieQuote {} + } } diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml new file mode 100644 index 000000000..c3d83e511 --- /dev/null +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml @@ -0,0 +1,62 @@ +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import QtQuick +import QtQuick.Layouts +import Qt5Compat.GraphicalEffects + + +Item { + id: root + + readonly property string quoteText: Config.options.background.quote + + implicitWidth: quoteBox.implicitWidth + implicitHeight: quoteBox.implicitHeight + + anchors.bottom: parent.bottom + anchors.bottomMargin: -24 + + DropShadow { + source: quoteBox + anchors.fill: quoteBox + horizontalOffset: 0 + verticalOffset: 2 + radius: 12 + samples: radius * 2 + 1 + color: root.colShadow + transparentBorder: true + } + + Rectangle { + id: quoteBox + + implicitWidth: quoteStyledText.width + quoteIcon.width + 16 // for spacing on both sides + implicitHeight: quoteStyledText.height + 8 + radius: Appearance.rounding.small + color: Appearance.colors.colSecondaryContainer + RowLayout { + anchors.centerIn: parent + spacing: 4 + MaterialSymbol { + id: quoteIcon + iconSize: Appearance.font.pixelSize.huge + text: "comic_bubble" + color: Appearance.colors.colOnSecondaryContainer + } + StyledText { + id: quoteStyledText + Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + text: Config.options.background.quote + font { + family: Appearance.font.family.main + pixelSize: Appearance.font.pixelSize.large + weight: Font.Normal + italic: true + } + } + } + } +} \ No newline at end of file From 74787f89278e8fef26fcc0aeed6769fead910e73 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 23:34:32 +0300 Subject: [PATCH 11/14] center the cookie quote correctly --- .config/quickshell/ii/modules/background/Background.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml index 69e249c9a..9db9d8b26 100644 --- a/.config/quickshell/ii/modules/background/Background.qml +++ b/.config/quickshell/ii/modules/background/Background.qml @@ -345,8 +345,8 @@ Variants { id: cookieQuoteLoader visible: root.showQuote active: visible - anchors.horizontalCenter: parent.horizontalCenter sourceComponent: CookieQuote {} + anchors.horizontalCenter: cookieClockLoader.horizontalCenter } } From a35d128bb54b1d79fbe07a2fee7ba2ab369e0379 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Wed, 8 Oct 2025 23:45:00 +0300 Subject: [PATCH 12/14] fix: cookie quote shadow color --- .../ii/modules/background/cookieClock/CookieQuote.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml index c3d83e511..39afa2004 100644 --- a/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml +++ b/.config/quickshell/ii/modules/background/cookieClock/CookieQuote.qml @@ -25,7 +25,7 @@ Item { verticalOffset: 2 radius: 12 samples: radius * 2 + 1 - color: root.colShadow + color: Appearance.colors.colShadow transparentBorder: true } From 28b47b25ea4b381af1696415b0a6eb444bef7724 Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Thu, 9 Oct 2025 17:06:41 +0300 Subject: [PATCH 13/14] fix: hide cookie quote on lock screen --- .config/quickshell/ii/modules/background/Background.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml index 9db9d8b26..bee91738f 100644 --- a/.config/quickshell/ii/modules/background/Background.qml +++ b/.config/quickshell/ii/modules/background/Background.qml @@ -24,7 +24,7 @@ Variants { readonly property real clockSizePadding: 20 readonly property real screenSizePadding: 50 readonly property string clockStyle: Config.options.background.clock.style - readonly property bool showQuote: Config.options.background.showQuote && Config.options.background.quote !== "" + readonly property bool showQuote: Config.options.background.showQuote && Config.options.background.quote !== "" && !GlobalStates.screenLocked model: Quickshell.screens PanelWindow { From 3bf6f7ca095a5b1031b691f623ac38a4f40e907f Mon Sep 17 00:00:00 2001 From: darksignal7 Date: Thu, 9 Oct 2025 17:45:04 +0300 Subject: [PATCH 14/14] fix: hide cookie quote on digital (am i blind or smthn?) --- .config/quickshell/ii/modules/background/Background.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml index bee91738f..9e39dd275 100644 --- a/.config/quickshell/ii/modules/background/Background.qml +++ b/.config/quickshell/ii/modules/background/Background.qml @@ -24,7 +24,7 @@ Variants { readonly property real clockSizePadding: 20 readonly property real screenSizePadding: 50 readonly property string clockStyle: Config.options.background.clock.style - readonly property bool showQuote: Config.options.background.showQuote && Config.options.background.quote !== "" && !GlobalStates.screenLocked + readonly property bool showCookieQuote: Config.options.background.showQuote && Config.options.background.quote !== "" && !GlobalStates.screenLocked && Config.options.background.clock.style === "cookie" model: Quickshell.screens PanelWindow { @@ -343,7 +343,7 @@ Variants { Loader { id: cookieQuoteLoader - visible: root.showQuote + visible: root.showCookieQuote active: visible sourceComponent: CookieQuote {} anchors.horizontalCenter: cookieClockLoader.horizontalCenter