cookie clock: put hands in loaders

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

@@ -18,17 +18,7 @@ Item {
     readonly property string clockStyle: Config.options.background.clock.style
 
     property real implicitSize: 230
-    property real hourHandLength: 72
-    property real hourHandWidth: 20
-    property real minuteHandLength: 95
-    property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandStyle === "bold" ? hourHandWidth :
-                                    Config.options.background.clock.cookie.minuteHandStyle === "medium" ? 12 : 5
-    property real centerDotSize: 10
     property real hourDotSize: 12
-    property real hourMarkSize: 135
-    property real secondDotSize: 20
-    property real secondHandWidth: 2
-    property real secondHandLength: 100
     property real hourLineSize: 4
     property real minuteLineSize: 2
     property real hourNumberSize: 36
@@ -37,7 +27,7 @@ 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 colHourHand: Appearance.colors.colPrimaryContainer
+    property color colHourHand: Appearance.colors.colPrimary
     property color colMinuteHand: Appearance.colors.colSecondary
     property color colSecondHand: Appearance.colors.colTertiary
     property color colOnHourHand: Appearance.colors.colOnPrimary
@@ -52,7 +42,7 @@ Item {
     implicitHeight: implicitSize
 
     DropShadow {
-        source: cookie 
+        source: cookie
         anchors.fill: source
         horizontalOffset: 0
         verticalOffset: 2
@@ -77,14 +67,14 @@ Item {
         anchors.fill: parent
         color: root.colOnBackground
     }
-    
+
     // Stupid extra hour marks in the middle
     FadeLoader {
         id: hourMarksLoader
         anchors.centerIn: parent
         shown: Config.options.background.clock.cookie.hourMarks
         sourceComponent: HourMarks {
-            implicitSize: root.hourMarkSize * (1.75 - 0.75 * hourMarksLoader.opacity)
+            implicitSize: 135 * (1.75 - 0.75 * hourMarksLoader.opacity)
             color: root.colTimeIndicators
             colOnBackground: root.colOnBackground
         }
@@ -99,45 +89,45 @@ Item {
         Behavior on scale {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        
+
         sourceComponent: TimeColumn {
             color: root.colOnBackground
         }
     }
-    
 
     // Hour hand
-    HourHand {
+    FadeLoader {
         anchors.fill: parent
-        handLength: root.hourHandLength
+        z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1
-        handWidth: root.hourHandWidth
+        shown: Config.options.background.clock.cookie.hourHandStyle !== "hide"
-        clockHour: root.clockHour
+        sourceComponent: HourHand {
-        clockMinute: root.clockMinute
+            clockHour: root.clockHour
-        style: Config.options.background.clock.cookie.hourHandStyle
+            clockMinute: root.clockMinute
-        color: root.colHourHand
+            style: Config.options.background.clock.cookie.hourHandStyle
+            color: root.colHourHand
+        }
     }
 
     // Minute hand
-    MinuteHand {
+    FadeLoader {
         anchors.fill: parent
-        handWidth: root.minuteHandWidth
+        shown: Config.options.background.clock.cookie.minuteHandStyle !== "hide"
-        handLength: root.minuteHandLength
+        sourceComponent: MinuteHand {
-        clockMinute: root.clockMinute
+            anchors.fill: parent
-        style: Config.options.background.clock.cookie.minuteHandStyle
+            clockMinute: root.clockMinute
-        color: root.colMinuteHand
+            style: Config.options.background.clock.cookie.minuteHandStyle
+            color: root.colMinuteHand
+        }
     }
 
     // Second hand
-    Loader {
+    FadeLoader {
         id: secondHandLoader
-        active: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none"
+        z: (Config.options.background.clock.cookie.secondHandStyle === "line") ? 2 : 3
+        shown: Config.options.time.secondPrecision && Config.options.background.clock.cookie.secondHandStyle !== "none"
         anchors.fill: parent
-        z: 2
         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
@@ -145,17 +135,15 @@ Item {
     }
 
     // Center dot
-    Rectangle {
+    FadeLoader {
-        visible: Config.options.background.clock.cookie.minuteHandStyle === "hide" && Config.options.background.clock.cookie.hourHandStyle === "hide" ? false : true
         z: 4
-        opacity: Config.options.background.clock.cookie.minuteHandStyle !== "bold" ? 1.0 : 0 
-        color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
         anchors.centerIn: parent
-        implicitWidth: centerDotSize
+        shown: Config.options.background.clock.cookie.minuteHandStyle !== "bold"
-        implicitHeight: implicitWidth
+        sourceComponent: Rectangle {
-        radius: implicitWidth / 2
+            color: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? root.colBackground : root.colMinuteHand
-        Behavior on opacity {
+            implicitWidth: 8
-            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            implicitHeight: implicitWidth
+            radius: width / 2
         }
     }
 
@@ -166,5 +154,4 @@ Item {
         style: Config.options.background.clock.cookie.dateStyle
         dateSquareSize: root.dateSquareSize
     }
-
 }

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

@@ -5,45 +5,30 @@ import QtQuick
 
 Item {
     id: root
-    anchors.fill: parent
 
     required property int clockHour
     required property int clockMinute
     property real handLength: 72
-    property real handWidth: 16
+    property real handWidth: 18
     property string style: "fill"
     property color color: Appearance.colors.colPrimary
 
-    property real fillColorAlpha: root.style === "stroke" ? 0.0 : 1.0 // for animation
+    property real fillColorAlpha: root.style === "stroke" ? 0 : 1
     Behavior on fillColorAlpha {
         animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
     }
-    
 
     rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
-    z: root.style === "fill" ? 3 : 1
-
-    opacity: root.style === "hide" ? 0.0 : 1.0
-    Behavior on opacity {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
 
     Rectangle {
         anchors.verticalCenter: parent.verticalCenter
-        x: {
+        x: (parent.width - root.handWidth) / 2 - 15 * (root.style === "classic")
-            let position = parent.width / 2 - root.handWidth / 2;
-            if (root.style === "classic") position -= 15;
-            return position;
-        }
         width: root.handLength
         height: root.style === "classic" ? 8 : root.handWidth
-
         radius: root.style === "classic" ? 2 : root.handWidth / 2
-        color : Qt.rgba(root.color.r, root.color.g, root.color.b, fillColorAlpha)
+        color : Qt.rgba(root.color.r, root.color.g, root.color.b, root.fillColorAlpha)
-
         border.color: root.color
         border.width: 4
-        
 
         Behavior on x {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)

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

@@ -8,21 +8,17 @@ Item {
     anchors.fill: parent
 
     required property int clockMinute
-    property real handWidth: 16
-    property real handLength: 95
     property string style: "medium"
+    property real handLength: 95
+    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
-    opacity: root.style === "hide" ? 0.0 : 1.0
 
     Behavior on rotation {
         animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
     }
-    Behavior on opacity {
-        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-    }
 
     Rectangle {
         anchors.verticalCenter: parent.verticalCenter

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

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.modules.common
+import qs.modules.common.widgets
 import QtQuick
 
 Item {
@@ -14,50 +15,23 @@ Item {
     property string style: "hide"
     property color color: Appearance.colors.colSecondary
     
-    z: root.style === "line" ? 2 : 3
+    rotation: (360 / 60 * clockSecond) + 90
-    rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand
-    opacity: root.style !== "hide" ? 1.0 : 0
 
-    Behavior on opacity {
-        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-    }
     Behavior on rotation {
         enabled: Config.options.background.clock.cookie.constantlyRotate // Animating every second is expensive...
         animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
     }
 
     Rectangle {
-        implicitWidth: root.style === "dot" ? root.dotSize : root.handLength
-        implicitHeight: root.style === "dot" ? root.dotSize : root.handWidth
-        radius: root.style === "dot" ? implicitWidth / 2 : root.handWidth / 2
-        color: root.color
-        Behavior on implicitHeight {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        Behavior on implicitWidth {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
         anchors {
             left: parent.left
             verticalCenter: parent.verticalCenter
             leftMargin: 10
         }
-    }
+        implicitWidth: root.style === "dot" ? root.dotSize : root.handLength
-    Rectangle {
+        implicitHeight: root.style === "dot" ? root.dotSize : root.handWidth
-        // Dot on the classic style
+        radius: Math.min(width, height) / 2
-        opacity: root.style === "classic" ? 1.0 : 0.0
-        implicitHeight: root.style === "classic" ? 14 : 0
-        implicitWidth: root.style === "classic" ? 14 : 0
         color: root.color
-        radius: Appearance.rounding.small
-        anchors {
-            left: parent.left
-            verticalCenter: parent.verticalCenter
-            leftMargin: 40
-        }
-        Behavior on opacity {
-            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-        }
         Behavior on implicitHeight {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
@@ -65,4 +39,29 @@ Item {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
     }
-}
+
+    // Classic style dot in the middle of the hand
+    FadeLoader {
+        id: classicDotLoader
+        anchors {
+            left: parent.left
+            verticalCenter: parent.verticalCenter
+        }
+        shown: root.style === "classic"
+        Rectangle {
+            anchors {
+                left: parent.left
+                verticalCenter: parent.verticalCenter
+                leftMargin: 40
+            }
+            implicitWidth: root.style === "classic" ? 14 : 0
+            implicitHeight: implicitWidth
+            color: root.color
+            radius: Appearance.rounding.small
+
+            Behavior on implicitWidth {
+                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+            }
+        }
+    }
+}

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

@@ -30,7 +30,7 @@ Item {
         sourceComponent: BigHourNumbers {
             numberSize: 80
             color: root.color
-            margins: 70 - bigHourNumbersLoader.opacity * 40
+            margins: 20 - 10 * bigHourNumbersLoader.opacity
         }
     }
 

.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml

@@ -54,7 +54,7 @@ Item {
                     var radius = root.implicitSize / 2 - root.amplitude
                     for (var i = 0; i <= steps; i++) {
                         var angle = (i / steps) * 2 * Math.PI
-                        var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * -root.constantlyRotate)
+                        var rotatedAngle = angle * root.sides + Math.PI/2 + (root.shapeRotation * root.constantlyRotate)
                         var wave = Math.sin(rotatedAngle) * root.amplitude
                         var x = Math.cos(angle) * (radius + wave) + cx
                         var y = Math.sin(angle) * (radius + wave) + cy