From ba1c6fda43c44237a4fe5db092d6441eb85ef2dc Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Sun, 10 Aug 2025 17:17:51 +1000 Subject: lock: add content + better unlock anim --- config/LockConfig.qml | 3 +- modules/lock/Content.qml | 105 +++++++++++++++++++++++++++++++++++++++++++ modules/lock/Input.qml | 60 +++++++++---------------- modules/lock/LockSurface.qml | 55 +++++++++++++++++++---- 4 files changed, 172 insertions(+), 51 deletions(-) create mode 100644 modules/lock/Content.qml diff --git a/config/LockConfig.qml b/config/LockConfig.qml index c3474a3..0a62493 100644 --- a/config/LockConfig.qml +++ b/config/LockConfig.qml @@ -5,12 +5,11 @@ JsonObject { property Sizes sizes: Sizes {} component Sizes: JsonObject { - property int border: 100 property int clockWidth: 800 property int clockHeight: 200 property int inputWidth: 600 property int inputHeight: 200 - property int faceSize: 100 + property int faceSize: 200 property int weatherWidth: 400 property int weatherHeight: 100 property int mediaWidth: 600 diff --git a/modules/lock/Content.qml b/modules/lock/Content.qml new file mode 100644 index 0000000..15e1425 --- /dev/null +++ b/modules/lock/Content.qml @@ -0,0 +1,105 @@ +pragma ComponentBehavior: Bound + +import qs.components +import qs.components.images +import qs.services +import qs.config +import qs.utils +import QtQuick +import QtQuick.Layouts + +GridLayout { + id: root + + required property var lock + + anchors.fill: parent + anchors.margins: Appearance.padding.large + + rowSpacing: Appearance.spacing.large + columnSpacing: Appearance.spacing.large + + rows: 2 + columns: 3 + + StyledRect { + Layout.row: 0 + Layout.column: 0 + Layout.fillWidth: true + Layout.fillHeight: true + + radius: Appearance.rounding.small + color: Colours.tPalette.m3surfaceContainer + } + + StyledRect { + Layout.row: 1 + Layout.column: 0 + Layout.fillWidth: true + Layout.fillHeight: true + + radius: Appearance.rounding.small + color: Colours.tPalette.m3surfaceContainer + } + + StyledClippingRect { + Layout.row: 0 + Layout.column: 1 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + + implicitWidth: Config.lock.sizes.faceSize + implicitHeight: Config.lock.sizes.faceSize + + radius: Appearance.rounding.large + color: Colours.tPalette.m3surfaceContainer + + MaterialIcon { + anchors.centerIn: parent + + text: "person" + fill: 1 + grade: 200 + font.pointSize: Math.floor(Config.lock.sizes.faceSize / 2) + } + + CachingImage { + id: pfp + + anchors.fill: parent + path: `${Paths.stringify(Paths.home)}/.face` + } + } + + Input { + Layout.row: 1 + Layout.column: 1 + + lock: root.lock + } + + StyledRect { + Layout.row: 0 + Layout.column: 2 + Layout.fillWidth: true + Layout.fillHeight: true + + radius: Appearance.rounding.small + color: Colours.tPalette.m3surfaceContainer + } + + StyledRect { + Layout.row: 1 + Layout.column: 2 + Layout.fillWidth: true + Layout.fillHeight: true + + radius: Appearance.rounding.small + color: Colours.tPalette.m3surfaceContainer + } + + component Anim: NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } +} diff --git a/modules/lock/Input.qml b/modules/lock/Input.qml index b989bb9..1e164b8 100644 --- a/modules/lock/Input.qml +++ b/modules/lock/Input.qml @@ -12,60 +12,40 @@ import QtQuick.Layouts ColumnLayout { id: root - required property WlSessionLockSurface lock + required property var lock property string passwordBuffer + Layout.preferredWidth: Config.lock.sizes.faceSize * 2 + Layout.fillWidth: false spacing: Appearance.spacing.large * 2 - RowLayout { - Layout.alignment: Qt.AlignHCenter - Layout.topMargin: Appearance.padding.large * 3 - Layout.maximumWidth: Config.lock.sizes.inputWidth - Appearance.rounding.large * 2 - - spacing: Appearance.spacing.large - - StyledClippingRect { - Layout.alignment: Qt.AlignVCenter - implicitWidth: Config.lock.sizes.faceSize - implicitHeight: Config.lock.sizes.faceSize - - radius: Appearance.rounding.large - color: Colours.tPalette.m3surfaceContainer + StyledRect { + Layout.fillWidth: true + implicitHeight: user.implicitHeight + Appearance.padding.small * 2 - MaterialIcon { - anchors.centerIn: parent + color: Colours.tPalette.m3surfaceContainer + radius: Appearance.rounding.small - text: "person" - fill: 1 - grade: 200 - font.pointSize: Config.lock.sizes.faceSize / 2 - } + RowLayout { + id: user - CachingImage { - anchors.fill: parent - path: `${Paths.stringify(Paths.home)}/.face` - } - } + anchors.centerIn: parent - ColumnLayout { - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter - spacing: Appearance.spacing.small + spacing: Appearance.spacing.normal - StyledText { - Layout.fillWidth: true - text: qsTr("Welcome back, %1").arg(Quickshell.env("USER")) - font.pointSize: Appearance.font.size.extraLarge + MaterialIcon { + text: "account_circle" + font.pointSize: Appearance.font.size.large * 1.4 font.weight: 500 - elide: Text.ElideRight } StyledText { - Layout.fillWidth: true - text: qsTr("Logging in to %1").arg(Quickshell.env("XDG_CURRENT_DESKTOP") || Quickshell.env("XDG_SESSION_DESKTOP")) - color: Colours.palette.m3tertiary + // Layout.fillWidth: true + text: Quickshell.env("USER") font.pointSize: Appearance.font.size.large + // font.capitalization: Font.Capitalize + font.weight: 500 elide: Text.ElideRight } } @@ -121,7 +101,7 @@ ColumnLayout { onCompleted: res => { if (res === PamResult.Success) - return root.lock.unlock(); + return root.lock.lock.unlock(); if (res === PamResult.Error) placeholder.pamState = "error"; diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml index 7e3f593..3b6b86c 100644 --- a/modules/lock/LockSurface.qml +++ b/modules/lock/LockSurface.qml @@ -15,10 +15,6 @@ WlSessionLockSurface { property bool locked - function unlock(): void { - lock.unlocked = true; - } - Component.onCompleted: locked = true color: "transparent" @@ -40,8 +36,8 @@ WlSessionLockSurface { target: lockBg properties: "implicitWidth,implicitHeight" to: lockBg.size - duration: Appearance.anim.durations.expressiveFastSpatial - easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial + duration: Appearance.anim.durations.expressiveDefaultSpatial + easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial } Anim { target: lockBg @@ -49,9 +45,31 @@ WlSessionLockSurface { to: lockBg.size / 4 } Anim { - targets: [background, lockBg] + target: content + property: "opacity" + to: 0 + duration: Appearance.anim.durations.small + } + Anim { + target: lockIcon + property: "opacity" + to: 1 + } + Anim { + target: background property: "opacity" to: 0 + duration: Appearance.anim.durations.large + } + SequentialAnimation { + PauseAnimation { + duration: Appearance.anim.durations.small + } + Anim { + target: lockBg + property: "opacity" + to: 0 + } } } PropertyAction { @@ -82,7 +100,7 @@ WlSessionLockSurface { Anim { target: lockBg property: "rotation" - to: 180 + to: 360 duration: Appearance.anim.durations.expressiveFastSpatial easing.bezierCurve: Appearance.anim.curves.standardAccel } @@ -91,9 +109,19 @@ WlSessionLockSurface { Anim { target: lockIcon property: "rotation" - to: 180 + to: 360 easing.bezierCurve: Appearance.anim.curves.standardDecel } + Anim { + target: lockIcon + property: "opacity" + to: 0 + } + Anim { + target: content + property: "opacity" + to: 1 + } Anim { target: lockBg property: "radius" @@ -147,6 +175,7 @@ WlSessionLockSurface { color: Colours.tPalette.m3surface radius: size / 4 + rotation: 180 scale: 0 Elevation { @@ -164,6 +193,14 @@ WlSessionLockSurface { text: "lock" font.pointSize: Appearance.font.size.extraLarge * 4 font.bold: true + rotation: 180 + } + + Content { + id: content + + lock: root + opacity: 0 } } -- cgit v1.2.3-freya