diff options
Diffstat (limited to 'modules/lock/WeatherInfo.qml')
| -rw-r--r-- | modules/lock/WeatherInfo.qml | 116 |
1 files changed, 65 insertions, 51 deletions
diff --git a/modules/lock/WeatherInfo.qml b/modules/lock/WeatherInfo.qml index 5d10e7b..3695061 100644 --- a/modules/lock/WeatherInfo.qml +++ b/modules/lock/WeatherInfo.qml @@ -1,3 +1,5 @@ +pragma ComponentBehavior: Bound + import qs.components import qs.services import qs.config @@ -8,6 +10,8 @@ import QtQuick.Layouts ColumnLayout { id: root + required property int rootHeight + anchors.left: parent.left anchors.right: parent.right anchors.margins: Appearance.padding.large * 2 @@ -24,6 +28,7 @@ ColumnLayout { } RowLayout { + Layout.bottomMargin: forecastLoader.active ? 0 : Appearance.padding.large Layout.fillWidth: true spacing: Appearance.spacing.large @@ -94,74 +99,83 @@ ColumnLayout { } } - RowLayout { + Loader { + id: forecastLoader + Layout.topMargin: Appearance.spacing.smaller Layout.bottomMargin: Appearance.padding.large * 2 Layout.fillWidth: true - spacing: Appearance.spacing.large - Repeater { - model: { - const forecast = Weather.forecast; - let count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5; - if (!forecast) - return Array.from({ - length: count - }, () => null); + asynchronous: true + active: root.rootHeight > 820 + visible: active - const hours = []; - const hour = new Date().getHours(); + sourceComponent: RowLayout { + spacing: Appearance.spacing.large - const today = forecast[0].hourly; - const arr = [...today, ...forecast[1].hourly]; - for (let i = 0; i < arr.length; i++) { - const time = parseInt(arr[i].time, 10) / 100; + Repeater { + model: { + const forecast = Weather.forecast; + let count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5; + if (!forecast) + return Array.from({ + length: count + }, () => null); - if (i > today.length ? time < hour : time > hour) { - hours.push(arr[i]); - count--; - } + const hours = []; + const hour = new Date().getHours(); - if (count === 0) - break; - } + const today = forecast[0].hourly; + const arr = [...today, ...forecast[1].hourly]; + for (let i = 0; i < arr.length; i++) { + const time = parseInt(arr[i].time, 10) / 100; - return hours; - } + if (i > today.length ? time < hour : time > hour) { + hours.push(arr[i]); + count--; + } - ColumnLayout { - id: forecastHour + if (count === 0) + break; + } - required property var modelData + return hours; + } - Layout.fillWidth: true - spacing: Appearance.spacing.small + ColumnLayout { + id: forecastHour + + required property var modelData - StyledText { Layout.fillWidth: true - text: { - if (!forecastHour.modelData) - return "00 AM"; - const hour = parseInt(forecastHour.modelData.time, 10) / 100; - return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`; + spacing: Appearance.spacing.small + + StyledText { + Layout.fillWidth: true + text: { + if (!forecastHour.modelData) + return "00 AM"; + const hour = parseInt(forecastHour.modelData.time, 10) / 100; + return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`; + } + color: Colours.palette.m3outline + horizontalAlignment: Text.AlignHCenter + font.pointSize: Appearance.font.size.larger } - color: Colours.palette.m3outline - horizontalAlignment: Text.AlignHCenter - font.pointSize: Appearance.font.size.larger - } - MaterialIcon { - Layout.alignment: Qt.AlignHCenter - text: forecastHour.modelData ? Icons.getWeatherIcon(forecastHour.modelData.weatherCode) : "cloud_alert" - font.pointSize: Appearance.font.size.extraLarge * 1.5 - font.weight: 500 - } + MaterialIcon { + Layout.alignment: Qt.AlignHCenter + text: forecastHour.modelData ? Icons.getWeatherIcon(forecastHour.modelData.weatherCode) : "cloud_alert" + font.pointSize: Appearance.font.size.extraLarge * 1.5 + font.weight: 500 + } - StyledText { - Layout.alignment: Qt.AlignHCenter - text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C` - color: Colours.palette.m3secondary - font.pointSize: Appearance.font.size.larger + StyledText { + Layout.alignment: Qt.AlignHCenter + text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C` + color: Colours.palette.m3secondary + font.pointSize: Appearance.font.size.larger + } } } } |