feat(lock): add vertical clock style (#3220)

* feat(lock): add vertical clock style

* fix(lock): center single-digit vertical hours

quickshell/Common/SettingsData.qml

@@ -915,6 +915,7 @@ Singleton {
     property bool lockScreenShowPowerActions: true
     property bool lockScreenShowSystemIcons: true
     property bool lockScreenShowTime: true
+    property string lockScreenClockStyle: "horizontal"
     property bool lockScreenShowDate: true
     property bool lockScreenShowProfileImage: true
     property bool lockScreenShowPasswordField: true

quickshell/Common/settings/SettingsSpec.js

@@ -479,6 +479,7 @@ var SPEC = {
     lockScreenShowPowerActions: { def: true },
     lockScreenShowSystemIcons: { def: true },
     lockScreenShowTime: { def: true },
+    lockScreenClockStyle: { def: "horizontal" },
     lockScreenShowDate: { def: true },
     lockScreenShowProfileImage: { def: true },
     lockScreenShowPasswordField: { def: true },

quickshell/Modules/Lock/LockScreenContent.qml

@@ -369,7 +369,7 @@ Item {
             anchors.bottom: parent.verticalCenter
             anchors.bottomMargin: 60
             width: parent.width
-            height: clockText.implicitHeight
+            height: verticalClock.visible ? verticalClock.implicitHeight : clockText.implicitHeight
             visible: SettingsData.lockScreenShowTime
 
             Row {
@@ -377,6 +377,7 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 spacing: 0
+                visible: SettingsData.lockScreenClockStyle !== "vertical"
 
                 property string fullTimeStr: {
                     const format = SettingsData.getEffectiveTimeFormat();
@@ -445,6 +446,52 @@ Item {
                     visible: clockText.ampm !== ""
                 }
             }
+
+            Column {
+                id: verticalClock
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                spacing: -8
+                visible: SettingsData.lockScreenClockStyle === "vertical"
+
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 0
+
+                    ClockDigitText {
+                        width: clockText.hours.length > 1 ? 75 : 0
+                        text: clockText.hours.length > 1 ? clockText.hours[0] : ""
+                    }
+                    ClockDigitText {
+                        width: 75
+                        text: clockText.hours.length > 1 ? clockText.hours[1] : clockText.hours.length > 0 ? clockText.hours[0] : ""
+                    }
+                }
+
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 0
+
+                    ClockDigitText {
+                        width: 75
+                        text: clockText.minutes.length > 0 ? clockText.minutes[0] : ""
+                    }
+                    ClockDigitText {
+                        width: 75
+                        text: clockText.minutes.length > 1 ? clockText.minutes[1] : ""
+                    }
+                }
+
+                StyledText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: clockText.hasSeconds ? clockText.seconds + (clockText.ampm !== "" ? " " + clockText.ampm : "") : clockText.ampm
+                    font.pixelSize: 42
+                    font.weight: Font.Light
+                    font.family: root.lockFontFamily !== "" ? root.lockFontFamily : resolvedFontFamily
+                    color: "white"
+                    visible: clockText.hasSeconds || clockText.ampm !== ""
+                }
+            }
         }
 
         StyledText {

quickshell/Modules/Settings/LockScreenTab.qml

@@ -294,6 +294,20 @@ Item {
                     onToggled: checked => SettingsData.set("lockScreenShowTime", checked)
                 }
 
+                SettingsButtonGroupRow {
+                    settingKey: "lockScreenClockStyle"
+                    tags: ["lock", "screen", "time", "clock", "style", "vertical"]
+                    text: I18n.tr("Clock Style", "lock screen clock layout setting")
+                    visible: SettingsData.lockScreenShowTime
+                    model: [I18n.tr("Horizontal", "lock screen clock style option"), I18n.tr("Vertical", "lock screen clock style option")]
+                    currentIndex: SettingsData.lockScreenClockStyle === "vertical" ? 1 : 0
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected)
+                            return;
+                        SettingsData.set("lockScreenClockStyle", index === 1 ? "vertical" : "horizontal");
+                    }
+                }
+
                 SettingsToggleRow {
                     settingKey: "lockScreenShowDate"
                     tags: ["lock", "screen", "date", "calendar", "display"]

quickshell/translations/settings_search_index.json

@@ -5518,6 +5518,24 @@
     "icon": "lock",
     "description": "Bind lock screen to dbus signals from loginctl. Disable if using an external lock screen"
   },
+  {
+    "section": "lockScreenClockStyle",
+    "label": "Clock Style",
+    "tabIndex": 11,
+    "category": "Lock Screen",
+    "keywords": [
+      "clock",
+      "lock",
+      "login",
+      "password",
+      "screen",
+      "security",
+      "style",
+      "time",
+      "vertical",
+      "watch"
+    ]
+  },
   {
     "section": "lockDisplay",
     "label": "Display Assignment",