lock: better lock anim

config/LockConfig.qml

@@ -5,6 +5,8 @@ JsonObject {
     property Sizes sizes: Sizes {}
 
     component Sizes: JsonObject {
+        property real heightMult: 0.7
+        property real ratio: 16 / 9
         property int centerWidth: 600
     }
 }

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
 

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
     }
 

modules/lock/LockSurface.qml

@@ -123,6 +123,13 @@ WlSessionLockSurface {
                     property: "opacity"
                     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"
@@ -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

modules/lock/WeatherInfo.qml

@@ -7,22 +7,10 @@ import QtQuick.Layouts
 RowLayout {
     id: root
 
-    Timer {
+    anchors.fill: parent
-        running: true
-        triggeredOnStart: true
-        repeat: true
-        interval: 900000 // 15 minutes
-        onTriggered: Weather.reload()
-    }
-
     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()
+    }
 }