Fix weather symbol after load, fix Power Menu centering

This commit is contained in:
Ly-sec 2025-08-08 13:41:15 +02:00
parent d275efae04
commit a22d7d75cc
2 changed files with 379 additions and 302 deletions

View file

@ -11,14 +11,14 @@ import qs.Services
import qs.Settings import qs.Settings
import qs.Widgets import qs.Widgets
import qs.Widgets.LockScreen import qs.Widgets.LockScreen
Rectangle { Rectangle {
id: systemWidget id: systemWidget
property string uptimeText: "--:--" property string uptimeText: "--:--"
property bool panelVisible: false property bool panelVisible: false
property var settingsModal: null property var settingsModal: null
function logout() { function logout() {
if (WorkspaceManager.isNiri) if (WorkspaceManager.isNiri)
logoutProcessNiri.running = true; logoutProcessNiri.running = true;
@ -27,165 +27,163 @@ Rectangle {
else else
console.warn("No supported compositor detected for logout"); console.warn("No supported compositor detected for logout");
} }
function suspend() { function suspend() {
suspendProcess.running = true; suspendProcess.running = true;
} }
function shutdown() { function shutdown() {
shutdownProcess.running = true; shutdownProcess.running = true;
} }
function reboot() { function reboot() {
rebootProcess.running = true; rebootProcess.running = true;
} }
function updateSystemInfo() { function updateSystemInfo() {
uptimeProcess.running = true; uptimeProcess.running = true;
} }
width: 440 * Theme.scale(Screen)
height: 80 * Theme.scale(Screen)
color: "transparent" color: "transparent"
// anchors.horizontalCenterOffset: -2 anchors.horizontalCenterOffset: -2
onPanelVisibleChanged: { onPanelVisibleChanged: {
if (panelVisible) if (panelVisible)
updateSystemInfo(); updateSystemInfo();
} }
Component.onCompleted: { Component.onCompleted: {
uptimeProcess.running = true; uptimeProcess.running = true;
} }
Rectangle { Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.scale(Screen)
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 18 * Theme.scale(screen) anchors.margins: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
Rectangle { Rectangle {
width: 48 * Theme.scale(screen) width: 48 * Theme.scale(Screen)
height: 48 * Theme.scale(screen) height: 48 * Theme.scale(Screen)
radius: 24 radius: 24 * Theme.scale(Screen)
color: Theme.accentPrimary color: Theme.accentPrimary
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
radius: 24 radius: 24 * Theme.scale(Screen)
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 2 * Theme.scale(screen) border.width: 2 * Theme.scale(Screen)
z: 2 z: 2
} }
Avatar { Avatar {
} }
} }
ColumnLayout { ColumnLayout {
spacing: 4 * Theme.scale(screen) spacing: 4 * Theme.scale(Screen)
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: Quickshell.env("USER") text: Quickshell.env("USER")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 * Theme.scale(screen) font.pixelSize: 16 * Theme.scale(Screen)
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "System Uptime: " + uptimeText text: "System Uptime: " + uptimeText
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 * Theme.scale(screen) font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary color: Theme.textSecondary
} }
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
Rectangle { Rectangle {
id: settingsButton id: settingsButton
width: 32 * Theme.scale(screen) width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(screen) height: 32 * Theme.scale(Screen)
radius: 16 radius: 16 * Theme.scale(Screen)
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent" color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(Screen)
Text { Text {
anchors.centerIn: parent anchors.fill: parent
anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen)
text: "settings" text: "settings"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(screen) font.pixelSize: 16 * Theme.scale(Screen)
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
font.variableAxes: { horizontalAlignment: Text.AlignHCenter
"wght": (Font.Normal + Font.Bold) / 2 verticalAlignment: Text.AlignVCenter
}
} }
MouseArea { MouseArea {
id: settingsButtonArea id: settingsButtonArea
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings) if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
settingsModal.openSettings(); settingsModal.openSettings();
} }
} }
StyledTooltip { StyledTooltip {
id: settingsTooltip id: settingsTooltip
text: "Settings" text: "Settings"
targetItem: settingsButton targetItem: settingsButton
tooltipVisible: settingsButtonArea.containsMouse tooltipVisible: settingsButtonArea.containsMouse
} }
} }
Rectangle { Rectangle {
id: systemButton id: systemButton
width: 32 * Theme.scale(screen) width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(screen) height: 32 * Theme.scale(Screen)
radius: 16 radius: width / 2
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent" color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(Screen)
Text { Text {
anchors.centerIn: parent anchors.fill: parent
anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen)
text: "power_settings_new" text: "power_settings_new"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(screen) font.pixelSize: 16 * Theme.scale(Screen)
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
font.variableAxes: { horizontalAlignment: Text.AlignHCenter
"wght": (Font.Normal + Font.Bold) / 2 verticalAlignment: Text.AlignVCenter
}
} }
MouseArea { MouseArea {
id: systemButtonArea id: systemButtonArea
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
@ -193,84 +191,98 @@ Rectangle {
systemMenu.visible = !systemMenu.visible; systemMenu.visible = !systemMenu.visible;
} }
} }
StyledTooltip { StyledTooltip {
id: systemTooltip id: systemTooltip
text: "Power Menu" text: "Power Menu"
targetItem: systemButton targetItem: systemButton
tooltipVisible: systemButtonArea.containsMouse tooltipVisible: systemButtonArea.containsMouse
} }
} }
} }
} }
} }
PanelWithOverlay { PanelWithOverlay {
id: systemMenu id: systemMenu
anchors.top: systemButton.bottom anchors.top: systemButton.bottom
anchors.right: systemButton.right anchors.right: systemButton.right
Rectangle { Rectangle {
width: 160 * Theme.scale(screen) width: 160 * Theme.scale(Screen)
height: 220 * Theme.scale(screen) height: 220 * Theme.scale(Screen)
color: Theme.surface color: Theme.surface
radius: 8 radius: 8 * Theme.scale(Screen)
border.color: Theme.outline border.color: Theme.outline
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(Screen)
visible: true visible: true
z: 9999 z: 9999
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 32 * Theme.scale(screen) anchors.rightMargin: 32 * Theme.scale(Screen)
anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(screen) anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(Screen)
// Prevent closing when clicking in the panel bg // Prevent closing when clicking in the panel bg
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
} }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 8 * Theme.scale(screen) anchors.margins: 8 * Theme.scale(Screen)
spacing: 4 * Theme.scale(screen) spacing: 4 * Theme.scale(Screen)
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.scale(screen) Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 radius: 6 * Theme.scale(Screen)
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { Item {
anchors.fill: parent anchors.left: parent.left
anchors.margins: 12 * Theme.scale(screen) anchors.right: parent.right
spacing: 8 * Theme.scale(screen) anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 12 * Theme.scale(Screen)
Text { anchors.rightMargin: 12 * Theme.scale(Screen)
text: "lock_outline"
font.family: "Material Symbols Outlined" Row {
font.pixelSize: 16 * Theme.scale(screen) id: lockRow
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary spacing: 8 * Theme.scale(Screen)
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
text: "lock_outline"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
Text {
text: "Lock Screen"
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.scale(Screen)
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
} }
Text {
text: "Lock Screen"
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.scale(screen)
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
} }
MouseArea { MouseArea {
id: lockButtonArea id: lockButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@ -279,39 +291,53 @@ Rectangle {
systemMenu.visible = false; systemMenu.visible = false;
} }
} }
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.scale(screen) Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 radius: 6 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { Item {
anchors.fill: parent anchors.left: parent.left
anchors.margins: 12 * Theme.scale(screen) anchors.right: parent.right
spacing: 8 * Theme.scale(screen) anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 12 * Theme.scale(Screen)
Text { anchors.rightMargin: 12 * Theme.scale(Screen)
text: "bedtime"
font.family: "Material Symbols Outlined" Row {
font.pixelSize: 16 * Theme.scale(screen) id: suspendRow
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary spacing: 8 * Theme.scale(Screen)
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
text: "bedtime"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
Text {
text: "Suspend"
font.pixelSize: 14 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
} }
Text {
text: "Suspend"
font.pixelSize: 14 * Theme.scale(screen)
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
} }
MouseArea { MouseArea {
id: suspendButtonArea id: suspendButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@ -320,40 +346,54 @@ Rectangle {
systemMenu.visible = false; systemMenu.visible = false;
} }
} }
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.scale(screen) Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 radius: 6 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { Item {
anchors.fill: parent anchors.left: parent.left
anchors.margins: 12 * Theme.scale(screen) anchors.right: parent.right
spacing: 8 * Theme.scale(screen) anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 12 * Theme.scale(Screen)
Text { anchors.rightMargin: 12 * Theme.scale(Screen)
text: "refresh"
font.family: "Material Symbols Outlined" Row {
font.pixelSize: 16 * Theme.scale(screen) id: rebootRow
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary spacing: 8 * Theme.scale(Screen)
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
Text {
text: "Reboot"
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
} }
Text {
text: "Reboot"
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.scale(screen)
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
} }
MouseArea { MouseArea {
id: rebootButtonArea id: rebootButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@ -362,39 +402,53 @@ Rectangle {
systemMenu.visible = false; systemMenu.visible = false;
} }
} }
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.scale(screen) Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 radius: 6 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { Item {
anchors.fill: parent anchors.left: parent.left
anchors.margins: 12 * Theme.scale(screen) anchors.right: parent.right
spacing: 8 * Theme.scale(screen) anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 12 * Theme.scale(Screen)
Text { anchors.rightMargin: 12 * Theme.scale(Screen)
text: "exit_to_app"
font.family: "Material Symbols Outlined" Row {
font.pixelSize: 16 * Theme.scale(screen) id: logoutRow
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary spacing: 8 * Theme.scale(Screen)
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
text: "exit_to_app"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
Text {
text: "Logout"
font.pixelSize: 14 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
} }
Text {
text: "Logout"
font.pixelSize: 14 * Theme.scale(screen)
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
} }
MouseArea { MouseArea {
id: logoutButtonArea id: logoutButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@ -403,39 +457,53 @@ Rectangle {
systemMenu.visible = false; systemMenu.visible = false;
} }
} }
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.scale(screen) Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 radius: 6 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { Item {
anchors.fill: parent anchors.left: parent.left
anchors.margins: 12 * Theme.scale(screen) anchors.right: parent.right
spacing: 8 * Theme.scale(screen) anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 12 * Theme.scale(Screen)
Text { anchors.rightMargin: 12 * Theme.scale(Screen)
text: "power_settings_new"
font.family: "Material Symbols Outlined" Row {
font.pixelSize: 16 * Theme.scale(screen) id: shutdownRow
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary spacing: 8 * Theme.scale(Screen)
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
Text {
text: "Shutdown"
font.pixelSize: 14 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1 * Theme.scale(Screen)
}
} }
Text {
text: "Shutdown"
font.pixelSize: 14 * Theme.scale(screen)
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
} }
MouseArea { MouseArea {
id: shutdownButtonArea id: shutdownButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@ -444,77 +512,81 @@ Rectangle {
systemMenu.visible = false; systemMenu.visible = false;
} }
} }
} }
} }
} }
} }
Process { Process {
id: uptimeProcess id: uptimeProcess
command: ["sh", "-c", "uptime | awk -F 'up ' '{print $2}' | awk -F ',' '{print $1}' | xargs"] command: ["sh", "-c", "uptime | awk -F 'up ' '{print $2}' | awk -F ',' '{print $1}' | xargs"]
running: false running: false
stdout: StdioCollector { stdout: StdioCollector {
onStreamFinished: { onStreamFinished: {
uptimeText = this.text.trim(); uptimeText = this.text.trim();
uptimeProcess.running = false; uptimeProcess.running = false;
} }
} }
} }
Process { Process {
id: shutdownProcess id: shutdownProcess
command: ["shutdown", "-h", "now"] command: ["shutdown", "-h", "now"]
running: false running: false
} }
Process { Process {
id: rebootProcess id: rebootProcess
command: ["reboot"] command: ["reboot"]
running: false running: false
} }
Process { Process {
id: suspendProcess id: suspendProcess
command: ["systemctl", "suspend"] command: ["systemctl", "suspend"]
running: false running: false
} }
Process { Process {
id: logoutProcessNiri id: logoutProcessNiri
command: ["niri", "msg", "action", "quit", "--skip-confirmation"] command: ["niri", "msg", "action", "quit", "--skip-confirmation"]
running: false running: false
} }
Process { Process {
id: logoutProcessHyprland id: logoutProcessHyprland
command: ["hyprctl", "dispatch", "exit"] command: ["hyprctl", "dispatch", "exit"]
running: false running: false
} }
Process { Process {
id: logoutProcess id: logoutProcess
command: ["loginctl", "terminate-user", Quickshell.env("USER")] command: ["loginctl", "terminate-user", Quickshell.env("USER")]
running: false running: false
} }
Timer { Timer {
interval: 60000 interval: 60000
repeat: true repeat: true
running: panelVisible running: panelVisible
onTriggered: updateSystemInfo() onTriggered: updateSystemInfo()
} }
} LockScreen {
id: lockScreen
}
}

View file

@ -2,19 +2,23 @@ import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Controls import QtQuick.Controls
import qs.Settings import qs.Settings
import qs.Components
import "../../Helpers/Weather.js" as WeatherHelper import "../../Helpers/Weather.js" as WeatherHelper
Rectangle { Rectangle {
id: weatherRoot id: weatherRoot
width: 440 * Theme.scale(Screen)
height: 180 * Theme.scale(Screen)
color: "transparent" color: "transparent"
anchors.horizontalCenterOffset: -2
property string city: Settings.settings.weatherCity !== undefined ? Settings.settings.weatherCity : "" property string city: Settings.settings.weatherCity !== undefined ? Settings.settings.weatherCity : ""
property var weatherData: null property var weatherData: null
property string errorString: "" property string errorString: ""
property bool isVisible: false property bool isVisible: false
property int lastFetchTime: 0 property int lastFetchTime: 0
property bool isLoading: false property bool isLoading: false
// Auto-refetch weather when city changes // Auto-refetch weather when city changes
Connections { Connections {
target: Settings.settings target: Settings.settings
@ -26,31 +30,31 @@ Rectangle {
} }
} }
} }
Component.onCompleted: { Component.onCompleted: {
if (isVisible) { if (isVisible) {
fetchCityWeather() fetchCityWeather()
} }
} }
function fetchCityWeather() { function fetchCityWeather() {
if (!city || city.trim() === "") { if (!city || city.trim() === "") {
errorString = "No city configured"; errorString = "No city configured";
return; return;
} }
// Check if we should fetch new data (avoid fetching too frequently) // Check if we should fetch new data (avoid fetching too frequently)
var currentTime = Date.now(); var currentTime = Date.now();
var timeSinceLastFetch = currentTime - lastFetchTime; var timeSinceLastFetch = currentTime - lastFetchTime;
// Only skip if we have recent data AND lastFetchTime is not 0 (initial state) // Only skip if we have recent data AND lastFetchTime is not 0 (initial state)
if (lastFetchTime > 0 && timeSinceLastFetch < 60000) { // 1 minute if (lastFetchTime > 0 && timeSinceLastFetch < 60000) { // 1 minute
return; // Skip if last fetch was less than 1 minute ago return; // Skip if last fetch was less than 1 minute ago
} }
isLoading = true; isLoading = true;
errorString = ""; errorString = "";
WeatherHelper.fetchCityWeather(city, WeatherHelper.fetchCityWeather(city,
function(result) { function(result) {
weatherData = result.weather; weatherData = result.weather;
@ -64,138 +68,139 @@ Rectangle {
} }
); );
} }
function startWeatherFetch() { function startWeatherFetch() {
isVisible = true isVisible = true
// Force refresh when panel opens, regardless of time check // Force refresh when panel opens, regardless of time check
lastFetchTime = 0; lastFetchTime = 0;
fetchCityWeather(); fetchCityWeather();
} }
function stopWeatherFetch() { function stopWeatherFetch() {
isVisible = false isVisible = false
} }
Rectangle { Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.scale(Screen)
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 18 * Theme.scale(screen) anchors.margins: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
RowLayout { RowLayout {
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true Layout.fillWidth: true
RowLayout { RowLayout {
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
Layout.preferredWidth: 140 * Theme.scale(screen) Layout.preferredWidth: 140 * Theme.scale(Screen)
Spinner {
id: loadingSpinner
running: isLoading
color: Theme.accentPrimary
size: 28 * Theme.scale(Screen)
Layout.alignment: Qt.AlignVCenter
visible: isLoading
}
Text { Text {
id: weatherIcon id: weatherIcon
text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud") visible: !isLoading
text: weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 * Theme.scale(screen) font.pixelSize: 28 * Theme.scale(Screen)
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: isLoading ? Theme.accentPrimary : Theme.accentPrimary color: Theme.accentPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
// Add rotation animation for loading state
RotationAnimation on rotation {
running: isLoading
from: 0
to: 360
duration: 1000
loops: Animation.Infinite
}
} }
ColumnLayout { ColumnLayout {
spacing: 2 * Theme.scale(screen) spacing: 2 * Theme.scale(Screen)
RowLayout { RowLayout {
spacing: 4 * Theme.scale(screen) spacing: 4 * Theme.scale(Screen)
Text { Text {
text: city text: city
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.scale(screen) font.pixelSize: 14 * Theme.scale(Screen)
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : "" text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : ""
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 10 * Theme.scale(screen) font.pixelSize: 10 * Theme.scale(Screen)
color: Theme.textSecondary color: Theme.textSecondary
leftPadding: 2 * Theme.scale(screen) leftPadding: 2 * Theme.scale(Screen)
} }
} }
Text { Text {
text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C") text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 24 * Theme.scale(screen) font.pixelSize: 24 * Theme.scale(Screen)
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
} }
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
} }
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 1 // Don't scale divider height: 1 * Theme.scale(Screen)
color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12) color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12)
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 2 * Theme.scale(screen) Layout.topMargin: 2 * Theme.scale(Screen)
Layout.bottomMargin: 2 * Theme.scale(screen) Layout.bottomMargin: 2 * Theme.scale(Screen)
} }
RowLayout { RowLayout {
spacing: 12 * Theme.scale(screen) spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
visible: weatherData && weatherData.daily && weatherData.daily.time visible: weatherData && weatherData.daily && weatherData.daily.time
Repeater { Repeater {
model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0 model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
delegate: ColumnLayout { delegate: ColumnLayout {
spacing: 2 * Theme.scale(screen) spacing: 2 * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Text { Text {
text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd") text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 * Theme.scale(screen) font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary color: Theme.textSecondary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
Text { Text {
text: materialSymbolForCode(weatherData.daily.weathercode[index]) text: materialSymbolForCode(weatherData.daily.weathercode[index])
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.scale(screen) font.pixelSize: 22 * Theme.scale(Screen)
color: Theme.accentPrimary color: Theme.accentPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
Text { Text {
text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°") text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 * Theme.scale(screen) font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textPrimary color: Theme.textPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -203,21 +208,21 @@ Rectangle {
} }
} }
} }
Text { Text {
text: errorString text: errorString
color: Theme.error color: Theme.error
visible: errorString !== "" visible: errorString !== ""
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 10 * Theme.scale(screen) font.pixelSize: 10 * Theme.scale(Screen)
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
} }
} }
function materialSymbolForCode(code) { function materialSymbolForCode(code) {
if (code === 0) return "sunny"; if (code === 0) return "sunny";
if (code === 1 || code === 2) return "partly_cloudy_day"; if (code === 1 || code === 2) return "partly_cloudy_day";