bg clock: move date indicator to new file

.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -188,15 +188,18 @@ Item {
     }
 
     // Second hand
-    SecondHand {
+    Loader {
-        id: secondHand
+        active: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none"
         anchors.fill: parent
-        handWidth: root.secondHandWidth
+        sourceComponent: SecondHand {
-        handLength: root.secondHandLength
+            id: secondHand
-        dotSize: root.secondDotSize
+            handWidth: root.secondHandWidth
-        clockSecond: root.clockSecond
+            handLength: root.secondHandLength
-        style: Config.options.background.clock.cookie.secondHandStyle
+            dotSize: root.secondDotSize
-        color: root.colSecondHand
+            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)
+    DateIndicator {
-    Canvas {
+        anchors.fill: parent
-        z: 0
+        colOnBackground: root.colOnBackground
-        width: cookie.width
+        style: Config.options.background.clock.cookie.dateStyle
-        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<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: 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)
-            }
-        }
     }
     
     // Hour Indicator numbers (3-6-9-12)

.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)
+            }
+        }
+    }
+}