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

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

@@ -186,7 +186,17 @@ Singleton {
                             property bool useSineCookie: false
                         }
                         property JsonObject digital: JsonObject {
+                            property bool adaptiveAlignment: true
+                            property bool showDate: true
                             property bool animateChange: true
+                            property bool vertical: false
+                            property JsonObject font: JsonObject {
+                                property string family: "Google Sans Flex"
+                                property real weight: 350
+                                property real width: 100
+                                property real size: 90
+                                property real roundness: 0
+                            }
                         }
                         property JsonObject quote: JsonObject {
                             property bool enable: false

dots/.config/quickshell/ii/modules/common/widgets/ConfigSlider.qml

@@ -0,0 +1,47 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+
+RowLayout {
+    id: root
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    property string text: ""
+    property string buttonIcon: ""
+    property alias value: slider.value
+    property alias stopIndicatorValues: slider.stopIndicatorValues
+    property bool usePercentTooltip: true
+    property real from: slider.from
+    property real to: slider.to
+    property real textWidth: 120
+
+    RowLayout {
+        id: row
+        spacing: 10
+
+        OptionalMaterialSymbol {
+            id: iconWidget
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
+        StyledText {
+            id: labelWidget
+            Layout.preferredWidth: root.textWidth
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    
+    StyledSlider {
+        id: slider
+        configuration: StyledSlider.Configuration.XS
+        usePercentTooltip: root.usePercentTooltip
+        value: root.value
+        from: root.from
+        to: root.to
+    }
+}

dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml

@@ -46,7 +46,8 @@ Slider {
     property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
     property real handleMargins: 4
     property real trackDotSize: 3
-    property string tooltipContent: `${Math.round(value * 100)}%`
+    property bool usePercentTooltip: true
+    property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}`
     property bool wavy: configuration === StyledSlider.Configuration.Wavy // If true, the progress bar will have a wavy fill effect
     property bool animateWave: true
     property real waveAmplitudeMultiplier: wavy ? 0.5 : 0

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 {
+            sourceComponent: DigitalClock {
-                id: clockColumn
+                colText: root.colText
-                spacing: 6
+                textHorizontalAlignment: root.textHorizontalAlignment
-
-                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
-                }
             }
         }
         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
+    }
+}

dots/.config/quickshell/ii/modules/settings/BackgroundConfig.qml

@@ -53,9 +53,9 @@ ContentPage {
     }
 
     ContentSection {
+        id: settingsClock
         icon: "clock_loader_40"
         title: Translation.tr("Widget: Clock")
-        id: settingsClock
 
         function stylePresent(styleName) {
             if (!Config.options.background.widgets.clock.showOnlyWhenLocked && Config.options.background.widgets.clock.style === styleName) {
@@ -120,61 +120,161 @@ ContentPage {
             }
         }
 
-        ContentSubsection {
+        ConfigRow {
-            visible: !Config.options.background.widgets.clock.showOnlyWhenLocked
+            ContentSubsection {
-            title: Translation.tr("Clock style")
+                visible: !Config.options.background.widgets.clock.showOnlyWhenLocked
-            ConfigSelectionArray {
+                title: Translation.tr("Clock style")
-                currentValue: Config.options.background.widgets.clock.style
+                Layout.fillWidth: true
-                onSelected: newValue => {
+                ConfigSelectionArray {
-                    Config.options.background.widgets.clock.style = newValue;
+                    currentValue: Config.options.background.widgets.clock.style
-                }
+                    onSelected: newValue => {
-                options: [
+                        Config.options.background.widgets.clock.style = newValue;
-                    {
-                        displayName: Translation.tr("Digital"),
-                        icon: "timer_10",
-                        value: "digital"
-                    },
-                    {
-                        displayName: Translation.tr("Cookie"),
-                        icon: "cookie",
-                        value: "cookie"
                     }
-                ]
+                    options: [
+                        {
+                            displayName: Translation.tr("Digital"),
+                            icon: "timer_10",
+                            value: "digital"
+                        },
+                        {
+                            displayName: Translation.tr("Cookie"),
+                            icon: "cookie",
+                            value: "cookie"
+                        }
+                    ]
+                }
             }
-        }
 
-        ContentSubsection {
+            ContentSubsection {
-            title: Translation.tr("Clock style (locked)")
+                title: Translation.tr("Clock style (locked)")
-            ConfigSelectionArray {
+                Layout.fillWidth: false
-                currentValue: Config.options.background.widgets.clock.styleLocked
+                ConfigSelectionArray {
-                onSelected: newValue => {
+                    currentValue: Config.options.background.widgets.clock.styleLocked
-                    Config.options.background.widgets.clock.styleLocked = newValue;
+                    onSelected: newValue => {
-                }
+                        Config.options.background.widgets.clock.styleLocked = newValue;
-                options: [
-                    {
-                        displayName: Translation.tr("Digital"),
-                        icon: "timer_10",
-                        value: "digital"
-                    },
-                    {
-                        displayName: Translation.tr("Cookie"),
-                        icon: "cookie",
-                        value: "cookie"
                     }
-                ]
+                    options: [
+                        {
+                            displayName: Translation.tr("Digital"),
+                            icon: "timer_10",
+                            value: "digital"
+                        },
+                        {
+                            displayName: Translation.tr("Cookie"),
+                            icon: "cookie",
+                            value: "cookie"
+                        }
+                    ]
+                }
             }
         }
 
         ContentSubsection {
             visible: settingsClock.digitalPresent
             title: Translation.tr("Digital clock settings")
+            tooltip: Translation.tr("Font width and roundness settings are only available for some fonts like Google Sans Flex")
 
-            ConfigSwitch {
+            ConfigRow {
-                buttonIcon: "animation"
+                uniform: true
-                text: Translation.tr("Animate time change")
+                ConfigSwitch {
-                checked: Config.options.background.widgets.clock.digital.animateChange
+                    buttonIcon: "vertical_distribute"
-                onCheckedChanged: {
+                    text: Translation.tr("Vertical")
-                    Config.options.background.widgets.clock.digital.animateChange = checked;
+                    checked: Config.options.background.widgets.clock.digital.vertical
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.vertical = checked;
+                    }
+                }
+                ConfigSwitch {
+                    buttonIcon: "animation"
+                    text: Translation.tr("Animate time change")
+                    checked: Config.options.background.widgets.clock.digital.animateChange
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.animateChange = checked;
+                    }
+                }
+            }
+
+            ConfigRow {
+                uniform: true
+
+                ConfigSwitch {
+                    buttonIcon: "date_range"
+                    text: Translation.tr("Show date")
+                    checked: Config.options.background.widgets.clock.digital.showDate
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.showDate = checked;
+                    }
+                }
+                ConfigSwitch {
+                    buttonIcon: "activity_zone"
+                    text: Translation.tr("Use adaptive alignment")
+                    checked: Config.options.background.widgets.clock.digital.adaptiveAlignment
+                    onCheckedChanged: {
+                        Config.options.background.widgets.clock.digital.adaptiveAlignment = checked;
+                    }
+                    StyledToolTip {
+                        text: Translation.tr("Aligns the date and quote to left, center or right depending on its position on the screen.")
+                    }
+                }
+            }
+
+            MaterialTextArea {
+                Layout.fillWidth: true
+                placeholderText: Translation.tr("Font family")
+                text: Config.options.background.widgets.clock.digital.font.family
+                wrapMode: TextEdit.Wrap
+                onTextChanged: {
+                    Config.options.background.widgets.clock.digital.font.family = text;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font weight")
+                value: Config.options.background.widgets.clock.digital.font.weight
+                usePercentTooltip: false
+                buttonIcon: "format_bold"
+                from: 1
+                to: 1000
+                stopIndicatorValues: [350]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.weight = value;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font size")
+                value: Config.options.background.widgets.clock.digital.font.size
+                usePercentTooltip: false
+                buttonIcon: "format_size"
+                from: 70
+                to: 150
+                stopIndicatorValues: [90]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.size = value;
+                }
+            }
+
+            ConfigSlider {
+                text: Translation.tr("Font width")
+                value: Config.options.background.widgets.clock.digital.font.width
+                usePercentTooltip: false
+                buttonIcon: "fit_width"
+                from: 25
+                to: 125
+                stopIndicatorValues: [100]
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.width = value;
+                }
+            }
+            ConfigSlider {
+                text: Translation.tr("Font roundness")
+                value: Config.options.background.widgets.clock.digital.font.roundness
+                usePercentTooltip: false
+                buttonIcon: "line_curve"
+                from: 0
+                to: 100
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.font.roundness = value;
                 }
             }
         }