background clock: refractor hour hand and minute hand to new file

.config/quickshell/ii/modules/background/Background.qml

@@ -14,6 +14,8 @@ import Quickshell.Io
 import Quickshell.Wayland
 import Quickshell.Hyprland
 
+import "./cookieClock"
+
 Variants {
     id: root
     readonly property bool fixedClockPosition: Config.options.background.clock.fixedPosition

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

@@ -35,17 +35,17 @@ 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 colMinuteHand: Appearance.colors.colPrimary
+    property color colMinuteHand: Appearance.colors.colSecondary
-    property color colHourHand: Appearance.colors.colSecondaryActive
+    property color colHourHand: Appearance.colors.colPrimary
     property color colOnHourHand: Appearance.colors.colOnPrimary
     property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover
     property color colSeconds: Appearance.colors.colTertiary
+
     readonly property list<string> clockNumbers: DateTime.time.split(/[: ]/)
     readonly property int clockHour: parseInt(clockNumbers[0]) % 12
     readonly property int clockMinute: DateTime.clock.minutes
     readonly property int clockSecond: DateTime.clock.seconds
 
-
     implicitWidth: implicitSize
     implicitHeight: implicitSize
 
@@ -169,59 +169,21 @@ Item {
     }
 
     // Hour hand
-    Item {
+    HourHand {
-        opacity: Config.options.background.clock.cookie.hourHandStyle === "hide" ? 0.0 : 1.0
         anchors.fill: parent
-        z: Config.options.background.clock.cookie.hourHandStyle === "fill" ? 3 : 1
+        handWidth: root.hourHandWidth
-        rotation: -90 + (360 / 12) * (root.clockHour + root.clockMinute / 60)
+        clockHour: root.clockHour
-        Behavior on opacity {
+        clockMinute: root.clockMinute
-            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+        style: Config.options.background.clock.cookie.hourHandStyle
-        }
+        color: root.colHourHand
-        Rectangle {
-            opacity: Config.options.background.clock.cookie.hourHandStyle !== "hide" ? 1.0 : 0
-            anchors.verticalCenter: parent.verticalCenter
-            x: Config.options.background.clock.cookie.hourHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
-            width: hourHandLength
-            height: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 8 : hourHandWidth
-            radius: Config.options.background.clock.cookie.hourHandStyle === "classic" ? 2 : hourHandWidth / 2
-            color : Config.options.background.clock.cookie.hourHandStyle === "stroke" ? "transparent" : root.colHourHand
-            border.color: root.colHourHand
-            border.width: 4
-            Behavior on opacity {
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            }
-            Behavior on x{
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            }
-        }
     }
 
     // Minute hand
-    Item {
+    MinuteHand {
-        opacity: Config.options.background.clock.cookie.minuteHandStyle === "hide" ? 0.0 : 1.0
         anchors.fill: parent
-        z: Config.options.background.clock.cookie.minuteHandStyle === "thin" ? 1 : 3
+        clockMinute: root.clockMinute
-        rotation: -90 + (360 / 60) * root.clockMinute
+        style: Config.options.background.clock.cookie.minuteHandStyle
-        Behavior on rotation{
+        color: root.colMinuteHand
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        Behavior on opacity {
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-        }
-        Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
-            x: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? (parent.width / 2 - minuteHandWidth / 2) - 15 : parent.width / 2 - minuteHandWidth / 2
-            width: minuteHandLength
-            height: minuteHandWidth
-            radius: Config.options.background.clock.cookie.minuteHandStyle === "classic" ? 2 : minuteHandWidth / 2
-            color: root.colMinuteHand
-            Behavior on height {
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            }
-            Behavior on x{
-                animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-            }
-        }
     }
 
     // Center dot

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

@@ -0,0 +1,48 @@
+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
+    anchors.fill: parent
+
+    required property int clockHour
+    required property int clockMinute
+    property real handWidth: 16
+    property string style: "fill"
+    property color color: Appearance.colors.colPrimary
+    
+    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: {
+            let position = parent.width / 2 - handWidth / 2;
+            if (root.style === "classic") position -= 15;
+            return position;
+        }
+        width: hourHandLength
+        height: root.style === "classic" ? 8 : handWidth
+
+        radius: root.style === "classic" ? 2 : handWidth / 2
+        color : root.style === "stroke" ? "transparent" : root.color
+
+        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

@@ -0,0 +1,51 @@
+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
+    anchors.fill: parent
+
+    required property int clockMinute
+    property real handWidth: 16
+    property string style: "medium"
+    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
+        x: {
+            let position = parent.width / 2 - root.handWidth / 2;
+            if (root.style === "classic") position -= 15;
+            return position;
+        }
+        width: minuteHandLength
+        height: root.handWidth
+        
+        radius: root.style === "classic" ? 2 : root.handWidth / 2
+        color: root.color
+
+        Behavior on height {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+
+        Behavior on x {
+            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        }
+    }
+}