Tighten weather popup layout and add outside-click dismiss

PopupCard now uses HyprlandFocusGrab so any popup in the shell closes
when the user clicks outside it (or any other window in the listed set).
Single primitive — every widget gets it for free.

Weather popup rewritten:
- Smaller cloud glyph beside the city name on one row, both vertically
  centered.
- Condition string flows on its own line and wraps inside the popup.
- Refresh and wttr.in pills sit side by side instead of stacked, no
  more dead vertical space.
- contentHeight tracks the actual content height so the popup is no
  taller than it needs to be.
This commit is contained in:
Ryan Hughes
2026-05-14 02:21:48 -04:00
parent 5476b9d13b
commit 7425dd74ae
2 changed files with 66 additions and 41 deletions
@@ -1,5 +1,6 @@
import QtQuick
import Quickshell
import Quickshell.Hyprland
PopupWindow {
id: root
@@ -14,6 +15,7 @@ PopupWindow {
property bool open: false
readonly property var coordinatorKey: owner || root
readonly property var anchorWindow: anchorItem ? anchorItem.QsWindow.window : null
function closePopout() {
if (owner && "closePopout" in owner) owner.closePopout()
@@ -33,6 +35,15 @@ PopupWindow {
else if (bar.activePopout === coordinatorKey) bar.releasePopout(coordinatorKey)
}
// Outside-click dismissal via Hyprland's focus grab. While `active`, input
// is routed only to the listed windows; clicking anywhere else clears the
// grab and we close the popup.
HyprlandFocusGrab {
active: root.open
windows: root.anchorWindow ? [root, root.anchorWindow] : [root]
onCleared: root.closePopout()
}
anchor {
id: popupAnchor
window: anchorItem ? anchorItem.QsWindow.window : null
@@ -11,13 +11,25 @@ Item {
property var settings: ({})
property bool popupOpen: false
function closePopout() { popupOpen = false }
property string fullReport: ""
readonly property string label: bar ? bar.weatherText : ""
readonly property string klass: bar ? bar.weatherClass : ""
// Parse the wttr.in single-line report into location + condition halves so
// we can render them with different emphasis.
readonly property string reportLocation: {
var parts = String(fullReport || "").split(":")
return parts.length > 1 ? parts[0].trim() : ""
}
readonly property string reportCondition: {
var parts = String(fullReport || "").split(":")
if (parts.length > 1) return parts.slice(1).join(":").trim()
return String(fullReport || "").trim()
}
visible: label !== ""
implicitWidth: button.implicitWidth
implicitHeight: button.implicitHeight
@@ -26,7 +38,6 @@ Item {
if (!forecastProc.running) forecastProc.running = true
}
Process {
id: forecastProc
command: ["bash", "-lc", "curl -fsS --max-time 5 'wttr.in/?T0&format=%l:+%C+%t+%f+wind+%w+%h+humidity' 2>/dev/null"]
@@ -60,66 +71,69 @@ Item {
bar: root.bar
open: root.popupOpen
contentWidth: 320
contentHeight: column.implicitHeight + 28
contentHeight: card.implicitHeight + 28
Column {
id: column
id: card
anchors.fill: parent
spacing: 10
spacing: 12
Row {
spacing: 12
width: parent.width
spacing: 10
Text {
id: glyph
text: root.label || "—"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 28
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 24
anchors.verticalCenter: location.verticalCenter
}
Column {
Text {
id: location
text: root.reportLocation || "Weather"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 13
font.bold: true
anchors.verticalCenter: parent.verticalCenter
spacing: 2
Text {
text: "Weather"
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 12
font.bold: true
}
Text {
text: root.fullReport || "Fetching forecast…"
color: Qt.darker(root.bar.foreground, 1.2)
font.family: root.bar.fontFamily
font.pixelSize: 10
wrapMode: Text.WordWrap
width: 220
}
width: parent.width - glyph.width - parent.spacing
elide: Text.ElideRight
}
}
Common.PillButton {
Text {
text: root.reportCondition || "Fetching forecast…"
color: Qt.darker(root.bar.foreground, 1.2)
font.family: root.bar.fontFamily
font.pixelSize: 11
wrapMode: Text.WordWrap
width: parent.width
iconText: "󰑐"
text: "Refresh"
foreground: root.bar.foreground
horizontalPadding: 10
verticalPadding: 6
onClicked: root.refresh()
}
Common.PillButton {
Row {
width: parent.width
iconText: "󰏌"
text: "Open wttr.in"
foreground: root.bar.foreground
horizontalPadding: 10
verticalPadding: 6
onClicked: { root.bar.run("xdg-open https://wttr.in"); root.popupOpen = false }
spacing: 8
Common.PillButton {
iconText: "󰑐"
text: "Refresh"
foreground: root.bar.foreground
horizontalPadding: 12
verticalPadding: 6
onClicked: root.refresh()
}
Common.PillButton {
iconText: "󰏌"
text: "wttr.in"
foreground: root.bar.foreground
horizontalPadding: 12
verticalPadding: 6
onClicked: { root.bar.run("xdg-open https://wttr.in"); root.popupOpen = false }
}
}
}
}