digital clock: several improvements

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

@@ -186,7 +186,12 @@ 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 real weight: 350
+                            property real size: 90
                         }
                         property JsonObject quote: JsonObject {
                             property bool enable: false

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

@@ -0,0 +1,42 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    property string text: ""
+    property string buttonIcon: ""
+    property alias value: slider.value
+    property bool usePercentTooltip: true
+    property real from: slider.from
+    property real to: slider.to
+    
+    RowLayout {
+        spacing: 10
+        OptionalMaterialSymbol {
+            id: iconWidget
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
+        StyledText {
+            id: labelWidget
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    
+    StyledSlider {
+        id: slider
+        Layout.fillWidth: true
+        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/common/widgets/StyledText.qml

@@ -16,7 +16,7 @@ Text {
         hintingPreference: Font.PreferDefaultHinting
         family: defaultFont
         pixelSize: Appearance?.font.pixelSize.small ?? 15
-        variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main
+        //variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main
     }
     color: Appearance?.m3colors.m3onBackground ?? "black"
     linkColor: Appearance?.m3colors.m3primary

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

@@ -0,0 +1,18 @@
+import qs.modules.common
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Layouts
+
+StyledText {
+    Layout.fillWidth: true
+    horizontalAlignment: root.textHorizontalAlignment
+    font {
+        family: Appearance.font.family.expressive
+        pixelSize: 20
+        weight: 350
+    }
+    color: root.colText
+    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,33 +63,7 @@ AbstractBackgroundWidget {
             anchors.horizontalCenter: parent.horizontalCenter
             shown: root.clockStyle === "digital" && (root.shouldShow)
             fade: false
-            sourceComponent: ColumnLayout {
+            sourceComponent: DigitalClock {}
-                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
-                }
-            }
         }
         StatusRow {
             anchors.horizontalCenter: parent.horizontalCenter
@@ -154,19 +128,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

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

@@ -0,0 +1,74 @@
+pragma ComponentBehavior: Bound
+
+//TODO: fix imports to only what is necessary
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell.Io
+
+ColumnLayout {
+    id: clockColumn
+    spacing: 6
+
+    property bool isVertical: Config.options.background.widgets.clock.digital.vertical
+
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: timeTextTop.font.pixelSize + (clockColumn.isVertical ? timeTextBottom.font.pixelSize + 10 : 0)
+        implicitWidth: Math.max(timeTextTop.paintedWidth, timeTextBottom.paintedWidth)
+
+        ClockText {
+            id: timeTextTop
+            text: clockColumn.isVertical ? DateTime.time.substring(0, 2) : DateTime.time
+            anchors {
+                top: parent.top
+                horizontalCenter: parent.horizontalCenter
+            }
+            font {
+                pixelSize: Config.options.background.widgets.clock.digital.size
+                weight: Config.options.background.widgets.clock.digital.weight
+            }
+        }
+        ClockText {
+            id: timeTextBottom
+            text: clockColumn.isVertical ? DateTime.time.substring(3, 5) : ""
+            visible: clockColumn.isVertical
+
+            anchors {
+                bottom: parent.bottom
+                horizontalCenter: parent.horizontalCenter
+            }
+            font {
+                pixelSize: Config.options.background.widgets.clock.digital.size
+                weight: Config.options.background.widgets.clock.digital.weight
+            }
+        }
+    }
+    
+    ClockText {
+        visible: Config.options.background.widgets.clock.digital.showDate
+        Layout.topMargin: clockColumn.isVertical ? -10 : 0
+        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
+    }
+}
+
+
+    

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

@@ -120,48 +120,52 @@ 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"
+                        }
+                    ]
+                }
             }
         }
 
@@ -169,12 +173,66 @@ ContentPage {
             visible: settingsClock.digitalPresent
             title: Translation.tr("Digital clock settings")
 
-            ConfigSwitch {
+            ConfigRow {
-                buttonIcon: "animation"
+                ConfigSwitch {
-                text: Translation.tr("Animate time change")
+                    buttonIcon: "vertical_distribute"
-                checked: Config.options.background.widgets.clock.digital.animateChange
+                    text: Translation.tr("Vertical")
-                onCheckedChanged: {
+                    checked: Config.options.background.widgets.clock.digital.vertical
-                    Config.options.background.widgets.clock.digital.animateChange = checked;
+                    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 {
+                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.")
+                    }
+                }
+            }
+            ConfigSlider {
+                text: Translation.tr("Font weight")
+                value: Config.options.background.widgets.clock.digital.weight
+                usePercentTooltip: false
+                buttonIcon: "format_bold"
+                from: 1
+                to: 1000
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.weight = value;
+                }
+            }
+            ConfigSlider {
+                text: Translation.tr("Font Size")
+                value: Config.options.background.widgets.clock.digital.size
+                usePercentTooltip: false
+                buttonIcon: "format_size"
+                from: 70
+                to: 150
+                onValueChanged: {
+                    Config.options.background.widgets.clock.digital.size = value;
                 }
             }
         }