From 583b0588c26caddd6c0000debf48b2241bcafddf Mon Sep 17 00:00:00 2001 From: rope Date: Thu, 11 Jun 2026 14:36:52 +0100 Subject: [PATCH] quickshell: card-style calendar/weather panes instead of separators Co-Authored-By: Claude Fable 5 --- settings/quickshell.nix | 310 +++++++++++++++++++++------------------- 1 file changed, 162 insertions(+), 148 deletions(-) diff --git a/settings/quickshell.nix b/settings/quickshell.nix index a503160..7d1ae5e 100644 --- a/settings/quickshell.nix +++ b/settings/quickshell.nix @@ -1801,174 +1801,188 @@ in NumberAnimation { duration: 150; easing.type: Easing.OutCubic } } - // ── Left pane: calendar + weather ── + // ── Left pane: calendar card + weather card ── Column { id: calLeftCol - width: 7 * 32 + width: 7 * 32 + 16 spacing: 8 - // Month header: ‹ [Month Year] › — label click jumps to today - Item { + // Calendar card + Rectangle { width: parent.width - height: 28 + height: calCardCol.height + 16 + radius: 8 + color: Theme.base01 - Rectangle { - width: 28; height: 28; radius: 6 - anchors.left: parent.left - color: calPrevMa.containsMouse ? Theme.base02 : "transparent" - Text { - anchors.centerIn: parent - text: "\u{f0141}" - color: Theme.base05 - font.family: Theme.fontFamily - font.pixelSize: 16 - } - MouseArea { - id: calPrevMa - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: calPopup.shiftMonth(-1) - } - } + Column { + id: calCardCol + anchors.top: parent.top + anchors.topMargin: 8 + anchors.horizontalCenter: parent.horizontalCenter + width: 7 * 32 + spacing: 8 - Text { - anchors.centerIn: parent - text: new Date(calPopup.viewYear, calPopup.viewMonth, 1).toLocaleDateString(Qt.locale(), "MMMM yyyy") - color: Theme.base05 - font.family: Theme.fontFamily - font.pixelSize: 14 - font.weight: Font.Medium - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: calPopup.resetView() - } - } + // Month header: ‹ [Month Year] › — label click jumps to today + Item { + width: parent.width + height: 28 - Rectangle { - width: 28; height: 28; radius: 6 - anchors.right: parent.right - color: calNextMa.containsMouse ? Theme.base02 : "transparent" - Text { - anchors.centerIn: parent - text: "\u{f0142}" - color: Theme.base05 - font.family: Theme.fontFamily - font.pixelSize: 16 - } - MouseArea { - id: calNextMa - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: calPopup.shiftMonth(1) - } - } - } - - Row { - spacing: 0 - Repeater { - model: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] - Text { - required property var modelData - width: 32 - horizontalAlignment: Text.AlignHCenter - text: modelData - color: Theme.base04 - font.family: Theme.fontFamily - font.pixelSize: 13 - } - } - } - - Grid { - columns: 7 - spacing: 0 - Repeater { - model: 42 - Rectangle { - required property int index - property int dayNum: { - let first = new Date(calPopup.viewYear, calPopup.viewMonth, 1); - let startDay = (first.getDay() + 6) % 7; - return index - startDay + 1; + Rectangle { + width: 28; height: 28; radius: 6 + anchors.left: parent.left + color: calPrevMa.containsMouse ? Theme.base02 : "transparent" + Text { + anchors.centerIn: parent + text: "\u{f0141}" + color: Theme.base05 + font.family: Theme.fontFamily + font.pixelSize: 16 + } + MouseArea { + id: calPrevMa + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: calPopup.shiftMonth(-1) + } } - property int daysInMonth: new Date(calPopup.viewYear, calPopup.viewMonth + 1, 0).getDate() - property bool isToday: dayNum === clockText.now.getDate() - && calPopup.viewMonth === clockText.now.getMonth() - && calPopup.viewYear === clockText.now.getFullYear() - width: 32 - height: 26 - radius: 4 - color: isToday ? Theme.base03 : "transparent" Text { anchors.centerIn: parent - text: parent.dayNum >= 1 && parent.dayNum <= parent.daysInMonth ? parent.dayNum.toString() : "" - color: parent.isToday ? Theme.base05 : Theme.base04 - font.family: Theme.fontFamily - font.pixelSize: 13 - } - } - } - } - - Rectangle { - width: parent.width - height: 1 - color: Theme.base02 - } - - // 7-day weather strip - Row { - width: parent.width - visible: calPopup.weatherDays.length > 0 - Repeater { - model: calPopup.weatherDays - Column { - required property var modelData - width: 32 - spacing: 2 - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: modelData.day - color: Theme.base04 - font.family: Theme.fontFamily - font.pixelSize: 10 - } - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: calPopup.weatherGlyph(modelData.code) - color: Theme.base0C - font.family: Theme.fontFamily - font.pixelSize: 14 - } - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: modelData.max + "°" + text: new Date(calPopup.viewYear, calPopup.viewMonth, 1).toLocaleDateString(Qt.locale(), "MMMM yyyy") color: Theme.base05 font.family: Theme.fontFamily - font.pixelSize: 10 + font.pixelSize: 14 + font.weight: Font.Medium + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: calPopup.resetView() + } } - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: modelData.min + "°" - color: Theme.base03 - font.family: Theme.fontFamily - font.pixelSize: 10 + + Rectangle { + width: 28; height: 28; radius: 6 + anchors.right: parent.right + color: calNextMa.containsMouse ? Theme.base02 : "transparent" + Text { + anchors.centerIn: parent + text: "\u{f0142}" + color: Theme.base05 + font.family: Theme.fontFamily + font.pixelSize: 16 + } + MouseArea { + id: calNextMa + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: calPopup.shiftMonth(1) + } + } + } + + Row { + spacing: 0 + Repeater { + model: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"] + Text { + required property var modelData + width: 32 + horizontalAlignment: Text.AlignHCenter + text: modelData + color: Theme.base04 + font.family: Theme.fontFamily + font.pixelSize: 13 + } + } + } + + Grid { + columns: 7 + spacing: 0 + Repeater { + model: 42 + Rectangle { + required property int index + property int dayNum: { + let first = new Date(calPopup.viewYear, calPopup.viewMonth, 1); + let startDay = (first.getDay() + 6) % 7; + return index - startDay + 1; + } + property int daysInMonth: new Date(calPopup.viewYear, calPopup.viewMonth + 1, 0).getDate() + property bool isToday: dayNum === clockText.now.getDate() + && calPopup.viewMonth === clockText.now.getMonth() + && calPopup.viewYear === clockText.now.getFullYear() + width: 32 + height: 26 + radius: 4 + color: isToday ? Theme.base03 : "transparent" + + Text { + anchors.centerIn: parent + text: parent.dayNum >= 1 && parent.dayNum <= parent.daysInMonth ? parent.dayNum.toString() : "" + color: parent.isToday ? Theme.base05 : Theme.base04 + font.family: Theme.fontFamily + font.pixelSize: 13 + } + } } } } } - } - // Vertical separator between panes - Rectangle { - width: 1 - height: Math.max(calLeftCol.height, calRightCol.height) - color: Theme.base02 + // Weather card + Rectangle { + width: parent.width + height: weatherRow.height + 16 + radius: 8 + color: Theme.base01 + visible: calPopup.weatherDays.length > 0 + + Row { + id: weatherRow + anchors.top: parent.top + anchors.topMargin: 8 + anchors.horizontalCenter: parent.horizontalCenter + Repeater { + model: calPopup.weatherDays + Column { + required property var modelData + width: 32 + spacing: 2 + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: modelData.day + color: Theme.base04 + font.family: Theme.fontFamily + font.pixelSize: 10 + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: calPopup.weatherGlyph(modelData.code) + color: Theme.base0C + font.family: Theme.fontFamily + font.pixelSize: 14 + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: modelData.max + "°" + color: Theme.base05 + font.family: Theme.fontFamily + font.pixelSize: 10 + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: modelData.min + "°" + color: Theme.base03 + font.family: Theme.fontFamily + font.pixelSize: 10 + } + } + } + } + } } // ── Right pane: media + notifications ──