src/qml/FlatLocationForecast.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2020 Han Young <hanyoung@protonmail.com>
0003  * SPDX-FileCopyrightText: 2020 Devin Lin <espidev@gmail.com>
0004  * SPDX-FileCopyrightText: 2021 Nicolas Fella <nicolas.fella@gmx.de>
0005  *
0006  * SPDX-License-Identifier: GPL-2.0-or-later
0007  */
0008
0009 import QtQuick
0010 import QtQuick.Controls
0011 import QtQuick.Layouts
0012 import QtQuick.Shapes
0013
0014 import org.kde.kirigami as Kirigami
0015 import org.kde.kweather
0016
0017 Kirigami.ScrollablePage {
0018     id: root
0019
0020     background: null // transparent, since there is a page behind
0021
0022     property var weatherLocation
0023     property var selectedDay: dailyListView.currentItem ? dailyListView.currentItem.weather : weatherLocation.dayForecasts[0]
0024
0025     property bool inView: false
0026
0027     // swipe down to refresh
0028     supportsRefreshing: true
0029     onRefreshingChanged: {
0030         if (refreshing) {
0031             weatherLocation.update();
0032         }
0033     }
0034
0035     Connections {
0036         target: weatherLocation
0037         ignoreUnknownSignals: true
0038         function onStopLoadingIndicator() {
0039             root.refreshing = false;
0040
0041             // flat mode loads all locations at once, only show one notification for the current item
0042             if (root.ListView.isCurrentItem) {
0043                 showPassiveNotification(i18n("Weather refreshed for %1", weatherLocation.name));
0044             }
0045         }
0046     }
0047
0048     // all elements are in a column
0049     ColumnLayout {
0050         spacing: 0
0051         RowLayout {
0052             Layout.alignment: Qt.AlignHCenter
0053             Kirigami.Icon {
0054                 id: weatherIcon
0055                 source: weatherLocation.currentHourForecast ? weatherLocation.currentHourForecast.weatherIcon : "weather-none-available"
0056                 Layout.preferredHeight: width
0057                 Layout.preferredWidth: root.width * 0.8 - headerText.width
0058                 Layout.maximumHeight: Kirigami.Theme.defaultFont.pointSize * 15
0059                 Layout.maximumWidth: Kirigami.Theme.defaultFont.pointSize * 15
0060                 Layout.minimumHeight: Kirigami.Theme.defaultFont.pointSize * 5
0061                 Layout.minimumWidth: Kirigami.Theme.defaultFont.pointSize * 5
0062                 smooth: true
0063             }
0064
0065             // weather header
0066             ColumnLayout {
0067                 id: headerText
0068                 RowLayout {
0069                     spacing: 0
0070                     Label {
0071                         font.pointSize: Kirigami.Theme.defaultFont.pointSize * 3
0072                         font.weight: Font.Light
0073                         font.family: lightHeadingFont.name
0074                         text: weatherLocation.currentHourForecast ? Math.round(Formatter.convertTemp(weatherLocation.currentHourForecast.temperature, settingsModel.temperatureUnits)) : ""
0075                     }
0076                     Label {
0077                         Layout.alignment: Qt.AlignTop
0078                         Layout.topMargin: Kirigami.Units.largeSpacing
0079                         font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.5
0080                         font.weight: Font.Light
0081                         font.family: lightHeadingFont.name
0082                         text: Formatter.formatTemperatureUnitDegrees(settingsModel.temperatureUnits)
0083                     }
0084                 }
0085                 Label {
0086                     font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.3
0087                     font.weight: Font.Bold
0088                     text: weatherLocation.currentHourForecast ? weatherLocation.currentHourForecast.weatherDescription : ""
0089                 }
0090                 Label {
0091                     color: Kirigami.Theme.disabledTextColor
0092                     Layout.topMargin: Kirigami.Units.largeSpacing
0093                     font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.9
0094                     text: i18n("Updated at %1", weatherLocation.lastUpdated)
0095                 }
0096             }
0097         }
0098
0099         PageIndicator {
0100             visible: Kirigami.Settings.isMobile
0101             Layout.topMargin: Kirigami.Units.largeSpacing
0102             Layout.alignment: Qt.AlignHCenter
0103             opacity: forecastView.count > 1 ? 1 : 0
0104             count: forecastView.count
0105             currentIndex: forecastView.currentIndex
0106         }
0107
0108         // daily view
0109         Label {
0110             text: i18n("Daily")
0111             font.pointSize: Math.round(Kirigami.Theme.defaultFont.pointSize * 1.2)
0112             Layout.topMargin: Kirigami.Units.largeSpacing
0113         }
0114
0115         Kirigami.Separator {
0116             Layout.fillWidth: true
0117             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0118         }
0119
0120         WeatherStrip {
0121             id: dailyListView
0122             selectable: true
0123             Layout.fillWidth: true
0124             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0125             spacing: Kirigami.Units.largeSpacing
0126
0127             highlightMoveDuration: 250
0128             highlightMoveVelocity: -1
0129             highlight: Rectangle {
0130                 color: Kirigami.Theme.focusColor
0131                 border {
0132                     color: Kirigami.Theme.focusColor
0133                     width: 1
0134                 }
0135                 radius: 4
0136                 opacity: 0.3
0137                 focus: true
0138             }
0139
0140             model: weatherLocation.dayForecasts
0141             delegate: WeatherDayDelegate {
0142                 weather: modelData
0143                 textColor: Kirigami.Theme.textColor
0144                 secondaryTextColor: Kirigami.Theme.disabledTextColor
0145             }
0146
0147             onCurrentIndexChanged: {
0148                 weatherLocation.selectedDay = currentIndex
0149             }
0150         }
0151
0152         // hourly view
0153         Label {
0154             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0155             text: i18n("Hourly")
0156             font.pointSize: Math.round(Kirigami.Theme.defaultFont.pointSize * 1.2)
0157         }
0158
0159         Kirigami.Separator {
0160             Layout.fillWidth: true
0161             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0162         }
0163
0164         WeatherStrip {
0165             id: hourlyListView
0166             selectable: false
0167             implicitHeight: Kirigami.Units.gridUnit * 10.5
0168             Layout.fillWidth: true
0169             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0170
0171             model: weatherLocation.hourForecasts
0172
0173             delegate: WeatherHourDelegate {
0174                 weather: modelData
0175                 textColor: Kirigami.Theme.textColor
0176                 secondaryTextColor: Kirigami.Theme.disabledTextColor
0177             }
0178         }
0179
0180         InfoCard {
0181             Layout.fillWidth: true
0182             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0183         }
0184
0185         SunriseCard {
0186             Layout.fillWidth: true
0187             Layout.topMargin: Kirigami.Units.largeSpacing * 2
0188             selectedDay: root.selectedDay
0189         }
0190     }
0191 }
0192