fix:(lock): add portrait layout support for vertical monitors

Author: Mestane

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

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
+                }
             }
         }
     }

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