Files
dotfiles/dot_config/quickshell/bar/popouts/WeatherPopout.qml
s0wlz (Matthias Puchstein) c5f7162ebb quickshell: add initial bar config with per-monitor workspaces
- Vertical bar on DP-2 with rounded-square pills throughout
- Per-monitor workspace groups sorted by screen x position, with
  Nerd Font icons for named workspaces and apex-neon red active indicator
- Bar layout: datetime+weather top, workspaces centered, gamemode+media+notif+system bottom
- Popouts anchor to triggering icon (top-right for datetime/weather, bottom-right for media/notif/system)
- Lock command switched from hyprlock to swaylock
- Hyprland blur/ignore_alpha layerrules for quickshell namespace

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-05 20:00:54 +02:00

154 lines
5.4 KiB
QML

import Quickshell
import QtQuick
import QtQuick.Layouts
import "../../shared" as Shared
Item {
id: root
implicitWidth: Shared.Theme.popoutWidth
implicitHeight: col.implicitHeight + Shared.Theme.popoutPadding * 2
PopoutBackground { anchors.fill: parent }
MouseArea { anchors.fill: parent }
ColumnLayout {
id: col
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.margins: Shared.Theme.popoutPadding
spacing: 6
// ─── Header ───
RowLayout {
Layout.fillWidth: true
spacing: 8
Text {
text: Shared.Weather.location
color: Shared.Theme.text
font.pixelSize: 18
font.family: Shared.Theme.fontFamily
font.bold: true
Layout.fillWidth: true
}
Text {
text: Shared.Weather.icon
color: Shared.Theme.peach
font.pixelSize: 24
font.family: Shared.Theme.iconFont
}
Text {
text: Shared.Weather.temp
color: Shared.Theme.peach
font.pixelSize: 18
font.family: Shared.Theme.fontFamily
font.bold: true
}
}
Text {
text: {
if (Shared.Weather.status === "error") return "Unable to fetch weather data";
if (Shared.Weather.status === "stale") return Shared.Weather.description + " · stale";
if (Shared.Weather.status === "loading") return "Loading…";
return Shared.Weather.description;
}
color: Shared.Weather.status === "error" ? Shared.Theme.danger
: Shared.Weather.status === "stale" ? Shared.Theme.warning
: Shared.Theme.overlay0
font.pixelSize: Shared.Theme.fontSmall
font.family: Shared.Theme.fontFamily
}
// ─── separator ───
Rectangle { Layout.fillWidth: true; height: 1; color: Shared.Theme.surface0; Layout.topMargin: 4; Layout.bottomMargin: 4 }
// ─── Conditions ───
ConditionRow { label: "Feels like"; value: Shared.Weather.feelsLike }
ConditionRow { label: "Humidity"; value: Shared.Weather.humidity }
ConditionRow { label: "Wind"; value: Shared.Weather.wind }
// ─── separator ───
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: 4
Layout.rightMargin: 4
Layout.topMargin: 2
Layout.bottomMargin: 6
height: 1
color: Shared.Theme.surface0
}
// ─── Forecast ───
Text {
text: "Forecast"
color: Shared.Theme.overlay0
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
font.bold: true
Layout.bottomMargin: 2
}
Repeater {
model: Shared.Weather.forecast
RowLayout {
required property var modelData
Layout.fillWidth: true
implicitHeight: 22
spacing: 8
Text {
text: modelData.day
color: Shared.Theme.overlay0
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
Layout.preferredWidth: 36
}
Text {
text: Shared.Weather.weatherIcon(modelData.code)
color: Shared.Theme.peach
font.pixelSize: 14
font.family: Shared.Theme.iconFont
}
Text {
text: modelData.desc
color: Shared.Theme.surface2
font.pixelSize: Shared.Theme.fontSmall
font.family: Shared.Theme.fontFamily
Layout.fillWidth: true
elide: Text.ElideRight
}
Text {
text: modelData.low + "°"
color: Shared.Theme.sky
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
horizontalAlignment: Text.AlignRight
Layout.preferredWidth: 28
}
Text {
text: modelData.high + "°"
color: Shared.Theme.peach
font.pixelSize: Shared.Theme.fontSize
font.family: Shared.Theme.fontFamily
font.bold: true
horizontalAlignment: Text.AlignRight
Layout.preferredWidth: 28
}
}
}
}
component ConditionRow: RowLayout {
property string label
property string value
Layout.fillWidth: true
implicitHeight: 22
spacing: 10
Text { text: parent.label; color: Shared.Theme.overlay0; font.pixelSize: Shared.Theme.fontSize; font.family: Shared.Theme.fontFamily; Layout.fillWidth: true }
Text { text: parent.value; color: Shared.Theme.text; font.pixelSize: Shared.Theme.fontSize; font.family: Shared.Theme.fontFamily; font.bold: true }
}
}