lock: better lock anim

4 files changed, 26 insertions, 21 deletions

diff --git a/modules/lock/Center.qml b/modules/lock/Center.qml
index e3bf147..4d32bfd 100644
--- a/modules/lock/Center.qml
+++ b/modules/lock/Center.qml
@@ -5,7 +5,6 @@ import qs.components.images
 import qs.services
 import qs.config
 import qs.utils
-import Quickshell
 import QtQuick
 import QtQuick.Layouts
 
@@ -15,9 +14,8 @@ ColumnLayout {
     required property var lock
     readonly property list<string> timeComponents: Time.format(Config.services.useTwelveHourClock ? "hh:mm:A" : "hh:mm").split(":")
 
-    Layout.fillWidth: true
+    Layout.preferredWidth: Config.lock.sizes.centerWidth
     Layout.fillHeight: true
-    Layout.minimumWidth: Config.lock.sizes.centerWidth
 
     spacing: Appearance.spacing.large * 2
 
diff --git a/modules/lock/Content.qml b/modules/lock/Content.qml
index 43cf871..102d8cf 100644
--- a/modules/lock/Content.qml
+++ b/modules/lock/Content.qml
@@ -8,6 +8,7 @@ RowLayout {
     id: root
 
     required property var lock
+    property real centerScale
 
     anchors.fill: parent
     anchors.margins: Appearance.padding.large
@@ -24,6 +25,8 @@ RowLayout {
 
             radius: Appearance.rounding.small
             color: Colours.tPalette.m3surfaceContainer
+
+            // WeatherInfo {}
         }
 
         StyledRect {
@@ -36,6 +39,9 @@ RowLayout {
     }
 
     Center {
+        Layout.leftMargin: -(1 - scale) * implicitWidth / 2
+        Layout.rightMargin: -(1 - scale) * implicitWidth / 2
+        scale: root.centerScale
         lock: root.lock
     }
 
diff --git a/modules/lock/LockSurface.qml b/modules/lock/LockSurface.qml
index 8dec866..ef07f39 100644
--- a/modules/lock/LockSurface.qml
+++ b/modules/lock/LockSurface.qml
@@ -124,6 +124,13 @@ WlSessionLockSurface {
                     to: 1
                 }
                 Anim {
+                    target: content
+                    property: "centerScale"
+                    to: 1
+                    duration: Appearance.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                }
+                Anim {
                     target: lockBg
                     property: "radius"
                     to: Appearance.rounding.large
@@ -131,14 +138,14 @@ WlSessionLockSurface {
                 Anim {
                     target: lockBg
                     property: "implicitWidth"
-                    to: root.width * 0.8
+                    to: root.height * Config.lock.sizes.heightMult * Config.lock.sizes.ratio
                     duration: Appearance.anim.durations.expressiveDefaultSpatial
                     easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
                 }
                 Anim {
                     target: lockBg
                     property: "implicitHeight"
-                    to: root.height * 0.8
+                    to: root.height * Config.lock.sizes.heightMult
                     duration: Appearance.anim.durations.expressiveDefaultSpatial
                     easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
                 }
@@ -174,6 +181,7 @@ WlSessionLockSurface {
         implicitWidth: size
         implicitHeight: size
 
+        clip: true
         color: Colours.tPalette.m3surface
         radius: size / 4
         rotation: 180
diff --git a/modules/lock/WeatherInfo.qml b/modules/lock/WeatherInfo.qml
index b944d2f..1b5b29e 100644
--- a/modules/lock/WeatherInfo.qml
+++ b/modules/lock/WeatherInfo.qml
@@ -7,22 +7,10 @@ import QtQuick.Layouts
 RowLayout {
     id: root
 
-    Timer {
-        running: true
-        triggeredOnStart: true
-        repeat: true
-        interval: 900000 // 15 minutes
-        onTriggered: Weather.reload()
-    }
-
+    anchors.fill: parent
     spacing: Appearance.spacing.large
 
     MaterialIcon {
-        id: icon
-
-        Layout.alignment: Qt.AlignVCenter
-        Layout.topMargin: Config.lock.sizes.border / 4
-
         animate: true
         text: Weather.icon || "cloud_alert"
         color: Colours.palette.m3secondary
@@ -31,8 +19,6 @@ RowLayout {
 
     ColumnLayout {
         Layout.alignment: Qt.AlignVCenter
-        Layout.topMargin: Config.lock.sizes.border / 4
-        Layout.rightMargin: Config.lock.sizes.border / 2
 
         spacing: Appearance.spacing.small
 
@@ -49,7 +35,6 @@ RowLayout {
 
         StyledText {
             Layout.fillWidth: true
-            Layout.maximumWidth: Config.lock.sizes.weatherWidth - icon.implicitWidth
 
             animate: true
             text: Weather.description || qsTr("No weather")
@@ -58,4 +43,12 @@ RowLayout {
             elide: Text.ElideRight
         }
     }
+
+    Timer {
+        running: true
+        triggeredOnStart: true
+        repeat: true
+        interval: 900000 // 15 minutes
+        onTriggered: Weather.reload()
+    }
 }