mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-26 22:42:50 -05:00
feat: add sun and moon view to WeatherTab (#787)
* feat: add sun and moon view to WeatherTab * feat: hourly forecast and scrollable date * fix: put listviews in loaders to prevent ui blocking * dankdash/weather: wrap all tab content in loaders, weather updates - remove a bunch of transitions that make things feel glitchy - use animation durations from Theme - configurable detailed/compact hourly view * weather: fix scroll and some display issues --------- Co-authored-by: bbedward <bbedward@gmail.com>
This commit is contained in:
mbpowers
186
quickshell/Modules/DankBar/Widgets/WeatherForecastCard.qml
Normal file
186
quickshell/Modules/DankBar/Widgets/WeatherForecastCard.qml
Normal file
@@ -0,0 +1,186 @@
|
||||
import QtQuick
|
||||
import qs.Common
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
radius: Theme.cornerRadius
|
||||
|
||||
property var date: null
|
||||
property var daily: true
|
||||
property var forecastData: null
|
||||
property var dense: false
|
||||
|
||||
readonly property bool isCurrent: {
|
||||
if (daily) {
|
||||
date ? WeatherService.calendarDayDifference(new Date(), date) === 0 : false;
|
||||
} else {
|
||||
date ? WeatherService.calendarHourDifference(new Date(), date) === 0 : false;
|
||||
}
|
||||
}
|
||||
|
||||
readonly property string dateText: (daily ? root.forecastData?.day : root.forecastData?.time) ?? "--"
|
||||
|
||||
readonly property var minTemp: WeatherService.formatTemp(root.forecastData?.tempMin)
|
||||
readonly property var maxTemp: WeatherService.formatTemp(root.forecastData?.tempMax)
|
||||
readonly property string minMaxTempText: (minTemp ?? "--") + "/" + (maxTemp ?? "--")
|
||||
|
||||
readonly property var temp: WeatherService.formatTemp(root.forecastData?.temp)
|
||||
readonly property string tempText: temp ?? "--"
|
||||
|
||||
readonly property var feelsLikeTemp: WeatherService.formatTemp(root.forecastData?.feelsLike)
|
||||
readonly property string feelsLikeText: feelsLikeTemp ?? "--"
|
||||
|
||||
readonly property var humidity: WeatherService.formatPercent(root.forecastData?.humidity)
|
||||
readonly property string humidityText: humidity ?? "--"
|
||||
|
||||
readonly property var wind: WeatherService.formatSpeed(root.forecastData?.wind)
|
||||
readonly property string windText: wind ?? "--"
|
||||
|
||||
readonly property var pressure: WeatherService.formatPressure(root.forecastData?.pressure)
|
||||
readonly property string pressureText: pressure ?? "--"
|
||||
|
||||
readonly property var precipitation: root.forecastData?.precipitationProbability
|
||||
readonly property string precipitationText: precipitation + "%" ?? "--"
|
||||
|
||||
readonly property var visibility: WeatherService.formatVisibility(root.forecastData?.visibility)
|
||||
readonly property string visibilityText: visibility ?? "--"
|
||||
|
||||
readonly property var values: daily ? [] : [
|
||||
{
|
||||
// 'name': "Temperature",
|
||||
// 'text': root.tempText,
|
||||
// 'icon': "thermometer"
|
||||
// }, {
|
||||
// 'name': "Feels Like",
|
||||
// 'text': root.feelsLikeText,
|
||||
// 'icon': "thermostat"
|
||||
// }, {
|
||||
'name': I18n.tr("Humidity"),
|
||||
'text': root.humidityText,
|
||||
'icon': "humidity_low"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Wind Speed"),
|
||||
'text': root.windText,
|
||||
'icon': "air"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Pressure"),
|
||||
'text': root.pressureText,
|
||||
'icon': "speed"
|
||||
},
|
||||
{
|
||||
'name': I18n.tr("Precipitation Chance"),
|
||||
'text': root.precipitationText,
|
||||
'icon': "rainy"
|
||||
},
|
||||
{
|
||||
'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"
|
||||
border.width: isCurrent ? 1 : 0
|
||||
|
||||
Column {
|
||||
anchors.centerIn: parent
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
StyledText {
|
||||
text: root.forecastData != null ? root.dateText : I18n.tr("Forecast Not Available")
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: root.isCurrent ? Theme.primary : (root.forecastData ? Theme.surfaceText : Theme.outline)
|
||||
font.weight: root.isCurrent ? Font.Medium : Font.Normal
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: Theme.spacingM
|
||||
visible: root.forecastData != null
|
||||
|
||||
Column {
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
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)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.daily ? root.minMaxTempText : root.tempText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: root.isCurrent ? Theme.primary : Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
StyledText {
|
||||
text: root.feelsLikeText
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: root.isCurrent ? Theme.primary : Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: !root.daily
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: detailsColumn
|
||||
spacing: 2
|
||||
visible: !root.dense
|
||||
width: implicitWidth
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "dense"
|
||||
when: root.dense
|
||||
PropertyChanges {
|
||||
target: detailsColumn
|
||||
opacity: 0
|
||||
width: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
NumberAnimation {
|
||||
properties: "opacity,width"
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Repeater {
|
||||
model: root.values.length
|
||||
Row {
|
||||
spacing: 2
|
||||
|
||||
DankIcon {
|
||||
name: root.values[index].icon
|
||||
size: 8
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 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)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,8 +226,8 @@ DankPopout {
|
||||
return;
|
||||
}
|
||||
|
||||
if (root.currentTabIndex === 2 && wallpaperTab.handleKeyEvent) {
|
||||
if (wallpaperTab.handleKeyEvent(event)) {
|
||||
if (root.currentTabIndex === 2 && wallpaperLoader.item?.handleKeyEvent) {
|
||||
if (wallpaperLoader.item.handleKeyEvent(event)) {
|
||||
event.accepted = true;
|
||||
return;
|
||||
}
|
||||
@@ -301,7 +301,7 @@ DankPopout {
|
||||
let settingsIndex = SettingsData.weatherEnabled ? 4 : 3;
|
||||
if (index === settingsIndex) {
|
||||
dashVisible = false;
|
||||
PopoutService.openSettings();
|
||||
settingsModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -316,71 +316,84 @@ DankPopout {
|
||||
width: parent.width
|
||||
implicitHeight: {
|
||||
if (currentIndex === 0)
|
||||
return overviewTab.implicitHeight;
|
||||
return overviewLoader.item?.implicitHeight ?? 410;
|
||||
if (currentIndex === 1)
|
||||
return mediaTab.implicitHeight;
|
||||
return mediaLoader.item?.implicitHeight ?? 410;
|
||||
if (currentIndex === 2)
|
||||
return wallpaperTab.implicitHeight;
|
||||
return wallpaperLoader.item?.implicitHeight ?? 410;
|
||||
if (SettingsData.weatherEnabled && currentIndex === 3)
|
||||
return weatherTab.implicitHeight;
|
||||
return overviewTab.implicitHeight;
|
||||
return weatherLoader.item?.implicitHeight ?? 410;
|
||||
return 410;
|
||||
}
|
||||
currentIndex: root.currentTabIndex
|
||||
|
||||
OverviewTab {
|
||||
id: overviewTab
|
||||
|
||||
onCloseDash: {
|
||||
root.dashVisible = false;
|
||||
}
|
||||
|
||||
onSwitchToWeatherTab: {
|
||||
if (SettingsData.weatherEnabled) {
|
||||
tabBar.currentIndex = 3;
|
||||
tabBar.tabClicked(3);
|
||||
Loader {
|
||||
id: overviewLoader
|
||||
active: root.currentTabIndex === 0
|
||||
sourceComponent: Component {
|
||||
OverviewTab {
|
||||
onCloseDash: root.dashVisible = false
|
||||
onSwitchToWeatherTab: {
|
||||
if (SettingsData.weatherEnabled) {
|
||||
tabBar.currentIndex = 3;
|
||||
tabBar.tabClicked(3);
|
||||
}
|
||||
}
|
||||
onSwitchToMediaTab: {
|
||||
tabBar.currentIndex = 1;
|
||||
tabBar.tabClicked(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSwitchToMediaTab: {
|
||||
tabBar.currentIndex = 1;
|
||||
tabBar.tabClicked(1);
|
||||
Loader {
|
||||
id: mediaLoader
|
||||
active: root.currentTabIndex === 1
|
||||
sourceComponent: Component {
|
||||
MediaPlayerTab {
|
||||
targetScreen: root.screen
|
||||
popoutX: root.alignedX
|
||||
popoutY: root.alignedY
|
||||
popoutWidth: root.alignedWidth
|
||||
popoutHeight: root.alignedHeight
|
||||
contentOffsetY: Theme.spacingM + 48 + Theme.spacingS + Theme.spacingXS
|
||||
Component.onCompleted: root.__mediaTabRef = this
|
||||
onShowVolumeDropdown: (pos, screen, rightEdge, player, players) => {
|
||||
root.__showVolumeDropdown(pos, rightEdge, player, players);
|
||||
}
|
||||
onShowAudioDevicesDropdown: (pos, screen, rightEdge) => {
|
||||
root.__showAudioDevicesDropdown(pos, rightEdge);
|
||||
}
|
||||
onShowPlayersDropdown: (pos, screen, rightEdge, player, players) => {
|
||||
root.__showPlayersDropdown(pos, rightEdge, player, players);
|
||||
}
|
||||
onHideDropdowns: root.__hideDropdowns()
|
||||
onVolumeButtonExited: root.__startCloseTimer()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MediaPlayerTab {
|
||||
id: mediaTab
|
||||
targetScreen: root.screen
|
||||
popoutX: root.alignedX
|
||||
popoutY: root.alignedY
|
||||
popoutWidth: root.alignedWidth
|
||||
popoutHeight: root.alignedHeight
|
||||
contentOffsetY: Theme.spacingM + 48 + Theme.spacingS + Theme.spacingXS
|
||||
Component.onCompleted: root.__mediaTabRef = this
|
||||
onShowVolumeDropdown: (pos, screen, rightEdge, player, players) => {
|
||||
root.__showVolumeDropdown(pos, rightEdge, player, players);
|
||||
}
|
||||
onShowAudioDevicesDropdown: (pos, screen, rightEdge) => {
|
||||
root.__showAudioDevicesDropdown(pos, rightEdge);
|
||||
}
|
||||
onShowPlayersDropdown: (pos, screen, rightEdge, player, players) => {
|
||||
root.__showPlayersDropdown(pos, rightEdge, player, players);
|
||||
}
|
||||
onHideDropdowns: root.__hideDropdowns()
|
||||
onVolumeButtonExited: root.__startCloseTimer()
|
||||
}
|
||||
|
||||
WallpaperTab {
|
||||
id: wallpaperTab
|
||||
Loader {
|
||||
id: wallpaperLoader
|
||||
active: root.currentTabIndex === 2
|
||||
tabBarItem: tabBar
|
||||
keyForwardTarget: mainContainer
|
||||
targetScreen: root.screen
|
||||
parentPopout: root
|
||||
sourceComponent: Component {
|
||||
WallpaperTab {
|
||||
active: true
|
||||
tabBarItem: tabBar
|
||||
keyForwardTarget: mainContainer
|
||||
targetScreen: root.triggerScreen
|
||||
parentPopout: root
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
WeatherTab {
|
||||
id: weatherTab
|
||||
visible: SettingsData.weatherEnabled && root.currentTabIndex === 3
|
||||
Loader {
|
||||
id: weatherLoader
|
||||
active: SettingsData.weatherEnabled && root.currentTabIndex === 3
|
||||
sourceComponent: Component {
|
||||
WeatherTab {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,11 +79,16 @@ Item {
|
||||
}
|
||||
|
||||
onActivePlayerChanged: {
|
||||
if (!activePlayer) {
|
||||
isSwitching = false;
|
||||
_switchHold = false;
|
||||
return;
|
||||
}
|
||||
isSwitching = true;
|
||||
_switchHold = true;
|
||||
paletteReady = false;
|
||||
_switchHoldTimer.restart();
|
||||
if (activePlayer && activePlayer.trackArtUrl) {
|
||||
if (activePlayer.trackArtUrl) {
|
||||
loadArtwork(activePlayer.trackArtUrl);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user