From f2e8d8a1448ca225f273aa87529fd783697a8045 Mon Sep 17 00:00:00 2001 From: Hannes Date: Thu, 27 Aug 2026 21:50:50 +0200 Subject: [PATCH] feat: add NotificationButton widget to bar to display notifications and work NotificationButton to a usable state --- modules/bar/Bar.qml | 1 + modules/bar/widgets/NotificationButton.qml | 41 ++++ modules/notification/Notification.qml | 6 +- modules/notification/NotificationBody.qml | 204 +++++++++++++++--- .../notificationServer/NotificationServer.qml | 10 + modules/wlogout/WLogout.qml | 2 +- 6 files changed, 230 insertions(+), 34 deletions(-) create mode 100644 modules/bar/widgets/NotificationButton.qml diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml index 7293e3f..858a3af 100644 --- a/modules/bar/Bar.qml +++ b/modules/bar/Bar.qml @@ -73,6 +73,7 @@ PanelWindow { // TODO: Add bluetooth, network, audio, power, maybe HW monitor Tray{} + NotificationButton {} // AudioSource{} AudioSink{} Battery{} diff --git a/modules/bar/widgets/NotificationButton.qml b/modules/bar/widgets/NotificationButton.qml new file mode 100644 index 0000000..2be5656 --- /dev/null +++ b/modules/bar/widgets/NotificationButton.qml @@ -0,0 +1,41 @@ +import QtQuick +import Quickshell +import Quickshell.Widgets +import Quickshell.Io +import "../../notification/notificationServer/" +import "../../../config" + +MouseArea { + id: notificationButton + width: Math.max(bar.height, notificationText.width + Config.spacing) + height: bar.height + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onClicked: { + menuProc.running = true + } + + Rectangle { + anchors.fill: parent + color: "transparent" + radius: Config.radius_fun(notificationButton.height) + + Text { + id: notificationText + anchors.centerIn: parent + text: Quickshell.iconPath("discord") + // text: "󰂚" + font.pixelSize: Config.bigIconSize(notificationButton.height) + font.family: Config.font + color: Colors.secondaryContainer_fg + } + + Image{ + id: iconImage + source: Quickshell.iconPath("discord") + width: Config.bigIconSize(notificationButton.height) + height: Config.bigIconSize(notificationButton.height) + } + } +} \ No newline at end of file diff --git a/modules/notification/Notification.qml b/modules/notification/Notification.qml index b444549..d69c515 100644 --- a/modules/notification/Notification.qml +++ b/modules/notification/Notification.qml @@ -58,9 +58,11 @@ PanelWindow { notification: notificationData - onDismissed: function(notification) { + onDismissed: function(notification, dismiss) { notificationListModel.remove(index) - notification.dismiss() + if (dismiss) { + notification.dismiss() + } console.log("[Notification]: Dismissed Notification:", notification.appName, notification.id, notification.summary, notification.body) } } diff --git a/modules/notification/NotificationBody.qml b/modules/notification/NotificationBody.qml index 9be6227..77fb6bc 100644 --- a/modules/notification/NotificationBody.qml +++ b/modules/notification/NotificationBody.qml @@ -1,17 +1,20 @@ import QtQuick import Quickshell import "../../config" +import QtQuick.Layouts Rectangle { id: root + //TODO: urgency, expireTimeoutText, ... + required property var notification property real duration: 5000 // Expected in milliseconds (e.g., 5000 for 5s) - signal dismissed(var notification) + signal dismissed(var notification, bool dismiss) - implicitWidth: content.implicitWidth + 2*18 - implicitHeight: content.implicitHeight + 18 + progressBar.height + implicitWidth: iconColumn.width+contentColumn.width+2*Config.spacing + implicitHeight: Math.max(iconColumn.height, contentColumn.height)+Config.spacing+Config.spacing color: Qt.alpha(Colors.primaryContainer, 0.75) border.width: Config.border_width @@ -23,40 +26,179 @@ Rectangle { hoverEnabled: true onClicked: { - dismissed(root.notification) + dismissed(root.notification, true) } - Column { - id: content + Row { + id: contentRow anchors.fill: parent anchors.margins: 10 - spacing: 5 + spacing: Config.spacing - Text { - id: appNameText - text: root.notification?.id + ": " + (root.notification?.appName ?? "") - font.family: Config.font - font.pixelSize: 18 - color: Colors.primary - elide: Text.ElideRight + // Left side: icon + icon information + Column { + id: iconColumn + height: Math.max(iconImage.height+summaryText.height+3*Config.spacing, contentColumn.height)+Config.spacing + width: Math.max(128, summaryText.implicitWidth) + Config.spacing + spacing: Config.spacing + + Image { + id: iconImage + + width: 128 + height: 128 + + source: Quickshell.iconPath(root.notification?.appIcon ?? "") + fillMode: Image.PreserveAspectFit + asynchronous: true + } + + Text { + id: summaryText + + Layout.fillWidth: true + + text: root.notification?.summary ?? "" + font.family: Config.font + font.pixelSize: 22 + color: Colors.primary + + wrapMode: Text.Wrap + horizontalAlignment: Text.AlignHCenter + } } - Text { - id: summaryText - text: root.notification?.summary ?? "" - font.family: Config.font - font.pixelSize: 22 - color: Colors.primary - wrapMode: Text.Wrap - } + // Right side: notification information + Column { + id: contentColumn + width: bodyText.width + Config.spacing + spacing: Config.spacing - Text { - id: bodyText - text: root.notification?.body ?? "" - font.family: Config.font - font.pixelSize: 16 - color: Colors.primary - wrapMode: Text.Wrap + Text { + id: bodyText + text: root.notification?.body ?? "" + + width: Math.min(implicitWidth, iconColumn.width*2) + font.family: Config.font + font.pixelSize: 22 + color: Colors.primary + wrapMode: Text.Wrap + } + + // Text { + // id: appNameText + // width: parent.width + // text: root.notification?.id + ": " + + // (root.notification?.appName ?? "") + // font.family: Config.font + // font.pixelSize: 18 + // color: Colors.primary + // elide: Text.ElideRight + // } + + // Text { + // id: inlineReplyPlaceholderText + // width: parent.width + // text: "inlineReplyPlaceholder: " + (root.notification?.inlineReplyPlaceholder ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: iconPathText + // width: parent.width + // text: "iconPath: " + (root.notification?.iconPath ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: expireTimeoutText + // width: parent.width + // text: "expireTimeout: " + + // (root.notification?.expireTimeout ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: residentText + // width: parent.width + // text: "resident: " + (root.notification?.resident ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: urgencyText + // width: parent.width + // text: "urgency: " + (root.notification?.urgency ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: desktopEntryText + // width: parent.width + // text: "desktopEntry: " + + // (root.notification?.desktopEntry ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: hintsText + // width: parent.width + // text: "hints: " + (root.notification?.hints ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: transientText + // width: parent.width + // text: "transient: " + (root.notification?.transient ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: hasInlineReplyText + // width: parent.width + // text: "hasInlineReply: " + + // (root.notification?.hasInlineReply ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } + + // Text { + // id: hasActionIconsText + // width: parent.width + // text: "hasActionIcons: " + + // (root.notification?.hasActionIcons ?? "") + // font.family: Config.font + // font.pixelSize: 16 + // color: Colors.primary + // wrapMode: Text.Wrap + // } } } } @@ -66,7 +208,7 @@ Rectangle { id: progressBar anchors.bottom: parent.bottom anchors.left: parent.left - height: 10 + height: Math.min(10, 0.1 * root.height) color: Colors.primary property real progress: 1.0 @@ -81,7 +223,7 @@ Rectangle { duration: root.duration paused: mouseArea.containsMouse - onFinished: root.dismissed(root.notification) + onFinished: root.dismissed(root.notification, false) } } diff --git a/modules/notification/notificationServer/NotificationServer.qml b/modules/notification/notificationServer/NotificationServer.qml index ee3100a..e807f7b 100644 --- a/modules/notification/notificationServer/NotificationServer.qml +++ b/modules/notification/notificationServer/NotificationServer.qml @@ -34,6 +34,16 @@ Item { NotificationServer { id: notificationServer + + actionsSupported: true + bodyHyperlinksSupported: true + bodyImagesSupported: true + actionIconsSupported: true + imageSupported: true + persistenceSupported: true + bodyMarkupSupported: true + inlineReplySupported: true + onNotification: function(notification) { // if(notification.lastGeneration){ // console.log( diff --git a/modules/wlogout/WLogout.qml b/modules/wlogout/WLogout.qml index d3f2cc4..b1800aa 100644 --- a/modules/wlogout/WLogout.qml +++ b/modules/wlogout/WLogout.qml @@ -62,7 +62,7 @@ Variants { MouseArea { anchors.fill: parent onClicked: { - console.log("clicked ???, closing Wallpaper Picker") + console.log("clicked Background, closing Wallpaper Picker") wlogoutLoader.active = false } GridLayout {