From f89fd11ce79a6d528c4886446f501552b7879c65 Mon Sep 17 00:00:00 2001 From: Mestane <67807483+Mestane@users.noreply.github.com> Date: Sat, 13 Jun 2026 19:34:42 +0300 Subject: [PATCH 1/3] fix:(lock): add portrait layout support for vertical monitors --- modules/lock/Center.qml | 4 +- modules/lock/Content.qml | 114 ++++++++++++++++++++++++++++------- modules/lock/LockSurface.qml | 18 ++++-- 3 files changed, 108 insertions(+), 28 deletions(-) diff --git a/modules/lock/Center.qml b/modules/lock/Center.qml index bfd747de2..de82daa46 100644 --- a/modules/lock/Center.qml +++ b/modules/lock/Center.qml @@ -9,7 +9,9 @@ ColumnLayout { id: root required property var lock - readonly property real centerScale: Math.min(1, (lock.screen?.height ?? 1440) / 1440) + required property bool isPortrait + required property real lockHeight + readonly property real centerScale: isPortrait ? Math.min(1, lockHeight / 1440) : Math.min(1, (lock.screen?.height ?? 1440) / 1440) readonly property int centerWidth: Tokens.sizes.lock.centerWidth * centerScale Layout.preferredWidth: centerWidth diff --git a/modules/lock/Content.qml b/modules/lock/Content.qml index 0d47502ae..51c7bc432 100644 --- a/modules/lock/Content.qml +++ b/modules/lock/Content.qml @@ -4,25 +4,62 @@ import Caelestia.Config import qs.components import qs.services -RowLayout { +Item { id: root required property var lock + required property bool isPortrait + required property real lockHeight - spacing: Tokens.spacing.largeIncreased * 2 - + // Portrait layout ColumnLayout { - Layout.fillWidth: true + anchors.fill: parent + visible: root.isPortrait spacing: Tokens.spacing.medium - WeatherInfo { + RowLayout { Layout.fillWidth: true - rootHeight: root.height + spacing: Tokens.spacing.largeIncreased * 2 + + WeatherInfo { + Layout.fillWidth: true + rootHeight: root.height / Tokens.sizes.lock.ratio + } + + Resources { + Layout.fillWidth: true + } } - Fetch { + Center { + Layout.alignment: Qt.AlignHCenter + lock: root.lock + isPortrait: root.isPortrait + lockHeight: root.lockHeight + } + + RowLayout { Layout.fillWidth: true - rootHeight: root.height + + spacing: Tokens.spacing.largeIncreased * 2 + + Fetch { + Layout.fillWidth: true + rootHeight: root.height + } + + StyledRect { + Layout.fillWidth: true + Layout.fillHeight: true + + bottomRightRadius: Tokens.rounding.extraLarge + radius: Tokens.rounding.medium + color: Colours.tPalette.m3surfaceContainer + + NotifDock { + lock: root.lock + } + } } Media { @@ -32,28 +69,59 @@ RowLayout { } } - Center { - lock: root.lock - } + // Landscape layout + RowLayout { + anchors.fill: parent + visible: !root.isPortrait + spacing: Tokens.spacing.largeIncreased * 2 - ColumnLayout { - Layout.fillWidth: true - spacing: Tokens.spacing.medium - - Resources { + ColumnLayout { Layout.fillWidth: true + spacing: Tokens.spacing.medium + + WeatherInfo { + Layout.fillWidth: true + rootHeight: root.height + } + + Fetch { + Layout.fillWidth: true + rootHeight: root.height + } + + Media { + Layout.fillWidth: true + Layout.fillHeight: true + + lock: root.lock + } } - StyledRect { + Center { + lock: root.lock + isPortrait: root.isPortrait + lockHeight: root.lockHeight + } + + ColumnLayout { Layout.fillWidth: true - Layout.fillHeight: true + spacing: Tokens.spacing.medium - bottomRightRadius: Tokens.rounding.extraLarge - radius: Tokens.rounding.medium - color: Colours.tPalette.m3surfaceContainer + Resources { + Layout.fillWidth: true + } - NotifDock { - lock: root.lock + StyledRect { + Layout.fillWidth: true + Layout.fillHeight: true + + bottomRightRadius: Tokens.rounding.extraLarge + radius: Tokens.rounding.medium + color: Colours.tPalette.m3surfaceContainer + + NotifDock { + lock: root.lock + } } } } diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml index 2c97248d6..fffd95ba2 100644 --- a/modules/lock/LockSurface.qml +++ b/modules/lock/LockSurface.qml @@ -14,6 +14,13 @@ WlSessionLockSurface { required property Pam pam readonly property alias unlocking: unlockAnim.running + readonly property real lockHeight: Math.min(root.screen?.width ?? 0, root.screen?.height ?? 0) + + readonly property bool isPortrait: { + const monitor = Hypr.monitors.values.find(m => m.name === root.screen?.name); + const transform = monitor?.lastIpcObject?.transform ?? 0; + return transform === 1 || transform === 3 || transform === 5 || transform === 7; + } contentItem.Config.screen: screen.name contentItem.Tokens.screen: screen.name @@ -143,12 +150,12 @@ WlSessionLockSurface { Anim { target: lockContent property: "implicitWidth" - to: (root.screen?.height ?? 0) * lockContent.Tokens.sizes.lock.heightMult * lockContent.Tokens.sizes.lock.ratio + to: root.isPortrait ? root.lockHeight * lockContent.Tokens.sizes.lock.heightMult : root.lockHeight * lockContent.Tokens.sizes.lock.heightMult * lockContent.Tokens.sizes.lock.ratio } Anim { target: lockContent property: "implicitHeight" - to: (root.screen?.height ?? 0) * lockContent.Tokens.sizes.lock.heightMult + to: root.isPortrait ? root.lockHeight * lockContent.Tokens.sizes.lock.heightMult * lockContent.Tokens.sizes.lock.ratio : root.lockHeight * lockContent.Tokens.sizes.lock.heightMult } } } @@ -212,9 +219,12 @@ WlSessionLockSurface { Content { id: content + isPortrait: root.isPortrait + lockHeight: root.lockHeight + anchors.centerIn: parent - width: (root.screen?.height ?? 0) * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio - Tokens.padding.extraLargeIncreased - height: (root.screen?.height ?? 0) * Tokens.sizes.lock.heightMult - Tokens.padding.extraLargeIncreased + width: root.isPortrait ? root.lockHeight * Tokens.sizes.lock.heightMult - Tokens.padding.extraLargeIncreased : root.lockHeight * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio - Tokens.padding.extraLargeIncreased + height: root.isPortrait ? root.lockHeight * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio - Tokens.padding.extraLargeIncreased : root.lockHeight * Tokens.sizes.lock.heightMult - Tokens.padding.extraLargeIncreased lock: root opacity: 0 From 9e3125aba29ba55ddddaf432ff68a00248be3e96 Mon Sep 17 00:00:00 2001 From: Mestane <67807483+Mestane@users.noreply.github.com> Date: Sun, 14 Jun 2026 04:27:19 +0300 Subject: [PATCH 2/3] fix optimize --- modules/lock/Center.qml | 3 ++- modules/lock/LockSurface.qml | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/modules/lock/Center.qml b/modules/lock/Center.qml index de82daa46..b2aca095c 100644 --- a/modules/lock/Center.qml +++ b/modules/lock/Center.qml @@ -11,7 +11,8 @@ ColumnLayout { required property var lock required property bool isPortrait required property real lockHeight - readonly property real centerScale: isPortrait ? Math.min(1, lockHeight / 1440) : Math.min(1, (lock.screen?.height ?? 1440) / 1440) + + readonly property real centerScale: Math.min(1, root.lockHeight / 1440) readonly property int centerWidth: Tokens.sizes.lock.centerWidth * centerScale Layout.preferredWidth: centerWidth diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml index fffd95ba2..05b3c903f 100644 --- a/modules/lock/LockSurface.qml +++ b/modules/lock/LockSurface.qml @@ -15,12 +15,7 @@ WlSessionLockSurface { readonly property alias unlocking: unlockAnim.running readonly property real lockHeight: Math.min(root.screen?.width ?? 0, root.screen?.height ?? 0) - - readonly property bool isPortrait: { - const monitor = Hypr.monitors.values.find(m => m.name === root.screen?.name); - const transform = monitor?.lastIpcObject?.transform ?? 0; - return transform === 1 || transform === 3 || transform === 5 || transform === 7; - } + readonly property bool isPortrait: (root.screen?.width ?? 0) < (root.screen?.height ?? 0) contentItem.Config.screen: screen.name contentItem.Tokens.screen: screen.name @@ -150,12 +145,12 @@ WlSessionLockSurface { Anim { target: lockContent property: "implicitWidth" - to: root.isPortrait ? root.lockHeight * lockContent.Tokens.sizes.lock.heightMult : root.lockHeight * lockContent.Tokens.sizes.lock.heightMult * lockContent.Tokens.sizes.lock.ratio + to: root.isPortrait ? lockContent.lockShort : lockContent.lockLong } Anim { target: lockContent property: "implicitHeight" - to: root.isPortrait ? root.lockHeight * lockContent.Tokens.sizes.lock.heightMult * lockContent.Tokens.sizes.lock.ratio : root.lockHeight * lockContent.Tokens.sizes.lock.heightMult + to: root.isPortrait ? lockContent.lockLong : lockContent.lockShort } } } @@ -184,6 +179,11 @@ WlSessionLockSurface { readonly property int size: lockIcon.implicitHeight + Tokens.padding.large * 4 readonly property int radius: size / 4 * Tokens.rounding.scale + // Long/short axis of the lock surface relative to the monitor's short edge. + // Portrait swaps which axis maps to width/height. + readonly property real lockLong: root.lockHeight * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio + readonly property real lockShort: root.lockHeight * Tokens.sizes.lock.heightMult + anchors.centerIn: parent implicitWidth: size implicitHeight: size @@ -223,8 +223,8 @@ WlSessionLockSurface { lockHeight: root.lockHeight anchors.centerIn: parent - width: root.isPortrait ? root.lockHeight * Tokens.sizes.lock.heightMult - Tokens.padding.extraLargeIncreased : root.lockHeight * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio - Tokens.padding.extraLargeIncreased - height: root.isPortrait ? root.lockHeight * Tokens.sizes.lock.heightMult * Tokens.sizes.lock.ratio - Tokens.padding.extraLargeIncreased : root.lockHeight * Tokens.sizes.lock.heightMult - Tokens.padding.extraLargeIncreased + width: (root.isPortrait ? lockContent.lockShort : lockContent.lockLong) - Tokens.padding.extraLargeIncreased + height: (root.isPortrait ? lockContent.lockLong : lockContent.lockShort) - Tokens.padding.extraLargeIncreased lock: root opacity: 0 From f178ed256c013531757086e28adf9ac2cffe78f2 Mon Sep 17 00:00:00 2001 From: Mestane <67807483+Mestane@users.noreply.github.com> Date: Sun, 14 Jun 2026 06:52:12 +0300 Subject: [PATCH 3/3] fix isPotrait and re-set row spacing --- modules/lock/Center.qml | 1 - modules/lock/Content.qml | 6 ++---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/modules/lock/Center.qml b/modules/lock/Center.qml index b2aca095c..c443a8d9f 100644 --- a/modules/lock/Center.qml +++ b/modules/lock/Center.qml @@ -9,7 +9,6 @@ ColumnLayout { id: root required property var lock - required property bool isPortrait required property real lockHeight readonly property real centerScale: Math.min(1, root.lockHeight / 1440) diff --git a/modules/lock/Content.qml b/modules/lock/Content.qml index 51c7bc432..9850a7edb 100644 --- a/modules/lock/Content.qml +++ b/modules/lock/Content.qml @@ -19,7 +19,7 @@ Item { RowLayout { Layout.fillWidth: true - spacing: Tokens.spacing.largeIncreased * 2 + spacing: Tokens.spacing.largeIncreased WeatherInfo { Layout.fillWidth: true @@ -34,14 +34,13 @@ Item { Center { Layout.alignment: Qt.AlignHCenter lock: root.lock - isPortrait: root.isPortrait lockHeight: root.lockHeight } RowLayout { Layout.fillWidth: true - spacing: Tokens.spacing.largeIncreased * 2 + spacing: Tokens.spacing.largeIncreased Fetch { Layout.fillWidth: true @@ -99,7 +98,6 @@ Item { Center { lock: root.lock - isPortrait: root.isPortrait lockHeight: root.lockHeight }