background clock: hour marks: put in loader, reduce behavior spam

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

@@ -29,7 +29,7 @@ Item {
     property real secondDotSize: 20
     property real secondHandWidth: 2
     property real secondHandLength: 100
-    property real hourLineSize: 5
+    property real hourLineSize: 4
     property real minuteLineSize: 2
     property real hourNumberSize: 36
     property real dateSquareSize: 64
@@ -75,17 +75,18 @@ Item {
     // Hour/minutes numbers/dots/lines
     MinuteMarks {
         anchors.fill: parent
-        hourDotSize: root.hourDotSize
-        hourNumberSize: root.hourNumberSize
         color: root.colOnBackground
     }
 
-    HourMarks {
+    FadeLoader {
+        id: hourMarksLoader
         anchors.centerIn: parent
-        implicitSize: root.hourMarkSize
+        shown: Config.options.background.clock.cookie.hourMarks
-        markLength: root.hourDotSize
+        sourceComponent: HourMarks {
-        color: root.colTimeIndicators
+            implicitSize: root.hourMarkSize * (1.75 - 0.75 * hourMarksLoader.opacity)
-        colOnBackground: root.colOnBackground
+            color: root.colTimeIndicators
+            colOnBackground: root.colOnBackground
+        }
     }
 
     // Number column in the middle

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

@@ -9,70 +9,42 @@ import QtQuick
 Item {
     id: root
     property real implicitSize: 135
-    property real markLength: 10
+    property real markLength: 12
+    property real markWidth: 4
     property color color: Appearance.colors.colOnSecondaryContainer
     property color colOnBackground: Appearance.colors.colSecondaryContainer
-
+    property real padding: 10
-    property bool isEnabled: Config.options.background.clock.cookie.hourMarks
 
     Rectangle {
-        opacity: root.isEnabled ? 1.0 : 0 
-        z: 0
         color: root.color
         anchors.centerIn: parent
-        implicitWidth: root.isEnabled ? root.implicitSize : root.implicitSize * 1.75
+        implicitWidth: root.implicitSize
-        implicitHeight: root.isEnabled ? root.implicitSize : root.implicitSize * 1.75 // Not using implicitHeight to allow smooth transition
+        implicitHeight: root.implicitSize
-        radius: implicitWidth / 2
+        radius: width / 2
-        Behavior on opacity {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        Behavior on implicitWidth {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        Behavior on implicitHeight {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-    }
 
-    // Hour mark lines
+        // Hour mark lines
-    Rectangle {
-        id: glowLines
-        z: 1
-        anchors.centerIn: parent
         Repeater {
             model: 12
+
             Item {
                 required property int index
                 anchors.fill: parent
-
                 rotation: 360 / 12 * index 
-                opacity: root.isEnabled ? 1.0 : 0
-
-                Behavior on opacity {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
 
                 Rectangle {
                     anchors {
                         left: parent.left
                         verticalCenter: parent.verticalCenter
-                        leftMargin: root.isEnabled ? 50 : 75
+                        leftMargin: root.padding
                     }
                     implicitWidth: root.markLength
-                    implicitHeight: implicitWidth / 2 
+                    implicitHeight: root.markWidth
 
-                    radius: implicitWidth / 2
+                    radius: width / 2
                     color: root.colOnBackground
-                    opacity: root.isEnabled ? 0.5 : 0
-
-                    Behavior on opacity {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                    }
-                    Behavior on anchors.leftMargin {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                    }
                 }
             }
         }
     }
+
 }

.config/quickshell/ii/modules/background/cookieClock/minuteMarks/MinuteMarks.qml

@@ -7,8 +7,6 @@ import QtQuick
 Item {
     id: root
 
-    property int hourDotSize: 16
-    property int hourNumberSize: 80
     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
@@ -30,7 +28,7 @@ Item {
         anchors.fill: parent
         shown: root.style === "numbers"
         sourceComponent: BigHourNumbers {
-            numberSize: root.hourNumberSize
+            numberSize: 80
             color: root.color
             margins: 70 - bigHourNumbersLoader.opacity * 40
         }