move more stuff out of cookie clock file

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

@@ -70,102 +70,17 @@ Item {
         constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
     }
 
-    // Hour dots dial style
+    // Hour/minutes numbers/dots/lines
-    Repeater {
+    MinuteMarks {
-        model: 12
+        anchors.fill: parent
-        Item {
+    }
-            required property int index
+    HourMarks {
-            opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0
+        anchors.fill: parent
-            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: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 10 : 50
-                }
-                Behavior on anchors.leftMargin{
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-                implicitWidth: root.hourDotSize
-                implicitHeight: implicitWidth
-                radius: implicitWidth / 2
-                color: root.colOnBackground
-                opacity: 0.5
-            }
-        }
     }
 
-    // Center glow lines
+    // Number column in the middle
-    Rectangle {
+    TimeColumn {
-        id: glowLines
+        anchors.centerIn: parent
-        z: 1
-        anchors.centerIn: cookie
-        Repeater {
-            model: 12
-            Item {
-                required property int index
-                opacity: Config.options.background.clock.cookie.centerGlow ? 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: Config.options.background.clock.cookie.centerGlow ? 50 : 75
-                    }
-                    implicitWidth: root.hourDotSize
-                    implicitHeight: implicitWidth / 2 
-                    radius: implicitWidth / 2
-                    color: root.colOnBackground
-                    opacity: Config.options.background.clock.cookie.centerGlow ? 0.5 : 0 
-                    Behavior on opacity {
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                    }
-                    Behavior on anchors.leftMargin{
-                        animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                    }
-                }
-            }
-        }
-    }
-
-    // Numbers column
-    Column {
-        id: timeIndicators
-        z: 1
-        anchors.centerIn: cookie
-        spacing: -16
-        Repeater {
-            model: root.clockNumbers
-            delegate: StyledText {
-                required property string modelData
-                opacity: Config.options.background.clock.cookie.timeIndicators ? 1.0 : 0 // Not using visible to allow smooth transition
-                anchors.horizontalCenter: parent?.horizontalCenter
-                color: root.colOnBackground
-                text: modelData.padStart(2, "0")
-                font {
-                    property real numberSizeWithoutGlow: modelData.match(/am|pm/i) ? 26 : 68
-                    property real numberSizeWithGlow: modelData.match(/am|pm/i) ? 10 : 40
-                    pixelSize: !Config.options.background.clock.cookie.timeIndicators ? 100 : // open/close animation
-                                Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow // changing size according to center glow
-                    Behavior on pixelSize {
-                        animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
-                    }
-                    family: Appearance.font.family.expressive
-                    weight: Font.Bold
-                }
-                Behavior on opacity { 
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-            }
-        }
     }
 
     // Hour hand
@@ -217,125 +132,10 @@ Item {
         }
     }
 
-    // Center glow
-    Rectangle {
-        opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 
-        z: 0
-        color: root.colTimeIndicators
-        anchors.centerIn: parent
-        implicitWidth: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75
-        implicitHeight: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75 // Not using implicitHeight to allow smooth transition
-        radius: implicitWidth / 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)
-        }
-    }
-
     DateIndicator {
         anchors.fill: parent
         colOnBackground: root.colOnBackground
         style: Config.options.background.clock.cookie.dateStyle
     }
-    
-    // Hour Indicator numbers (3-6-9-12)
-    Repeater {
-        model: 4
-        Item {
-            required property int index
-            opacity: Config.options.background.clock.cookie.dialNumberStyle === "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: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 32 : 96
-                }
-                Behavior on anchors.leftMargin{
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-                StyledText{
-                    color: root.colOnBackground
-                    anchors.centerIn: parent
-                    text: index === 0 ? "9" : 
-                          index === 1 ? "12" : 
-                          index === 2 ? "3" : "6"
-                    rotation: index % 2 === 0 ? index * 90 : -index * 90 //A better way can be found to show texts on right angle
-                    font {
-                        family: Appearance.font.family.reading
-                        pixelSize: 80
-                        weight: 1000
-                    }
-                }
-            }
-        }
-    }
 
-    // Full dial style hour lines
-    Repeater {
-        model: 12
-        Item {
-            required property int index
-            rotation: 360 / 12 * index 
-            anchors.fill: parent
-            opacity: Config.options.background.clock.cookie.dialNumberStyle === "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.colOnBackground
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "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: Config.options.background.clock.cookie.dialNumberStyle === "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.colOnBackground
-                opacity: 0.5
-                anchors {
-                    left: parent.left
-                    verticalCenter: parent.verticalCenter
-                    leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "full" ? 10 : 50
-                }
-                Behavior on anchors.leftMargin{
-                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
-                }
-            }
-        }
-    }
 }

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

@@ -0,0 +1,66 @@
+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 {
+    Rectangle {
+        opacity: Config.options.background.clock.cookie.centerGlow ? 1.0 : 0 
+        z: 0
+        color: root.colTimeIndicators
+        anchors.centerIn: parent
+        implicitWidth: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75
+        implicitHeight: Config.options.background.clock.cookie.centerGlow ? centerGlowSize : centerGlowSize * 1.75 // Not using implicitHeight to allow smooth transition
+        radius: implicitWidth / 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)
+        }
+    }
+
+    // Center glow lines
+    Rectangle {
+        id: glowLines
+        z: 1
+        anchors.centerIn: parent
+        Repeater {
+            model: 12
+            Item {
+                required property int index
+                opacity: Config.options.background.clock.cookie.centerGlow ? 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: Config.options.background.clock.cookie.centerGlow ? 50 : 75
+                    }
+                    implicitWidth: root.hourDotSize
+                    implicitHeight: implicitWidth / 2 
+                    radius: implicitWidth / 2
+                    color: root.colOnBackground
+                    opacity: Config.options.background.clock.cookie.centerGlow ? 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.qml

@@ -0,0 +1,134 @@
+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 {
+    Repeater {
+        model: 12
+        Item {
+            required property int index
+            opacity: Config.options.background.clock.cookie.dialNumberStyle === "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: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 10 : 50
+                }
+                Behavior on anchors.leftMargin{
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                implicitWidth: root.hourDotSize
+                implicitHeight: implicitWidth
+                radius: implicitWidth / 2
+                color: root.colOnBackground
+                opacity: 0.5
+            }
+        }
+    }
+
+    // Hour Indicator numbers (3-6-9-12)
+    Repeater {
+        model: 4
+        Item {
+            required property int index
+            opacity: Config.options.background.clock.cookie.dialNumberStyle === "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: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 32 : 96
+                }
+                Behavior on anchors.leftMargin{
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+                StyledText{
+                    color: root.colOnBackground
+                    anchors.centerIn: parent
+                    text: index === 0 ? "9" : 
+                        index === 1 ? "12" : 
+                        index === 2 ? "3" : "6"
+                    rotation: index % 2 === 0 ? index * 90 : -index * 90 //A better way can be found to show texts on right angle
+                    font {
+                        family: Appearance.font.family.reading
+                        pixelSize: 80
+                        weight: 1000
+                    }
+                }
+            }
+        }
+    }
+
+    // Full dial style hour lines
+    Repeater {
+        model: 12
+        Item {
+            required property int index
+            rotation: 360 / 12 * index 
+            anchors.fill: parent
+            opacity: Config.options.background.clock.cookie.dialNumberStyle === "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.colOnBackground
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "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: Config.options.background.clock.cookie.dialNumberStyle === "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.colOnBackground
+                opacity: 0.5
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: Config.options.background.clock.cookie.dialNumberStyle === "full" ? 10 : 50
+                }
+                Behavior on anchors.leftMargin{
+                    animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+pragma ComponentBehavior: Bound
+
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+
+Column {
+    id: timeIndicators
+    z: 1
+    spacing: -16
+    Repeater {
+        model: root.clockNumbers
+        delegate: StyledText {
+            required property string modelData
+            opacity: Config.options.background.clock.cookie.timeIndicators ? 1.0 : 0 // Not using visible to allow smooth transition
+            anchors.horizontalCenter: parent?.horizontalCenter
+            color: root.colOnBackground
+            text: modelData.padStart(2, "0")
+            font {
+                property real numberSizeWithoutGlow: modelData.match(/am|pm/i) ? 26 : 68
+                property real numberSizeWithGlow: modelData.match(/am|pm/i) ? 10 : 40
+                pixelSize: !Config.options.background.clock.cookie.timeIndicators ? 100 : // open/close animation
+                            Config.options.background.clock.cookie.centerGlow ? numberSizeWithGlow : numberSizeWithoutGlow // changing size according to center glow
+                Behavior on pixelSize {
+                    animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+                }
+                family: Appearance.font.family.expressive
+                weight: Font.Bold
+            }
+            Behavior on opacity { 
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/settings/InterfaceConfig.qml

@@ -78,8 +78,8 @@ ContentPage {
                 }
                 options: [
                     {
-                        displayName: Translation.tr("None"),
+                        displayName: "",
-                        icon: "deselect",
+                        icon: "block",
                         value: "none"
                     },
                     {
@@ -110,6 +110,11 @@ ContentPage {
                     Config.options.background.clock.cookie.hourHandStyle = newValue;
                 }
                 options: [
+                    {
+                        displayName: "",
+                        icon: "block",
+                        value: "hide"
+                    },
                     {
                         displayName: Translation.tr("Classic"),
                         icon: "radio",
@@ -125,11 +130,6 @@ ContentPage {
                         icon: "stroke_full",
                         value: "fill"
                     },
-                    {
-                        displayName: Translation.tr("Hide"),
-                        icon: "deselect",
-                        value: "hide"
-                    }
                 ]
             }
         }
@@ -144,6 +144,11 @@ ContentPage {
                     Config.options.background.clock.cookie.minuteHandStyle = newValue;
                 }
                 options: [
+                    {
+                        displayName: "",
+                        icon: "block",
+                        value: "hide"
+                    },
                     {
                         displayName: Translation.tr("Classic"),
                         icon: "radio",
@@ -164,11 +169,6 @@ ContentPage {
                         icon: "pen_size_5",
                         value: "bold"
                     },
-                    {
-                        displayName: Translation.tr("Hide"),
-                        icon: "deselect",
-                        value: "hide"
-                    }
                 ]
             }
         }