mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-04-15 18:22:08 -04:00
weather: light redesign for dash card
This commit is contained in:
bbedward
@@ -68,7 +68,8 @@ Rectangle {
|
||||
|
||||
readonly property var values: daily ? [] : [
|
||||
{
|
||||
// 'name': "Temperature",
|
||||
"name"// 'name': "Temperature",
|
||||
:
|
||||
// 'text': root.tempText,
|
||||
// 'icon': "thermometer"
|
||||
// }, {
|
||||
@@ -76,34 +77,34 @@ Rectangle {
|
||||
// 'text': root.feelsLikeText,
|
||||
// 'icon': "thermostat"
|
||||
// }, {
|
||||
'name': I18n.tr("Humidity"),
|
||||
'text': root.humidityText,
|
||||
'icon': "humidity_low"
|
||||
I18n.tr("Humidity"),
|
||||
"text": root.humidityText,
|
||||
"icon": "humidity_low"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Wind Speed"),
|
||||
'text': root.windText,
|
||||
'icon': "air"
|
||||
"name": I18n.tr("Wind Speed"),
|
||||
"text": root.windText,
|
||||
"icon": "air"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Pressure"),
|
||||
'text': root.pressureText,
|
||||
'icon': "speed"
|
||||
"name": I18n.tr("Pressure"),
|
||||
"text": root.pressureText,
|
||||
"icon": "speed"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Precipitation Chance"),
|
||||
'text': root.precipitationText,
|
||||
'icon': "rainy"
|
||||
"name": I18n.tr("Precipitation Chance"),
|
||||
"text": root.precipitationText,
|
||||
"icon": "rainy"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Visibility"),
|
||||
'text': root.visibilityText,
|
||||
'icon': "wb_sunny"
|
||||
"name": I18n.tr("Visibility"),
|
||||
"text": root.visibilityText,
|
||||
"icon": "wb_sunny"
|
||||
}
|
||||
]
|
||||
|
||||
color: isCurrent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
border.color: isCurrent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) : "transparent"
|
||||
color: isCurrent ? Theme.withAlpha(Theme.primary, 0.1) : Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
border.color: isCurrent ? Theme.withAlpha(Theme.primary, 0.3) : "transparent"
|
||||
border.width: isCurrent ? 1 : 0
|
||||
|
||||
Column {
|
||||
@@ -129,7 +130,7 @@ Rectangle {
|
||||
DankIcon {
|
||||
name: root.forecastData ? WeatherService.getWeatherIcon(root.forecastData.wCode || 0, root.forecastData.isDay ?? true) : "cloud"
|
||||
size: Theme.iconSize
|
||||
color: root.isCurrent ? Theme.primary : Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.8)
|
||||
color: root.isCurrent ? Theme.primary : Theme.withAlpha(Theme.primary, 0.8)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
@@ -187,14 +188,14 @@ Rectangle {
|
||||
DankIcon {
|
||||
name: root.values[index].icon
|
||||
size: 8
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.6)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.values[index].text
|
||||
font.pixelSize: Theme.fontSizeSmall - 2
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.6)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,8 @@ Item {
|
||||
implicitWidth: 700
|
||||
implicitHeight: root.available ? mainColumn.implicitHeight : unavailableColumn.implicitHeight + Theme.spacingXL * 2
|
||||
property bool syncing: false
|
||||
property bool showHourly: false
|
||||
property bool available: WeatherService.weather.available
|
||||
|
||||
function syncFrom(type) {
|
||||
if (!dailyLoader.item || !hourlyLoader.item)
|
||||
@@ -49,7 +51,66 @@ Item {
|
||||
syncing = false;
|
||||
}
|
||||
|
||||
property bool available: WeatherService.weather.available
|
||||
readonly property string sunriseTimeText: {
|
||||
if (!WeatherService.weather.rawSunrise)
|
||||
return WeatherService.weather.sunrise || "";
|
||||
try {
|
||||
const date = new Date(WeatherService.weather.rawSunrise);
|
||||
const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP";
|
||||
return date.toLocaleTimeString(Qt.locale(), format);
|
||||
} catch (e) {
|
||||
return WeatherService.weather.sunrise || "";
|
||||
}
|
||||
}
|
||||
|
||||
readonly property string sunsetTimeText: {
|
||||
if (!WeatherService.weather.rawSunset)
|
||||
return WeatherService.weather.sunset || "";
|
||||
try {
|
||||
const date = new Date(WeatherService.weather.rawSunset);
|
||||
const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP";
|
||||
return date.toLocaleTimeString(Qt.locale(), format);
|
||||
} catch (e) {
|
||||
return WeatherService.weather.sunset || "";
|
||||
}
|
||||
}
|
||||
|
||||
readonly property var heroMetrics: {
|
||||
SettingsData.useFahrenheit;
|
||||
SettingsData.windSpeedUnit;
|
||||
return [
|
||||
{
|
||||
"icon": "humidity_low",
|
||||
"label": I18n.tr("Humidity"),
|
||||
"value": WeatherService.formatPercent(WeatherService.weather.humidity) ?? "--"
|
||||
},
|
||||
{
|
||||
"icon": "air",
|
||||
"label": I18n.tr("Wind"),
|
||||
"value": WeatherService.formatSpeed(WeatherService.weather.wind) ?? "--"
|
||||
},
|
||||
{
|
||||
"icon": "speed",
|
||||
"label": I18n.tr("Pressure"),
|
||||
"value": WeatherService.formatPressure(WeatherService.weather.pressure) ?? "--"
|
||||
},
|
||||
{
|
||||
"icon": "rainy",
|
||||
"label": I18n.tr("Precipitation"),
|
||||
"value": (WeatherService.weather.precipitationProbability ?? 0) + "%"
|
||||
},
|
||||
{
|
||||
"icon": "wb_twilight",
|
||||
"label": I18n.tr("Sunrise"),
|
||||
"value": root.sunriseTimeText || "--"
|
||||
},
|
||||
{
|
||||
"icon": "bedtime",
|
||||
"label": I18n.tr("Sunset"),
|
||||
"value": root.sunsetTimeText || "--"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
Column {
|
||||
id: unavailableColumn
|
||||
@@ -60,7 +121,7 @@ Item {
|
||||
DankIcon {
|
||||
name: "cloud_off"
|
||||
size: Theme.iconSize * 2
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.5)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
@@ -73,7 +134,7 @@ Item {
|
||||
id: refreshText
|
||||
text: I18n.tr("No Weather Data Available")
|
||||
font.pixelSize: Theme.fontSizeLarge
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.7)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
@@ -81,7 +142,7 @@ Item {
|
||||
id: refreshButtonTwo
|
||||
name: "refresh"
|
||||
size: Theme.iconSize - 4
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.4)
|
||||
anchors.top: parent.top
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
@@ -145,35 +206,39 @@ Item {
|
||||
id: mainColumn
|
||||
anchors.fill: parent
|
||||
visible: root.available
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
Item {
|
||||
id: weatherContainer
|
||||
|
||||
LayoutMirroring.enabled: false
|
||||
LayoutMirroring.childrenInherit: true
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Rectangle {
|
||||
id: heroCard
|
||||
width: parent.width
|
||||
height: weatherColumn.height
|
||||
height: heroContent.height + Theme.spacingL * 2
|
||||
radius: Theme.cornerRadius
|
||||
color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
|
||||
border.color: Theme.withAlpha(Theme.outline, 0.08)
|
||||
border.width: 1
|
||||
|
||||
Column {
|
||||
id: weatherColumn
|
||||
height: weatherInfo.height + dateStepper.height
|
||||
width: Math.max(weatherInfo.width, dateStepper.width)
|
||||
id: heroContent
|
||||
x: Theme.spacingL
|
||||
y: Theme.spacingL
|
||||
width: parent.width - Theme.spacingL * 2
|
||||
spacing: Theme.spacingM
|
||||
|
||||
Item {
|
||||
id: weatherInfo
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
// anchors.verticalCenter: parent.verticalCenter
|
||||
width: weatherIcon.width + tempColumn.width + sunriseColumn.width + Theme.spacingM * 2
|
||||
height: Math.max(weatherIcon.height, tempColumn.height, sunriseColumn.height)
|
||||
width: parent.width
|
||||
height: Math.max(heroLeft.height, heroMetricsGrid.height)
|
||||
|
||||
Row {
|
||||
id: heroLeft
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Theme.spacingL
|
||||
|
||||
DankIcon {
|
||||
id: weatherIcon
|
||||
name: WeatherService.getWeatherIcon(WeatherService.weather.wCode)
|
||||
size: Theme.iconSize * 1.5
|
||||
size: Theme.iconSize * 2
|
||||
color: Theme.primary
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
layer.enabled: true
|
||||
@@ -190,8 +255,6 @@ Item {
|
||||
Column {
|
||||
id: tempColumn
|
||||
spacing: Theme.spacingXS
|
||||
anchors.left: weatherIcon.right
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Item {
|
||||
@@ -201,7 +264,7 @@ Item {
|
||||
StyledText {
|
||||
id: tempText
|
||||
text: (SettingsData.useFahrenheit ? WeatherService.weather.tempF : WeatherService.weather.temp) + "°"
|
||||
font.pixelSize: Theme.fontSizeLarge + 4
|
||||
font.pixelSize: Theme.fontSizeXLarge + 8
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Light
|
||||
anchors.left: parent.left
|
||||
@@ -212,7 +275,7 @@ Item {
|
||||
id: unitText
|
||||
text: SettingsData.useFahrenheit ? "F" : "C"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.7)
|
||||
anchors.left: tempText.right
|
||||
anchors.leftMargin: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
@@ -222,111 +285,86 @@ Item {
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (WeatherService.weather.available) {
|
||||
if (WeatherService.weather.available)
|
||||
SettingsData.set("useFahrenheit", !SettingsData.useFahrenheit);
|
||||
}
|
||||
}
|
||||
enabled: WeatherService.weather.available
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: WeatherService.getWeatherCondition(WeatherService.weather.wCode)
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.7)
|
||||
}
|
||||
|
||||
StyledText {
|
||||
property var feelsLike: SettingsData.useFahrenheit ? (WeatherService.weather.feelsLikeF || WeatherService.weather.tempF) : (WeatherService.weather.feelsLike || WeatherService.weather.temp)
|
||||
text: I18n.tr("Feels Like %1°", "weather feels like temperature").arg(feelsLike)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.7)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.5)
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: WeatherService.weather.city || ""
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.7)
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.5)
|
||||
visible: text.length > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Grid {
|
||||
id: heroMetricsGrid
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
columns: 3
|
||||
columnSpacing: Theme.spacingXL
|
||||
rowSpacing: Theme.spacingS
|
||||
|
||||
Repeater {
|
||||
model: root.heroMetrics
|
||||
|
||||
Row {
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
DankIcon {
|
||||
name: modelData.icon
|
||||
size: Theme.iconSizeSmall - 2
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.5)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Column {
|
||||
id: sunriseColumn
|
||||
spacing: Theme.spacingXS
|
||||
anchors.left: tempColumn.right
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: WeatherService.weather.sunrise && WeatherService.weather.sunset
|
||||
spacing: 2
|
||||
|
||||
Item {
|
||||
width: sunriseIcon.width + sunriseText.width + Theme.spacingXS
|
||||
height: sunriseIcon.height
|
||||
|
||||
DankIcon {
|
||||
id: sunriseIcon
|
||||
name: "wb_twilight"
|
||||
size: Theme.iconSize - 6
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.6)
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
StyledText {
|
||||
text: modelData.label
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.5)
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: sunriseText
|
||||
text: {
|
||||
if (!WeatherService.weather.rawSunrise)
|
||||
return WeatherService.weather.sunrise || "";
|
||||
try {
|
||||
const date = new Date(WeatherService.weather.rawSunrise);
|
||||
const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP";
|
||||
return date.toLocaleTimeString(Qt.locale(), format);
|
||||
} catch (e) {
|
||||
return WeatherService.weather.sunrise || "";
|
||||
text: modelData.value
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.6)
|
||||
anchors.left: sunriseIcon.right
|
||||
anchors.leftMargin: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: sunsetIcon.width + sunsetText.width + Theme.spacingXS
|
||||
height: sunsetIcon.height
|
||||
|
||||
DankIcon {
|
||||
id: sunsetIcon
|
||||
name: "bedtime"
|
||||
size: Theme.iconSize - 6
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: sunsetText
|
||||
text: {
|
||||
if (!WeatherService.weather.rawSunset)
|
||||
return WeatherService.weather.sunset || "";
|
||||
try {
|
||||
const date = new Date(WeatherService.weather.rawSunset);
|
||||
const format = SettingsData.use24HourClock ? "HH:mm" : "h:mm AP";
|
||||
return date.toLocaleTimeString(Qt.locale(), format);
|
||||
} catch (e) {
|
||||
return WeatherService.weather.sunset || "";
|
||||
}
|
||||
}
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
anchors.left: sunsetIcon.right
|
||||
anchors.leftMargin: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
id: skyDateRow
|
||||
width: parent.width
|
||||
height: dateStepper.height
|
||||
|
||||
Item {
|
||||
id: dateStepper
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: dateStepperInner.height + Theme.spacingM * 2
|
||||
width: dateStepperInner.width
|
||||
|
||||
@@ -373,8 +411,6 @@ Item {
|
||||
anchors.leftMargin: parent.space
|
||||
width: implicitWidth
|
||||
text: dateStepper.splitDate[0]
|
||||
// onIncrement: () => dateStepper.changeDate(0, +1)
|
||||
// onDecrement: () => dateStepper.changeDate(0, -1)
|
||||
}
|
||||
|
||||
DankNumberStepper {
|
||||
@@ -475,14 +511,17 @@ Item {
|
||||
onCurrentDateChanged: if (!syncing)
|
||||
root.syncFrom("date")
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: skyBox
|
||||
height: weatherColumn.height
|
||||
anchors.left: weatherColumn.right
|
||||
anchors.right: parent.right
|
||||
anchors.left: dateStepper.right
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
anchors.right: parent.right
|
||||
height: parent.height
|
||||
|
||||
LayoutMirroring.enabled: false
|
||||
LayoutMirroring.childrenInherit: true
|
||||
|
||||
property var backgroundOpacity: 0.3
|
||||
property var sunTime: WeatherService.getCurrentSunTime(dateStepper.currentDate)
|
||||
property var periodIndex: sunTime?.periodIndex
|
||||
@@ -494,40 +533,12 @@ Item {
|
||||
return Theme.blend(blackColor, blueColor, r);
|
||||
}
|
||||
property var topColor: {
|
||||
const colorMap = [blackColor // "night"
|
||||
, Theme.withAlpha(blackBlue(0.0), 0.8) // "astronomicalTwilight"
|
||||
, Theme.withAlpha(blackBlue(0.2), 0.7) // "nauticalTwilight"
|
||||
, Theme.withAlpha(blackBlue(0.5), 0.6) // "civilTwilight"
|
||||
, Theme.withAlpha(blackBlue(0.7), 0.6) // "sunrise"
|
||||
, Theme.withAlpha(blackBlue(0.9), 0.6) // "goldenHourMorning"
|
||||
, Theme.withAlpha(blackBlue(1.0), 0.6) // "daytime"
|
||||
, Theme.withAlpha(blackBlue(0.9), 0.6) // "afternoon"
|
||||
, Theme.withAlpha(blackBlue(0.7), 0.6) // "goldenHourEvening"
|
||||
, Theme.withAlpha(blackBlue(0.5), 0.6) // "sunset"
|
||||
, Theme.withAlpha(blackBlue(0.2), 0.7) // "civilTwilight"
|
||||
, Theme.withAlpha(blackBlue(0.0), 0.8) // "nauticalTwilightEvening"
|
||||
, blackColor // "astronomicalTwilightEvening"
|
||||
, blackColor // "night"
|
||||
,];
|
||||
const colorMap = [blackColor, Theme.withAlpha(blackBlue(0.0), 0.8), Theme.withAlpha(blackBlue(0.2), 0.7), Theme.withAlpha(blackBlue(0.5), 0.6), Theme.withAlpha(blackBlue(0.7), 0.6), Theme.withAlpha(blackBlue(0.9), 0.6), Theme.withAlpha(blackBlue(1.0), 0.6), Theme.withAlpha(blackBlue(0.9), 0.6), Theme.withAlpha(blackBlue(0.7), 0.6), Theme.withAlpha(blackBlue(0.5), 0.6), Theme.withAlpha(blackBlue(0.2), 0.7), Theme.withAlpha(blackBlue(0.0), 0.8), blackColor, blackColor];
|
||||
const index = periodIndex ?? 0;
|
||||
return Theme.blend(colorMap[index], colorMap[index + 1], periodPercent ?? 0);
|
||||
}
|
||||
property var sunColor: {
|
||||
const colorMap = [Theme.withAlpha(redColor, 0.05) // "night"
|
||||
, Theme.withAlpha(redColor, 0.1) // "astronomicalTwilight"
|
||||
, Theme.withAlpha(redColor, 0.3) // "nauticalTwilight"
|
||||
, Theme.withAlpha(redColor, 0.4) // "civilTwilight"
|
||||
, Theme.withAlpha(redColor, 0.5) // "sunrise"
|
||||
, Theme.withAlpha(blueColor, 0.2) // "goldenHourMorning"
|
||||
, Theme.withAlpha(blueColor, 0.0) // "daytime"
|
||||
, Theme.withAlpha(blueColor, 0.2) // "afternoon"
|
||||
, Theme.withAlpha(redColor, 0.5) // "goldenHourEvening"
|
||||
, Theme.withAlpha(redColor, 0.4) // "sunset"
|
||||
, Theme.withAlpha(redColor, 0.3) // "civilTwilight"
|
||||
, Theme.withAlpha(redColor, 0.1) // "nauticalTwilightEvening"
|
||||
, Theme.withAlpha(redColor, 0.05) // "astronomicalTwilightEvening"
|
||||
, Theme.withAlpha(redColor, 0.0) // "night"
|
||||
,];
|
||||
const colorMap = [Theme.withAlpha(redColor, 0.05), Theme.withAlpha(redColor, 0.1), Theme.withAlpha(redColor, 0.3), Theme.withAlpha(redColor, 0.4), Theme.withAlpha(redColor, 0.5), Theme.withAlpha(blueColor, 0.2), Theme.withAlpha(blueColor, 0.0), Theme.withAlpha(blueColor, 0.2), Theme.withAlpha(redColor, 0.5), Theme.withAlpha(redColor, 0.4), Theme.withAlpha(redColor, 0.3), Theme.withAlpha(redColor, 0.1), Theme.withAlpha(redColor, 0.05), Theme.withAlpha(redColor, 0.0)];
|
||||
const index = periodIndex ?? 0;
|
||||
return Theme.blend(colorMap[index], colorMap[index + 1], periodPercent ?? 0);
|
||||
}
|
||||
@@ -742,7 +753,6 @@ Item {
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
// Rightmost Line
|
||||
height: 1
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
@@ -753,7 +763,6 @@ Item {
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
// Middle Right Line
|
||||
height: 1
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
@@ -764,7 +773,6 @@ Item {
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
// Middle Left Line
|
||||
height: 1
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
@@ -775,7 +783,6 @@ Item {
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
// Leftmost Line
|
||||
height: 1
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
@@ -830,14 +837,42 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: forecastChips.height
|
||||
|
||||
DankFilterChips {
|
||||
id: forecastChips
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
model: [I18n.tr("Daily"), I18n.tr("Hourly")]
|
||||
currentIndex: root.showHourly ? 1 : 0
|
||||
showCheck: false
|
||||
showCounts: false
|
||||
onSelectionChanged: index => {
|
||||
root.showHourly = index === 1;
|
||||
}
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: denseButton
|
||||
anchors.right: refreshButton.left
|
||||
anchors.rightMargin: Theme.spacingXS
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: root.showHourly && hourlyLoader.item !== null
|
||||
iconName: SessionData.weatherHourlyDetailed ? "tile_large" : "tile_medium"
|
||||
onClicked: SessionData.setWeatherHourlyDetailed(!SessionData.weatherHourlyDetailed)
|
||||
}
|
||||
|
||||
DankIcon {
|
||||
id: refreshButton
|
||||
name: "refresh"
|
||||
size: Theme.iconSize - 4
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.4)
|
||||
color: Theme.withAlpha(Theme.surfaceText, 0.4)
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
property bool isRefreshing: false
|
||||
enabled: !isRefreshing
|
||||
@@ -894,45 +929,16 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
height: Math.max(hourlyHeader.height, denseButton.height) + Theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
id: hourlyHeader
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: I18n.tr("Hourly Forecast")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - denseButton.width - hourlyHeader.width - 2 * parent.spacing
|
||||
height: 1
|
||||
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
|
||||
}
|
||||
|
||||
DankActionButton {
|
||||
id: denseButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: hourlyLoader.item !== null
|
||||
iconName: SessionData.weatherHourlyDetailed ? "tile_large" : "tile_medium"
|
||||
onClicked: SessionData.setWeatherHourlyDetailed(!SessionData.weatherHourlyDetailed)
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: (hourlyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS
|
||||
height: root.showHourly ? ((hourlyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS) : ((dailyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS)
|
||||
|
||||
Loader {
|
||||
id: hourlyLoader
|
||||
id: dailyLoader
|
||||
anchors.fill: parent
|
||||
sourceComponent: hourlyComponent
|
||||
sourceComponent: dailyComponent
|
||||
active: root.visible && root.available
|
||||
visible: !root.showHourly
|
||||
asynchronous: true
|
||||
opacity: 0
|
||||
onLoaded: {
|
||||
@@ -944,6 +950,25 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: hourlyLoader
|
||||
anchors.fill: parent
|
||||
sourceComponent: hourlyComponent
|
||||
active: root.visible && root.available
|
||||
visible: root.showHourly
|
||||
asynchronous: true
|
||||
opacity: 0
|
||||
onLoaded: {
|
||||
root.syncing = true;
|
||||
item.currentIndex = item.initialIndex;
|
||||
item.positionViewAtIndex(item.initialIndex, ListView.SnapPosition);
|
||||
root.syncing = false;
|
||||
opacity = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: hourlyComponent
|
||||
ListView {
|
||||
@@ -979,7 +1004,7 @@ Item {
|
||||
d.setHours(index);
|
||||
return d;
|
||||
}
|
||||
forecastData: WeatherService.weather.hourlyForecast?.[index]
|
||||
forecastData: WeatherService.weather.hourlyForecast[index]
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: if (!syncing)
|
||||
@@ -1032,49 +1057,6 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
height: dailyHeader.height + Theme.spacingS
|
||||
spacing: Theme.spacingS
|
||||
|
||||
StyledText {
|
||||
id: dailyHeader
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: I18n.tr("Daily Forecast")
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - denseButton.width - dailyHeader.width - 2 * parent.spacing
|
||||
height: 1
|
||||
color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.1)
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: (dailyLoader.item?.cardHeight ?? (Theme.fontSizeLarge * 6)) + Theme.spacingXS
|
||||
|
||||
Loader {
|
||||
id: dailyLoader
|
||||
anchors.fill: parent
|
||||
sourceComponent: dailyComponent
|
||||
active: root.visible && root.available
|
||||
asynchronous: true
|
||||
opacity: 0
|
||||
onLoaded: {
|
||||
root.syncing = true;
|
||||
item.currentIndex = item.initialIndex;
|
||||
item.positionViewAtIndex(item.initialIndex, ListView.SnapPosition);
|
||||
root.syncing = false;
|
||||
opacity = 1;
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: dailyComponent
|
||||
@@ -1111,7 +1093,7 @@ Item {
|
||||
date.setDate(date.getDate() + index);
|
||||
return date;
|
||||
}
|
||||
forecastData: WeatherService.weather.forecast?.[index]
|
||||
forecastData: WeatherService.weather.forecast[index]
|
||||
}
|
||||
|
||||
onCurrentIndexChanged: if (!syncing)
|
||||
@@ -1135,6 +1117,4 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,6 +64,12 @@ Flow {
|
||||
}
|
||||
}
|
||||
|
||||
DankRipple {
|
||||
id: chipRipple
|
||||
cornerRadius: chip.radius
|
||||
rippleColor: chip.selected ? Theme.primaryText : Theme.surfaceVariantText
|
||||
}
|
||||
|
||||
Row {
|
||||
id: contentRow
|
||||
anchors.centerIn: parent
|
||||
@@ -91,6 +97,7 @@ Flow {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onPressed: mouse => chipRipple.trigger(mouse.x, mouse.y)
|
||||
onClicked: {
|
||||
root.currentIndex = chip.index;
|
||||
root.selectionChanged(chip.index);
|
||||
|
||||
Reference in New Issue
Block a user