move lock screen clock to left-aligned rotated column with slide animation

shell/lock/LockSurface.qml

@@ -83,6 +83,74 @@ WlSessionLockSurface {
         }
     }
 
+    // Clock - rotated, left-aligned
+    Item {
+        id: _clockItem
+        anchors.left: parent.left
+        anchors.leftMargin: 48
+        anchors.verticalCenter: parent.verticalCenter
+        width: _clockText.height
+        height: _clockCol.implicitWidth
+
+        opacity: 0
+        property real _slideX: -80
+
+        ParallelAnimation on opacity {
+            NumberAnimation {
+                to: 1
+                duration: 400
+                easing.type: Easing.OutCubic
+            }
+        }
+        NumberAnimation on _slideX {
+            to: 0
+            duration: 500
+            easing.type: Easing.OutCubic
+        }
+
+        transform: Translate {
+            x: _clockItem._slideX
+        }
+
+        Column {
+            id: _clockCol
+            anchors.centerIn: parent
+            spacing: 8
+            rotation: -90
+            transformOrigin: Item.Center
+
+            Text {
+                id: _clockText
+                text: Qt.formatTime(new Date(), "HH:mm")
+                color: S.Theme.base05
+                font.pixelSize: 72
+                font.family: S.Theme.fontFamily
+                font.bold: true
+
+                Timer {
+                    interval: 1000
+                    running: true
+                    repeat: true
+                    onTriggered: parent.text = Qt.formatTime(new Date(), "HH:mm")
+                }
+            }
+
+            Text {
+                text: Qt.formatDate(new Date(), "dddd, d MMMM")
+                color: S.Theme.base04
+                font.pixelSize: S.Theme.fontSize + 2
+                font.family: S.Theme.fontFamily
+
+                Timer {
+                    interval: 60000
+                    running: true
+                    repeat: true
+                    onTriggered: parent.text = Qt.formatDate(new Date(), "dddd, d MMMM")
+                }
+            }
+        }
+    }
+
     // Center content
     Item {
         id: content
@@ -108,39 +176,6 @@ WlSessionLockSurface {
             anchors.horizontalCenter: parent.horizontalCenter
             spacing: 24
 
-            // Clock
-            Text {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: Qt.formatTime(new Date(), "HH:mm")
-                color: S.Theme.base05
-                font.pixelSize: 72
-                font.family: S.Theme.fontFamily
-                font.bold: true
-
-                Timer {
-                    interval: 1000
-                    running: true
-                    repeat: true
-                    onTriggered: parent.text = Qt.formatTime(new Date(), "HH:mm")
-                }
-            }
-
-            // Date
-            Text {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: Qt.formatDate(new Date(), "dddd, d MMMM")
-                color: S.Theme.base04
-                font.pixelSize: S.Theme.fontSize + 2
-                font.family: S.Theme.fontFamily
-
-                Timer {
-                    interval: 60000
-                    running: true
-                    repeat: true
-                    onTriggered: parent.text = Qt.formatDate(new Date(), "dddd, d MMMM")
-                }
-            }
-
             // Notification pills
             Row {
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -368,6 +403,20 @@ WlSessionLockSurface {
         id: _unlockAnim
 
         ParallelAnimation {
+            NumberAnimation {
+                target: _clockItem
+                property: "opacity"
+                to: 0
+                duration: 200
+                easing.type: Easing.InCubic
+            }
+            NumberAnimation {
+                target: _clockItem
+                property: "_slideX"
+                to: -80
+                duration: 200
+                easing.type: Easing.InCubic
+            }
             NumberAnimation {
                 target: content
                 property: "opacity"