refractor MinuteMarks

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

@@ -10,6 +10,7 @@ import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
 import "./dateIndicators"
+import "./minuteMarks"
 
 Item {
     id: root
@@ -74,10 +75,8 @@ Item {
     // Hour/minutes numbers/dots/lines
     MinuteMarks {
         anchors.fill: parent
-        property int hourDotSize: root.hourDotSize
+        hourDotSize: root.hourDotSize
-        property int hourNumberSize: root.hourNumberSize
+        hourNumberSize: root.hourNumberSize
-        property int hourLineSize: root.hourLineSize
-        property int minuteLineSize: root.minuteLineSize
         color: root.colOnBackground
     }
     HourMarks {

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

@@ -1,145 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import qs.modules.common
-import qs.modules.common.widgets
-import QtQuick
-
-Item {
-    id: root
-
-    property int hourDotSize: 16
-    property int hourNumberSize: 80
-    property int hourLineSize: 8
-    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
-        Item {
-            required property int index
-            opacity: root.style === "dots" ? 1.0 : 0
-            rotation: 360 / 12 * index 
-            anchors.fill: parent
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            }
-            Rectangle {
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "dots" ? 10 : 50
-                }
-                Behavior on anchors.leftMargin {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-                implicitWidth: root.hourDotSize
-                implicitHeight: implicitWidth
-                radius: implicitWidth / 2
-                color: root.color
-                opacity: 0.5
-            }
-        }
-    }
-
-    // Hour Indicator numbers (3-6-9-12)
-    Repeater {
-        model: 4
-        Item {
-            id: numberItem
-            required property int index
-            opacity: root.style === "numbers" ? 1.0 : 0 
-            rotation: 360 / 4 * index 
-            anchors.fill: parent
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            }
-            Rectangle {
-                color: "transparent"
-                implicitWidth: root.hourNumberSize
-                implicitHeight: implicitWidth
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "numbers" ? root.dateStyle === "rotating" ? 48 : 32 : 96
-                }
-                Behavior on anchors.leftMargin {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-                StyledText {
-                    color: root.color
-                    anchors.centerIn: parent
-                    text: numberItem.index === 0 ? "9" : 
-                        numberItem.index === 1 ? "12" : 
-                        numberItem.index === 2 ? "3" : "6"
-                    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: root.dateStyle === "rotating" ? 70 : 80
-                        weight: 1000
-                    }
-                    Behavior on font.pixelSize {
-                        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-                    }
-                }
-            }
-        }
-    }
-
-    // Full dial style hour lines
-    Repeater {
-        model: 12
-        Item {
-            required property int index
-            rotation: 360 / 12 * index 
-            anchors.fill: parent
-            opacity: root.style === "full" ? 1.0 : 0
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            }
-            Rectangle {
-                implicitWidth: root.hourLineSize * 3.5
-                implicitHeight: root.hourLineSize
-                radius: implicitWidth / 2
-                color: root.color
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "full" ? 10 : 50
-                }
-                Behavior on anchors.leftMargin {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-            }
-        }
-    }
-    // Full dial style minute lines
-    Repeater {
-        model: 60
-        Item {
-            required property int index
-            rotation: 360 / 60 * index 
-            anchors.fill: parent
-            opacity: root.style === "full" ? 1.0 : 0
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-            }
-            Rectangle {
-                implicitWidth: root.minuteLineSize * 3.5
-                implicitHeight: root.minuteLineSize
-                radius: implicitWidth / 2
-                color: root.color
-                opacity: 0.5
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: root.style === "full" ? 10 : 50
-                }
-                Behavior on anchors.leftMargin {
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-            }
-        }
-    }
-}

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

@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real numberSize: 80
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    property int hours: 12
+    property int numbers: 4
+    property int fontSize: 80
+
+    Repeater {
+        model: root.numbers
+
+        Item {
+            id: numberItem
+            required property int index
+            rotation: 360 / root.numbers * (index + 1)
+            anchors.fill: parent
+            
+            Item {
+                implicitWidth: root.numberSize
+                implicitHeight: implicitWidth
+                anchors {
+                    top: parent.top
+                    horizontalCenter: parent.horizontalCenter
+                    topMargin: root.margins
+                }
+                StyledText {
+                    color: root.color
+                    anchors.centerIn: parent
+                    text: root.hours / root.numbers * (numberItem.index + 1)
+                    rotation: -numberItem.rotation
+
+                    font {
+                        family: Appearance.font.family.reading
+                        pixelSize: root.fontSize
+                        weight: Font.Black
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real implicitSize: 12
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    Repeater {
+        model: 12
+
+        Item {
+            required property int index
+            anchors.fill: parent // Ensures rotation works properly
+            rotation: 360 / 12 * index
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.implicitSize
+                implicitHeight: implicitWidth
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+
+Item {
+    id: root
+    property real numberSize: 80
+    property real margins: 10
+    property color color: Appearance.colors.colOnSecondaryContainer
+
+    property real hourLineSize: 4
+    property real minuteLineSize: 2
+    property real hourLineLength: 18
+    property real minuteLineLength: 7
+
+    property int hours: 12
+    property int minutes: 60
+
+    // Full dial style hour lines
+    Repeater {
+        model: root.hours
+
+        Item {
+            required property int index
+            rotation: 360 / root.hours * index
+            anchors.fill: parent
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.hourLineLength
+                implicitHeight: root.hourLineSize
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+
+    // Minute lines
+    Repeater {
+        model: root.minutes
+
+        Item {
+            required property int index
+            rotation: 360 / root.minutes * index 
+            anchors.fill: parent
+
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: root.margins
+                }
+                implicitWidth: root.minuteLineLength
+                implicitHeight: root.minuteLineSize
+                radius: implicitWidth / 2
+                color: root.color
+            }
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.common
+import qs.modules.common.widgets
+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
+
+    // 12 Dots
+    FadeLoader {
+        id: dotsLoader
+        anchors.fill: parent
+        shown: root.style === "dots"
+        sourceComponent: Dots {
+            color: root.color
+            margins: 46 - dotsLoader.opacity * 34
+        }
+    }
+
+    // 3-6-9-12 hour numbers (pls don't realize you can have more than 4 numbers)
+    FadeLoader {
+        id: bigHourNumbersLoader
+        anchors.fill: parent
+        shown: root.style === "numbers"
+        sourceComponent: BigHourNumbers {
+            numberSize: root.hourNumberSize
+            color: root.color
+            margins: 70 - bigHourNumbersLoader.opacity * 40
+        }
+    }
+
+    // Lines
+    FadeLoader {
+        id: linesLoader
+        anchors.fill: parent
+        shown: root.style === "full"
+        sourceComponent: Lines {
+            color: root.color
+            margins: 46 - linesLoader.opacity * 34
+        }
+    }
+    
+}

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

@@ -0,0 +1,16 @@
+import QtQuick
+
+import qs.modules.common
+import qs.modules.common.widgets
+
+Loader {
+    id: root
+    property bool shown: true
+    opacity: shown ? 1 : 0
+    visible: opacity > 0
+    active: opacity > 0
+
+    Behavior on opacity {
+        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+    }
+}