feat(clock): Improve digital clock style (#2593)

dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockText.qml

@@ -0,0 +1,19 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledText {
+    Layout.fillWidth: true
+    font {
+        family: Appearance.font.family.expressive
+        pixelSize: 20
+        weight: 350
+        // Set empty to prevent conflicts, not meaningless
+        styleName: ""
+        variableAxes: ({})
+    }
+    style: Text.Raised
+    styleColor: Appearance.colors.colShadow
+    animateChange: Config.options.background.widgets.clock.digital.animateChange
+}

dots/.config/quickshell/ii/modules/ii/background/widgets/clock/ClockWidget.qml

@@ -26,7 +26,7 @@ AbstractBackgroundWidget {
     visibleWhenLocked: true
 
     property var textHorizontalAlignment: {
-        if (root.forceCenter)
+        if (!Config.options.background.widgets.clock.digital.adaptiveAlignment || root.forceCenter) 
             return Text.AlignHCenter;
         if (root.x < root.scaledScreenWidth / 3)
             return Text.AlignLeft;
@@ -63,32 +63,9 @@ AbstractBackgroundWidget {
             anchors.horizontalCenter: parent.horizontalCenter
             shown: root.clockStyle === "digital" && (root.shouldShow)
             fade: false
-            sourceComponent: ColumnLayout {
-                id: clockColumn
-                spacing: 6
-
-                ClockText {
-                    font.pixelSize: 90
-                    text: DateTime.time
-                }
-                ClockText {
-                    Layout.topMargin: -5
-                    text: DateTime.longDate
-                }
-                StyledText {
-                    // Somehow gets fucked up if made a ClockText???
-                    visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0
-                    Layout.fillWidth: true
-                    horizontalAlignment: root.textHorizontalAlignment
-                    font {
-                        pixelSize: Appearance.font.pixelSize.normal
-                        weight: 350
-                    }
-                    color: root.colText
-                    style: Text.Raised
-                    styleColor: Appearance.colors.colShadow
-                    text: Config.options.background.widgets.clock.quote.text
-                }
+            sourceComponent: DigitalClock {
+                colText: root.colText
+                textHorizontalAlignment: root.textHorizontalAlignment
             }
         }
         StatusRow {
@@ -154,19 +131,6 @@ AbstractBackgroundWidget {
         }
     }
 
-    component ClockText: StyledText {
-        Layout.fillWidth: true
-        horizontalAlignment: root.textHorizontalAlignment
-        font {
-            family: Appearance.font.family.expressive
-            pixelSize: 20
-            weight: Font.DemiBold
-        }
-        color: root.colText
-        style: Text.Raised
-        styleColor: Appearance.colors.colShadow
-        animateChange: Config.options.background.widgets.clock.digital.animateChange
-    }
     component ClockStatusText: Row {
         id: statusTextRow
         property alias statusIcon: statusIconWidget.text
@@ -190,6 +154,7 @@ AbstractBackgroundWidget {
         ClockText {
             id: statusTextWidget
             color: statusTextRow.textColor
+            horizontalAlignment: root.textHorizontalAlignment
             anchors.verticalCenter: statusTextRow.verticalCenter
             font {
                 pixelSize: Appearance.font.pixelSize.large

dots/.config/quickshell/ii/modules/ii/background/widgets/clock/DigitalClock.qml

@@ -0,0 +1,69 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: clockColumn
+    spacing: 4
+
+    property bool isVertical: Config.options.background.widgets.clock.digital.vertical
+    property color colText: Appearance.colors.colOnSecondaryContainer
+    property var textHorizontalAlignment: Text.AlignHCenter
+
+    // Time
+    ClockText {
+        id: timeTextTop
+        text: clockColumn.isVertical ? DateTime.time.split(":")[0].padStart(2, "0") : DateTime.time
+        color: clockColumn.colText
+        horizontalAlignment: Text.AlignHCenter
+        font {
+            pixelSize: Config.options.background.widgets.clock.digital.font.size
+            weight: Config.options.background.widgets.clock.digital.font.weight
+            family: Config.options.background.widgets.clock.digital.font.family
+            variableAxes: ({
+                    "wdth": Config.options.background.widgets.clock.digital.font.width,
+                    "ROND": Config.options.background.widgets.clock.digital.font.roundness
+                })
+        }
+    }
+
+    Loader {
+        Layout.topMargin: -40
+        active: clockColumn.isVertical
+        visible: active
+        sourceComponent: ClockText {
+            id: timeTextBottom
+            text: DateTime.time.split(":")[1].split(" ")[0].padStart(2, "0")
+            color: clockColumn.colText
+            horizontalAlignment: Text.AlignHCenter
+            font {
+                pixelSize: timeTextTop.font.pixelSize
+                weight: timeTextTop.font.weight
+                family: timeTextTop.font.family
+                variableAxes: timeTextTop.font.variableAxes
+            }
+        }
+    }
+
+    // Date
+    ClockText {
+        visible: Config.options.background.widgets.clock.digital.showDate
+        Layout.topMargin: -20
+        text: DateTime.longDate
+        color: clockColumn.colText
+        horizontalAlignment: clockColumn.textHorizontalAlignment
+    }
+
+    // Quote
+    ClockText {
+        visible: Config.options.background.widgets.clock.quote.enable && Config.options.background.widgets.clock.quote.text.length > 0
+        font.pixelSize: Appearance.font.pixelSize.normal
+        text: Config.options.background.widgets.clock.quote.text
+        animateChange: false
+        color: clockColumn.colText
+        horizontalAlignment: clockColumn.textHorizontalAlignment
+    }
+}