129 lines
3.1 KiB
QML
129 lines
3.1 KiB
QML
import qs.config
|
|
import qs.custom
|
|
import qs.services
|
|
import qs.util
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
Item {
|
|
id: root
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: 16
|
|
anchors.topMargin: 6
|
|
|
|
Component.onCompleted: Weather.reload()
|
|
|
|
CustomText {
|
|
id: city
|
|
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
|
|
text: Weather.city
|
|
color: Config.colors.tertiary
|
|
}
|
|
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
anchors.left: parent.left
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.verticalCenterOffset: font.pointSize * 0.25
|
|
|
|
animate: true
|
|
animateProp: "opacity"
|
|
text: Weather.icon
|
|
color: Weather.iconColor
|
|
font.pointSize: Config.font.size.largest * 1.8
|
|
|
|
Behavior on color {
|
|
SequentialAnimation {
|
|
PauseAnimation {
|
|
duration: icon.animateDuration / 2
|
|
}
|
|
PropertyAction {}
|
|
}
|
|
}
|
|
}
|
|
|
|
Column {
|
|
id: info
|
|
|
|
anchors.left: icon.right
|
|
anchors.verticalCenter: icon.verticalCenter
|
|
anchors.verticalCenterOffset: -3
|
|
anchors.leftMargin: 14
|
|
spacing: 1
|
|
|
|
opacity: Weather.available ? 1 : 0
|
|
|
|
Behavior on opacity {
|
|
SequentialAnimation {
|
|
PauseAnimation {
|
|
duration: temp.animateDuration / 2
|
|
}
|
|
PropertyAction {}
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
id: temp
|
|
animate: true
|
|
text: Weather.temp
|
|
color: Config.colors.primary
|
|
font.pointSize: Config.font.size.large
|
|
font.weight: 500
|
|
|
|
// Reduce padding at bottom of text
|
|
height: implicitHeight * 0.9
|
|
|
|
CustomText {
|
|
anchors.left: parent.right
|
|
anchors.bottom: parent.bottom
|
|
anchors.leftMargin: 12
|
|
anchors.bottomMargin: 1
|
|
|
|
animate: true
|
|
text: Weather.feelsLike
|
|
color: Config.colors.tertiary
|
|
font.pointSize: Config.font.size.larger
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
animate: true
|
|
text: Weather.description
|
|
color: Config.colors.secondary
|
|
|
|
elide: Text.ElideRight
|
|
width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - 30)
|
|
}
|
|
|
|
Item {
|
|
implicitWidth: childrenRect.width
|
|
implicitHeight: childrenRect.height
|
|
|
|
MaterialIcon {
|
|
id: humidityIcon
|
|
|
|
animate: true
|
|
text: Weather.humidityIcon
|
|
color: Config.colors.primary
|
|
font.pointSize: Config.font.size.normal
|
|
|
|
}
|
|
|
|
CustomText {
|
|
anchors.left: humidityIcon.right
|
|
anchors.verticalCenter: humidityIcon.verticalCenter
|
|
anchors.leftMargin: 2
|
|
|
|
animate: true
|
|
text: `${Math.round(Weather.humidity * 100)}% Humidity`
|
|
color: Config.colors.primary
|
|
}
|
|
}
|
|
}
|
|
}
|