src/qml/WeatherHourDelegate.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2020 Han Young <hanyoung@protonmail.com>
0003  * SPDX-FileCopyrightText: 2020 Devin Lin <espidev@gmail.com>
0004  *
0005  * SPDX-License-Identifier: GPL-2.0-or-later
0006  */
0007
0008 import QtQuick
0009 import QtQuick.Controls
0010 import QtQuick.Layouts
0011 import QtQuick.Shapes
0012 import org.kde.kirigami as Kirigami
0013 import org.kde.kweather
0014
0015 Rectangle {
0016     implicitWidth: Kirigami.Units.gridUnit * 5
0017     implicitHeight: hourElement.height
0018     color: "transparent"
0019
0020     property var weather
0021     property color textColor
0022     property color secondaryTextColor
0023     property alias mouseArea: mouse
0024
0025     MouseArea {
0026         id: mouse
0027         anchors.fill: parent
0028     }
0029
0030     // actual hour display
0031     ColumnLayout {
0032         id: hourElement
0033         anchors.left: parent.left
0034         anchors.right: parent.right
0035         anchors.leftMargin: Kirigami.Units.largeSpacing
0036         anchors.rightMargin: Kirigami.Units.largeSpacing
0037         spacing: Kirigami.Units.smallSpacing
0038
0039         Kirigami.Icon {
0040             source: weather.weatherIcon
0041             Layout.preferredHeight: Kirigami.Units.iconSizes.medium
0042             Layout.preferredWidth: Kirigami.Units.iconSizes.medium
0043         }
0044         Label {
0045             Layout.fillWidth: true
0046             text: Formatter.formatTemperature(weather.temperature, settingsModel.temperatureUnits)
0047             font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.3
0048             color: textColor
0049             elide: Text.ElideRight
0050         }
0051         Item {
0052             Layout.fillWidth: true
0053             implicitHeight: descriptionTextMetrics.implicitHeight
0054
0055             Label {
0056                 anchors.top: parent.top
0057                 anchors.left: parent.left
0058                 anchors.right: parent.right
0059                 text: weather.weatherDescription
0060                 color: textColor
0061                 wrapMode: Text.Wrap
0062                 elide: Text.ElideRight
0063                 maximumLineCount: 2
0064             }
0065
0066             // ensure that the height of the reserved space for the labels is always two text lines
0067             Label {
0068                 id: descriptionTextMetrics
0069                 anchors.top: parent.top
0070                 anchors.left: parent.left
0071                 anchors.right: parent.right
0072                 visible: false
0073                 text: 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
0074                 color: textColor
0075                 wrapMode: Text.Wrap
0076                 maximumLineCount: 2
0077             }
0078         }
0079
0080         // precipitation
0081         RowLayout {
0082             Kirigami.Icon {
0083                 source: "raindrop"
0084                 Layout.preferredHeight: Kirigami.Units.iconSizes.small
0085                 Layout.preferredWidth: Kirigami.Units.iconSizes.small
0086                 color: settingsModel && settingsModel.forecastStyle === "Dynamic" ? weatherLocation.iconColor : Kirigami.Theme.textColor
0087                 isMask: true
0088             }
0089             Label {
0090                 color: secondaryTextColor
0091                 text: Formatter.formatPrecipitation(weather.precipitationAmount, settingsModel.precipitationUnits)
0092             }
0093         }
0094
0095         // wind
0096         RowLayout {
0097             Kirigami.Icon {
0098                 source: "arrow-right"
0099                 Layout.preferredHeight: Kirigami.Units.iconSizes.small
0100                 Layout.preferredWidth: Kirigami.Units.iconSizes.small
0101                 color: settingsModel && settingsModel.forecastStyle === "Dynamic" ? weatherLocation.iconColor : Kirigami.Theme.textColor
0102                 isMask: true
0103             }
0104             Label {
0105                 color: secondaryTextColor
0106                 text: Formatter.formatWindSpeed(weather.windSpeed, settingsModel.speedUnits)
0107             }
0108         }
0109
0110         Label {
0111             Layout.fillWidth: true
0112             font.weight: Font.Bold
0113             text: Formatter.formatHourlyCardDelegateTime(weather.date, weatherLocation.timeZone)
0114             color: textColor
0115             wrapMode: Text.Wrap
0116         }
0117     }
0118 }