Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mestane wants to merge 3 commits into
base: main
Choose a base branch
from
+106 −28
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f89fd11
fix:(lock): add portrait layout support for vertical monitors
Mestane Jun 13, 2026
9e3125a
fix optimize
Mestane Jun 14, 2026
f178ed2
fix isPotrait and re-set row spacing
Mestane Jun 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion modules/lock/Center.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 real lockHeight

readonly property real centerScale: Math.min(1, root.lockHeight / 1440)
readonly property int centerWidth: Tokens.sizes.lock.centerWidth * centerScale

Layout.preferredWidth: centerWidth
Expand Down
112 changes: 89 additions & 23 deletions modules/lock/Content.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,61 @@ 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

WeatherInfo {
Layout.fillWidth: true
rootHeight: root.height / Tokens.sizes.lock.ratio
}

Resources {
Layout.fillWidth: true
}
}

Fetch {
Center {
Layout.alignment: Qt.AlignHCenter
lock: root.lock
lockHeight: root.lockHeight
}

RowLayout {
Layout.fillWidth: true
rootHeight: root.height

spacing: Tokens.spacing.largeIncreased

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 {
Expand All @@ -32,28 +68,58 @@ 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
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
}
}
}
}
Expand Down
18 changes: 14 additions & 4 deletions modules/lock/LockSurface.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ 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: (root.screen?.width ?? 0) < (root.screen?.height ?? 0)

contentItem.Config.screen: screen.name
contentItem.Tokens.screen: screen.name
Expand Down Expand Up @@ -143,12 +145,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 ? lockContent.lockShort : lockContent.lockLong
}
Anim {
target: lockContent
property: "implicitHeight"
to: (root.screen?.height ?? 0) * lockContent.Tokens.sizes.lock.heightMult
to: root.isPortrait ? lockContent.lockLong : lockContent.lockShort
}
}
}
Expand Down Expand Up @@ -177,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
Expand Down Expand Up @@ -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 ? lockContent.lockShort : lockContent.lockLong) - Tokens.padding.extraLargeIncreased
height: (root.isPortrait ? lockContent.lockLong : lockContent.lockShort) - Tokens.padding.extraLargeIncreased

lock: root
opacity: 0
Expand Down