lock: add content + better unlock anim

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

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

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 {
+    StyledRect {
-        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
-        Layout.topMargin: Appearance.padding.large * 3
+        implicitHeight: user.implicitHeight + Appearance.padding.small * 2
-        Layout.maximumWidth: Config.lock.sizes.inputWidth - Appearance.rounding.large * 2
 
-        spacing: Appearance.spacing.large
+        color: Colours.tPalette.m3surfaceContainer
+        radius: Appearance.rounding.small
 
-        StyledClippingRect {
+        RowLayout {
-            Layout.alignment: Qt.AlignVCenter
+            id: user
-            implicitWidth: Config.lock.sizes.faceSize
-            implicitHeight: Config.lock.sizes.faceSize
 
-            radius: Appearance.rounding.large
+            anchors.centerIn: parent
-            color: Colours.tPalette.m3surfaceContainer
+
+            spacing: Appearance.spacing.normal
 
             MaterialIcon {
-                anchors.centerIn: parent
+                text: "account_circle"
-
+                font.pointSize: Appearance.font.size.large * 1.4
-                text: "person"
-                fill: 1
-                grade: 200
-                font.pointSize: Config.lock.sizes.faceSize / 2
-            }
-
-            CachingImage {
-                anchors.fill: parent
-                path: `${Paths.stringify(Paths.home)}/.face`
-            }
-        }
-
-        ColumnLayout {
-            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignVCenter
-            spacing: Appearance.spacing.small
-
-            StyledText {
-                Layout.fillWidth: true
-                text: qsTr("Welcome back, %1").arg(Quickshell.env("USER"))
-                font.pointSize: Appearance.font.size.extraLarge
                 font.weight: 500
-                elide: Text.ElideRight
             }
 
             StyledText {
-                Layout.fillWidth: true
+                // Layout.fillWidth: true
-                text: qsTr("Logging in to %1").arg(Quickshell.env("XDG_CURRENT_DESKTOP") || Quickshell.env("XDG_SESSION_DESKTOP"))
+                text: Quickshell.env("USER")
-                color: Colours.palette.m3tertiary
                 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";

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
+                duration: Appearance.anim.durations.expressiveDefaultSpatial
-                easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+                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
         }
     }