From 754040ca42925470f7db83464600915ac548332d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=E1=BB=B3nh=20Thi=E1=BB=87n=20L=E1=BB=99c?= Date: Sat, 29 Aug 2026 23:28:32 +0700 Subject: [PATCH] feat(lock): add vertical clock style (#3220) * feat(lock): add vertical clock style * fix(lock): center single-digit vertical hours --- quickshell/Common/SettingsData.qml | 1 + quickshell/Common/settings/SettingsSpec.js | 1 + quickshell/Modules/Lock/LockScreenContent.qml | 49 ++++++++++++++++++- quickshell/Modules/Settings/LockScreenTab.qml | 14 ++++++ .../translations/settings_search_index.json | 18 +++++++ 5 files changed, 82 insertions(+), 1 deletion(-) diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml index f8bc4ffbe..907c12bec 100644 --- a/quickshell/Common/SettingsData.qml +++ b/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 diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js index 3b36f2df0..6007a62bd 100644 --- a/quickshell/Common/settings/SettingsSpec.js +++ b/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 }, diff --git a/quickshell/Modules/Lock/LockScreenContent.qml b/quickshell/Modules/Lock/LockScreenContent.qml index bed015918..94a9959f4 100644 --- a/quickshell/Modules/Lock/LockScreenContent.qml +++ b/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 { diff --git a/quickshell/Modules/Settings/LockScreenTab.qml b/quickshell/Modules/Settings/LockScreenTab.qml index 842edb4a5..b92143e0d 100644 --- a/quickshell/Modules/Settings/LockScreenTab.qml +++ b/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"] diff --git a/quickshell/translations/settings_search_index.json b/quickshell/translations/settings_search_index.json index 8cef84ee3..7636c51c1 100644 --- a/quickshell/translations/settings_search_index.json +++ b/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",