change settings layout, add option for minuteHand and more..

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

@@ -21,11 +21,15 @@ Item {
     property real hourHandLength: 72
     property real hourHandWidth: 20
     property real minuteHandLength: 95
-    property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandSizeAdjust ? hourHandWidth : 12
+    property real minuteHandWidth: Config.options.background.clock.cookie.minuteHandStyle === "bold" ? hourHandWidth : 12
     property real centerDotSize: 10
     property real hourDotSize: 12
     property real centerGlowSize: 135
     property real secondDotSize: 20
+    property real secondsHandWidth: 2
+    property real secondsHandLength: 100
+
+    property real hourNumberSize: 36
     
 
     property color colShadow: Appearance.colors.colShadow
@@ -35,7 +39,7 @@ Item {
     property color colMinuteHand: Appearance.colors.colSecondaryActive
     property color colOnHourHand: Appearance.colors.colOnPrimary
     property color colTimeIndicators: Appearance.colors.colSecondaryContainerHover
-    property color colSecondDot: Appearance.colors.colTertiary
+    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: parseInt(clockNumbers[1])
@@ -92,7 +96,7 @@ Item {
         Repeater {
             model: 12
             Item {
-                opacity: Config.options.background.clock.cookie.hourDots ? 1.0 : 0 // Not using visible to allow smooth transition
+                opacity: Config.options.background.clock.cookie.dialNumberStyle === "dots" ? 1.0 : 0 // Not using visible to allow smooth transition
                 Behavior on opacity {
                     animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
                 }
@@ -113,7 +117,6 @@ Item {
                 }
             }
         }
-        
     }
 
     // Center glow behind the cookie
@@ -223,7 +226,7 @@ Item {
 
     // Center dot
     Rectangle {
-        opacity: !Config.options.background.clock.cookie.minuteHandSizeAdjust ? 1.0 : 0 // Not using visible to allow smooth transition
+        opacity: Config.options.background.clock.cookie.minuteHandStyle === "medium" ? 1.0 : 0 // Not using visible to allow smooth transition
         Behavior on opacity {
             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
         }
@@ -247,28 +250,74 @@ Item {
     }
 
 
-    // Second dot
+    // Second hand/ dot
     Item {
-        opacity: Config.options.background.clock.cookie.secondDot ? 1.0 : 0
+        z:3
+        opacity: Config.options.background.clock.cookie.secondHandStyle === "dot" || Config.options.background.clock.cookie.secondHandStyle === "line" ? 1.0 : 0 // Not using visible to allow smooth transition
         Behavior on opacity {
             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
         }
         Behavior on rotation{
-            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
         }
         rotation: (360 / 60 * clockSecond) + 90 // +90 degrees to align with minute hand
         anchors.fill: parent
         Rectangle {
+            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.secondDotSize
+            implicitWidth: Config.options.background.clock.cookie.secondHandStyle === "dot" ? root.secondDotSize : root.secondsHandLength
-            implicitHeight: implicitWidth
+            implicitHeight: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth : root.secondsHandWidth
-            radius: implicitWidth / 2
+            radius: Config.options.background.clock.cookie.secondHandStyle === "dot" ? implicitWidth / 2 : root.secondsHandWidth / 2
-            color: colSecondDot
+            color: colSeconds
-            opacity: 1.0
+        }
+    }
+
+    
+    
+    // Hour Indicator numbers
+    Repeater {
+        model: 4
+        Item {
+            opacity: Config.options.background.clock.cookie.dialNumberStyle === "numbers" ? 1.0 : 0 // Not using visible to allow smooth transition
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+            }
+            required property int index
+            rotation: 360 / 4 * index 
+            anchors.fill: parent
+            Rectangle {
+                anchors {
+                    left: parent.left
+                    verticalCenter: parent.verticalCenter
+                    leftMargin: 25
+                }
+                implicitWidth: root.hourNumberSize
+                implicitHeight: implicitWidth
+                //radius: implicitWidth / 2
+                color: "transparent"
+                //opacity: 0.5
+                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
+                    }
+                }
+            }
         }
     }
 

.config/quickshell/ii/modules/common/Config.qml

@@ -131,12 +131,12 @@ Singleton {
                     property real scale: 1
                     property int clockSides: 12
                     property JsonObject cookie: JsonObject {
-                        property bool hourDots: true
+                        property string dialNumberStyle: "dots" // Options: "dots" , "numbers", "none"
+                        property string minuteHandStyle: "medium" // Options: "medium", "bold"
+                        property string secondHandStyle: "dot" // Options: "dot", "line" , "none" 
                         property bool timeIndicators: true
-                        property bool minuteHandSizeAdjust: true
                         property bool centerGlow: true
                         property bool waveAnimation: true
-                        property bool secondDot: true
                     }
                     
                 }

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

@@ -69,6 +69,93 @@ ContentPage {
             }
         }
 
+
+        ConfigRow{
+            ContentSubsection {
+                enabled: Config.options.background.clock.style === "cookie"
+                title: Translation.tr("Dial number style")
+                ConfigSelectionArray {
+                    currentValue: Config.options.background.clock.cookie.dialNumberStyle
+                    onSelected: newValue => {
+                        Config.options.background.clock.cookie.dialNumberStyle = newValue;
+                        if (newValue !== "dots") {
+                            Config.options.background.clock.cookie.centerGlow = false;
+                        }
+                        if (newValue === "numbers") {
+                            Config.options.background.clock.cookie.timeIndicators  = false;
+                        }
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("None"),
+                            icon: "deselect",
+                            value: "none"
+                        },
+                        {
+                            displayName: Translation.tr("Dots"),
+                            icon: "graph_6",
+                            value: "dots"
+                        },
+                        {
+                            displayName: Translation.tr("Numbers"),
+                            icon: "123",
+                            value: "numbers"
+                        }
+                    ]
+                }
+            }
+            ContentSubsection {
+                enabled: Config.options.background.clock.style === "cookie"
+                title: Translation.tr("Seconds indicator style")
+                ConfigSelectionArray {
+                    currentValue: Config.options.background.clock.cookie.secondHandStyle
+                    onSelected: newValue => {
+                        Config.options.background.clock.cookie.secondHandStyle = newValue;
+                    }
+                    options: [
+                        {
+                            displayName: Translation.tr("None"),
+                            icon: "deselect",
+                            value: "none"
+                        },
+                        {
+                            displayName: Translation.tr("Dot"),
+                            icon: "adjust",
+                            value: "dot"
+                        },
+                        {
+                            displayName: Translation.tr("Line"),
+                            icon: "line_end",
+                            value: "line"
+                        }
+                    ]
+                }
+            }
+        }
+
+        ContentSubsection {
+        enabled: Config.options.background.clock.style === "cookie"
+        title: Translation.tr("Minute hand style")
+            ConfigSelectionArray {
+                currentValue: Config.options.background.clock.cookie.minuteHandStyle
+                onSelected: newValue => {
+                    Config.options.background.clock.cookie.minuteHandStyle = newValue;
+                }
+                options: [
+                    {
+                        displayName: Translation.tr("Medium"),
+                        icon: "pen_size_1",
+                        value: "medium"
+                    },
+                    {
+                        displayName: Translation.tr("Bold"),
+                        icon: "pen_size_5",
+                        value: "bold"
+                    },
+                ]
+            }
+        }
+
         ConfigSpinBox {
             enabled: Config.options.background.clock.style === "cookie"
             icon: "support"
@@ -81,20 +168,23 @@ ContentPage {
                 Config.options.background.clock.clockSides = value;
             }
         }
+        ConfigSwitch {
+            enabled: Config.options.background.clock.style === "cookie"
+            buttonIcon: "waves"
+            text: Translation.tr("Wave animation")
+            checked: Config.options.background.clock.cookie.waveAnimation
+            onCheckedChanged: {
+                Config.options.background.clock.cookie.waveAnimation = checked;
+            }
+            StyledToolTip {
+                text: "It may effect performance"
+            }
+        }
 
         ConfigRow{
             enabled: Config.options.background.clock.style === "cookie"
             ConfigSwitch {
-                buttonIcon: "graph_6"
+                enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle === "dots"
-                text: Translation.tr("Hour dots")
-                checked: Config.options.background.clock.cookie.hourDots
-                onCheckedChanged: {
-                    Config.options.background.clock.cookie.hourDots = checked;
-                    Config.options.background.clock.cookie.centerGlow = checked ? Config.options.background.clock.cookie.centerGlow : false;
-                }
-            }
-            ConfigSwitch {
-                enabled: Config.options.background.clock.cookie.hourDots
                 buttonIcon: "brightness_7"
                 text: Translation.tr("Center glow")
                 checked: Config.options.background.clock.cookie.centerGlow
@@ -104,50 +194,28 @@ ContentPage {
                 onCheckedChanged: {
                     Config.options.background.clock.cookie.centerGlow = checked;
                 }
+                StyledToolTip {
+                    text: "Can only be turned on using the 'Dots' dial style for aesthetic reasons"
+                }
             }
-        }
-
-        ConfigRow{
-            enabled: Config.options.background.clock.style === "cookie"
 
             ConfigSwitch {
+                enabled: Config.options.background.clock.style === "cookie" && Config.options.background.clock.cookie.dialNumberStyle !== "numbers"
                 buttonIcon: "farsight_digital"
                 text: Translation.tr("Clock indicator")
                 checked: Config.options.background.clock.cookie.timeIndicators
+                onEnabledChanged: {
+                    checked = Config.options.background.clock.cookie.timeIndicators
+                }
                 onCheckedChanged: {
                     Config.options.background.clock.cookie.timeIndicators = checked;
                 }
-            }
-            ConfigSwitch {
-                buttonIcon: "line_end"
-                text: Translation.tr("Minute hand adjust")
-                checked: Config.options.background.clock.cookie.minuteHandSizeAdjust
-                onCheckedChanged: {
-                    Config.options.background.clock.cookie.minuteHandSizeAdjust = checked;
-                }
-            }
-        }
-        ConfigRow{
-            enabled: Config.options.background.clock.style === "cookie"
-            ConfigSwitch {
-                buttonIcon: "pace"
-                text: Translation.tr("Second dot")
-                checked: Config.options.background.clock.cookie.secondDot
-                onCheckedChanged: {
-                    Config.options.background.clock.cookie.secondDot = checked;
-                }
-            }
-            ConfigSwitch {
-                buttonIcon: "waves"
-                text: Translation.tr("Wave animation")
-                checked: Config.options.background.clock.cookie.waveAnimation
-                onCheckedChanged: {
-                    Config.options.background.clock.cookie.waveAnimation = checked;
-                }
                 StyledToolTip {
-                    text: "It may effect performance"
+                    text: "Can't be turned on when using 'Numbers' dial style for aesthetic reasons"
                 }
             }
+
+            
         }