lock/greeter: fixed clock widths

Modules/Greetd/GreetdSettings.qml

@@ -20,6 +20,7 @@ Singleton {
     property string customThemeFile: ""
     property string matugenScheme: "scheme-tonal-spot"
     property bool use24HourClock: true
+    property bool showSeconds: false
     property bool useFahrenheit: false
     property bool nightModeEnabled: false
     property string weatherLocation: "New York, NY"
@@ -54,6 +55,7 @@ Singleton {
                 customThemeFile = settings.customThemeFile !== undefined ? settings.customThemeFile : ""
                 matugenScheme = settings.matugenScheme !== undefined ? settings.matugenScheme : "scheme-tonal-spot"
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true
+                showSeconds = settings.showSeconds !== undefined ? settings.showSeconds : false
                 useFahrenheit = settings.useFahrenheit !== undefined ? settings.useFahrenheit : false
                 nightModeEnabled = settings.nightModeEnabled !== undefined ? settings.nightModeEnabled : false
                 weatherLocation = settings.weatherLocation !== undefined ? settings.weatherLocation : "New York, NY"

Modules/Greetd/GreeterContent.qml

@@ -196,40 +196,136 @@ Item {
         Item {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -100
-            width: 400
+            width: parent.width
             height: 140
 
-            StyledText {
+            Row {
                 id: clockText
-
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                text: {
+                spacing: 0
-                    const format = GreetdSettings.use24HourClock ? "HH:mm" : "h:mm AP"
+
+                property string fullTimeStr: {
+                    const format = GreetdSettings.use24HourClock
+                        ? (GreetdSettings.showSeconds ? "HH:mm:ss" : "HH:mm")
+                        : (GreetdSettings.showSeconds ? "h:mm:ss AP" : "h:mm AP")
                     return systemClock.date.toLocaleTimeString(Qt.locale(), format)
                 }
-                font.pixelSize: 120
+                property var timeParts: fullTimeStr.split(':')
-                font.weight: Font.Light
+                property string hours: timeParts[0] || ""
-                color: "white"
+                property string minutes: timeParts[1] || ""
-                lineHeight: 0.8
+                property string secondsWithAmPm: timeParts.length > 2 ? timeParts[2] : ""
-            }
+                property string seconds: secondsWithAmPm.replace(/\s*(AM|PM|am|pm)$/i, '')
-
+                property string ampm: {
-            StyledText {
+                    const match = fullTimeStr.match(/\s*(AM|PM|am|pm)$/i)
-                anchors.horizontalCenter: parent.horizontalCenter
+                    return match ? match[0].trim() : ""
-                anchors.top: clockText.bottom
+                }
-                anchors.topMargin: -20
+                property bool hasSeconds: timeParts.length > 2
-                text: {
+
-                    if (GreetdSettings.lockDateFormat && GreetdSettings.lockDateFormat.length > 0) {
+                StyledText {
-                        return systemClock.date.toLocaleDateString(Qt.locale(), GreetdSettings.lockDateFormat)
+                    width: 75
-                    }
+                    text: clockText.hours.length > 0 ? clockText.hours[0] : ""
-                    return systemClock.date.toLocaleDateString(Qt.locale(), Locale.LongFormat)
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hours.length > 1 ? clockText.hours[1] : (clockText.hours.length > 0 ? clockText.hours[0] : "")
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    text: ":"
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.minutes.length > 0 ? clockText.minutes[0] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.minutes.length > 1 ? clockText.minutes[1] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    text: clockText.hasSeconds ? ":" : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hasSeconds && clockText.seconds.length > 0 ? clockText.seconds[0] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hasSeconds && clockText.seconds.length > 1 ? clockText.seconds[1] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 20
+                    text: " "
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.ampm !== ""
+                }
+
+                StyledText {
+                    text: clockText.ampm
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.ampm !== ""
                 }
-                font.pixelSize: Theme.fontSizeXLarge
-                color: "white"
-                opacity: 0.9
             }
         }
 
+        StyledText {
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: -10
+            text: {
+                if (GreetdSettings.lockDateFormat && GreetdSettings.lockDateFormat.length > 0) {
+                    return systemClock.date.toLocaleDateString(Qt.locale(), GreetdSettings.lockDateFormat)
+                }
+                return systemClock.date.toLocaleDateString(Qt.locale(), Locale.LongFormat)
+            }
+            font.pixelSize: Theme.fontSizeXLarge
+            color: "white"
+            opacity: 0.9
+        }
+
         Item {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 80

Modules/Lock/LockScreenContent.qml

@@ -207,39 +207,134 @@ Item {
         Item {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -100
-            width: 400
+            width: parent.width
             height: 140
 
-            StyledText {
+            Row {
                 id: clockText
-
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
-                text: {
+                spacing: 0
-                    return systemClock.date.toLocaleTimeString(Qt.locale(), SettingsData.getEffectiveTimeFormat())
-                }
-                font.pixelSize: 120
-                font.weight: Font.Light
-                color: "white"
-                lineHeight: 0.8
-            }
 
-            StyledText {
+                property string fullTimeStr: {
-                anchors.horizontalCenter: parent.horizontalCenter
+                    const format = SettingsData.getEffectiveTimeFormat()
-                anchors.top: clockText.bottom
+                    return systemClock.date.toLocaleTimeString(Qt.locale(), format)
-                anchors.topMargin: -20
+                }
-                text: {
+                property var timeParts: fullTimeStr.split(':')
-                    if (SettingsData.lockDateFormat && SettingsData.lockDateFormat.length > 0) {
+                property string hours: timeParts[0] || ""
-                        return systemClock.date.toLocaleDateString(Qt.locale(), SettingsData.lockDateFormat)
+                property string minutes: timeParts[1] || ""
-                    }
+                property string secondsWithAmPm: timeParts.length > 2 ? timeParts[2] : ""
-                    return systemClock.date.toLocaleDateString(Qt.locale(), Locale.LongFormat)
+                property string seconds: secondsWithAmPm.replace(/\s*(AM|PM|am|pm)$/i, '')
+                property string ampm: {
+                    const match = fullTimeStr.match(/\s*(AM|PM|am|pm)$/i)
+                    return match ? match[0].trim() : ""
+                }
+                property bool hasSeconds: timeParts.length > 2
+
+                StyledText {
+                    width: 75
+                    text: clockText.hours.length > 0 ? clockText.hours[0] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hours.length > 1 ? clockText.hours[1] : (clockText.hours.length > 0 ? clockText.hours[0] : "")
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    text: ":"
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.minutes.length > 0 ? clockText.minutes[0] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.minutes.length > 1 ? clockText.minutes[1] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                StyledText {
+                    text: clockText.hasSeconds ? ":" : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hasSeconds && clockText.seconds.length > 0 ? clockText.seconds[0] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 75
+                    text: clockText.hasSeconds && clockText.seconds.length > 1 ? clockText.seconds[1] : ""
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    visible: clockText.hasSeconds
+                }
+
+                StyledText {
+                    width: 20
+                    text: " "
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.ampm !== ""
+                }
+
+                StyledText {
+                    text: clockText.ampm
+                    font.pixelSize: 120
+                    font.weight: Font.Light
+                    color: "white"
+                    visible: clockText.ampm !== ""
                 }
-                font.pixelSize: Theme.fontSizeXLarge
-                color: "white"
-                opacity: 0.9
             }
         }
 
+        StyledText {
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: -25
+            text: {
+                if (SettingsData.lockDateFormat && SettingsData.lockDateFormat.length > 0) {
+                    return systemClock.date.toLocaleDateString(Qt.locale(), SettingsData.lockDateFormat)
+                }
+                return systemClock.date.toLocaleDateString(Qt.locale(), Locale.LongFormat)
+            }
+            font.pixelSize: Theme.fontSizeXLarge
+            color: "white"
+            opacity: 0.9
+        }
+
         ColumnLayout {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 50