lock: add weather

config/LockConfig.qml

@@ -8,5 +8,7 @@ JsonObject {
         property int inputWidth: 600
         property int inputHeight: 200
         property int faceSize: 100
+        property int weatherWidth: 400
+        property int weatherHeight: 100
     }
 }

modules/lock/Backgrounds.qml

@@ -9,9 +9,12 @@ Item {
     id: root
 
     required property bool locked
+    required property real weatherWidth
 
     readonly property real clockBottom: innerMask.anchors.margins + clockPath.height
     readonly property real inputTop: innerMask.anchors.margins + inputPath.height
+    readonly property real weatherTop: innerMask.anchors.margins + weatherPath.height
+    readonly property real weatherRight: innerMask.anchors.margins + weatherPath.width
 
     anchors.fill: parent
 
@@ -34,21 +37,12 @@ Item {
             id: innerMask
 
             anchors.fill: parent
-            anchors.margins: root.locked ? Config.lock.sizes.border : 0
-
+            anchors.margins: root.locked ? Config.lock.sizes.border : -radius / 2
             radius: Appearance.rounding.large * 2
 
             Behavior on anchors.margins {
                 Anim {}
             }
-
-            Behavior on anchors.leftMargin {
-                Anim {}
-            }
-
-            Behavior on anchors.rightMargin {
-                Anim {}
-            }
         }
     }
 
@@ -202,6 +196,71 @@ Item {
                 }
             }
         }
+
+        ShapePath {
+            id: weatherPath
+
+            property int width: root.locked ? root.weatherWidth - Config.lock.sizes.border / 4 : 0
+            property real height: root.locked ? Config.lock.sizes.weatherHeight : 0
+
+            readonly property real rounding: Appearance.rounding.large * 2
+            readonly property real roundingX: width < rounding * 2 ? width / 2 : rounding
+            readonly property real roundingY: height < rounding * 2 ? height / 2 : rounding
+
+            strokeWidth: -1
+            fillColor: Config.border.colour
+
+            startY: Math.ceil(innerMask.height) - height - roundingY
+
+            PathArc {
+                relativeX: weatherPath.roundingX
+                relativeY: weatherPath.roundingY
+                radiusX: Math.min(weatherPath.rounding, weatherPath.width)
+                radiusY: Math.min(weatherPath.rounding, weatherPath.height)
+                direction: PathArc.Counterclockwise
+            }
+            PathLine {
+                relativeX: weatherPath.width - weatherPath.roundingX * 2
+                relativeY: 0
+            }
+            PathArc {
+                relativeX: weatherPath.roundingX
+                relativeY: weatherPath.roundingY
+                radiusX: Math.min(weatherPath.rounding, weatherPath.width)
+                radiusY: Math.min(weatherPath.rounding, weatherPath.height)
+            }
+            PathLine {
+                relativeX: 0
+                relativeY: weatherPath.height - weatherPath.roundingY * 2
+            }
+            PathArc {
+                relativeX: weatherPath.roundingX
+                relativeY: weatherPath.roundingY
+                radiusX: Math.min(weatherPath.rounding, weatherPath.width)
+                radiusY: Math.min(weatherPath.rounding, weatherPath.height)
+                direction: PathArc.Counterclockwise
+            }
+            PathLine {
+                relativeX: -weatherPath.width - weatherPath.roundingX
+                relativeY: 0
+            }
+
+            Behavior on width {
+                Anim {}
+            }
+
+            Behavior on height {
+                Anim {}
+            }
+
+            Behavior on fillColor {
+                ColorAnimation {
+                    duration: Appearance.anim.durations.normal
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.standard
+                }
+            }
+        }
     }
 
     component Anim: NumberAnimation {

modules/lock/Clock.qml

@@ -1,7 +1,6 @@
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
-import QtQuick
 import QtQuick.Layouts
 
 ColumnLayout {

modules/lock/LockSurface.qml

@@ -62,6 +62,7 @@ WlSessionLockSurface {
         id: backgrounds
 
         locked: root.locked
+        weatherWidth: weather.implicitWidth
         visible: false
     }
 
@@ -89,6 +90,15 @@ WlSessionLockSurface {
         lock: root
     }
 
+    WeatherInfo {
+        id: weather
+
+        anchors.top: parent.bottom
+        anchors.right: parent.left
+        anchors.topMargin: -backgrounds.weatherTop
+        anchors.rightMargin: -backgrounds.weatherRight
+    }
+
     component Anim: NumberAnimation {
         duration: Appearance.anim.durations.large
         easing.type: Easing.BezierSpline

modules/lock/WeatherInfo.qml

@@ -0,0 +1,64 @@
+import "root:/widgets"
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+
+    Timer {
+        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
+        font.pointSize: Appearance.font.size.extraLarge * 2.5
+        font.variableAxes: ({
+                opsz: Appearance.font.size.extraLarge * 1.2
+            })
+    }
+
+    ColumnLayout {
+        Layout.alignment: Qt.AlignVCenter
+        Layout.topMargin: Config.lock.sizes.border / 4
+        Layout.rightMargin: Config.lock.sizes.border / 2
+
+        spacing: Appearance.spacing.small
+
+        StyledText {
+            Layout.fillWidth: true
+
+            animate: true
+            text: `${Weather.temperature}°C`
+            color: Colours.palette.m3primary
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.extraLarge
+            font.weight: 500
+        }
+
+        StyledText {
+            Layout.fillWidth: true
+            Layout.maximumWidth: Config.lock.sizes.weatherWidth - icon.implicitWidth
+
+            animate: true
+            text: Weather.description || qsTr("No weather")
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: Appearance.font.size.large
+            elide: Text.ElideRight
+        }
+    }
+}