Notification backend usable

Widgets/NotificationPopup.qml

@@ -1,149 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Services.Notifications
-import Quickshell.Widgets
-
-PanelWindow {
-    id: notificationRoot
-
-    // Since the panel's screen is unset, it will be picked by the compositor
-    // when the window is created. Most compositors pick the current active monitor.
-
-    property bool hasImage: notification?.image ? true : false
-
-    property string image: {
-        if (hasImage) {
-            return notification.image;
-        }
-        if (notification?.appIcon === "") {
-            return "";
-        }
-            return Quickshell.iconPath(notification?.appIcon);
-    }
-    property var notification: null
-
-    signal dismissed()
-
-    anchors.top: true
-    margins.top: screen.height / 100
-    exclusiveZone: 0
-
-    implicitWidth: 400
-    implicitHeight: 100
-    color: "transparent"
-
-    // An empty click mask prevents the window from blocking mouse events.
-
-    Rectangle {
-        anchors.fill: parent
-        topLeftRadius: 100
-        bottomLeftRadius: 100
-        topRightRadius: 20
-        bottomRightRadius: 20
-        color: "#80000000"
-
-        MouseArea{
-            anchors.fill: parent
-            onClicked: {
-                notificationRoot.dismissed()
-            }
-        }
-
-        RowLayout {
-            anchors {
-                fill: parent
-            }
-
-            ClippingRectangle {
-
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-
-                implicitWidth: 100
-                implicitHeight: 100
-                visible: image? true : false
-
-                color: "grey"
-
-                radius: 100
-
-                IconImage {
-                    anchors.centerIn: parent
-                    implicitSize: 100
-                    source: notificationRoot.image
-                }
-            }
-
-            ColumnLayout {
-
-                Layout.leftMargin: 10
-                Layout.rightMargin: 10
-
-                Rectangle {
-                    Layout.fillWidth: true
-
-                    implicitHeight: 30
-                    radius: 20
-                    color: "#50ffffff"
-
-                    Rectangle {
-                        anchors {
-                            left: parent.left
-                            top: parent.top
-                            bottom: parent.bottom
-                        }
-
-                        implicitWidth: parent.width
-                        radius: parent.radius
-                        color: "white"
-
-                        Text {
-                            anchors.fill: parent
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            wrapMode: Text.WordWrap
-                            fontSizeMode: Text.Fit
-
-                            text: notificationRoot.notification.summary
-                        }
-                    }
-                }
-
-                Rectangle {
-                    Layout.fillWidth: true
-
-                    implicitHeight: 55
-                    radius: 20
-
-                    Rectangle {
-                        anchors {
-                            left: parent.left
-                            top: parent.top
-                            bottom: parent.bottom
-                        }
-
-                        implicitWidth: parent.width
-                        radius: parent.radius
-                        color: "white"
-
-                        Text {
-
-                            anchors.fill: parent
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            font.pixelSize: 24
-                            wrapMode: Text.WordWrap
-                            fontSizeMode: Text.Fit
-                            minimumPixelSize: 10
-                            elide: Text.ElideRight
-
-                            text: notificationRoot.notification.body
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

Widgets/NotificationWindow.qml

@@ -1,42 +1,41 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Layouts
 import Quickshell
-import Quickshell.Services.Notifications
-import Quickshell.Widgets
 import qs.Services
 import qs.Widgets
+import QtQuick.Window
 
 PopupWindow {
-
-    anchor.item:root
-    anchor.rect.y: parentWindow.height
-    implicitWidth: 400
-    implicitHeight: 1000
-    color: "white"
-    visible:true
-
     id: notificationRoot
 
-    // Since the panel's screen is unset, it will be picked by the compositor
-    // when the window is created. Most compositors pick the current active monitor.
-
-
-    // An empty click mask prevents the window from blocking mouse events.
-    Component {
-        id: contactDelegate
-        NotificationPopup {
-            id: myItem
-            required property string notification
-        }
-    }
+    anchor.item: root
+    anchor.rect.y: parentWindow?.height
+    implicitWidth: 400
+    implicitHeight: Math.min(listView.contentHeight, 900)
+    color: "white"
+    visible: true
 
     ListView {
+        id: listView
         anchors.fill: parent
         model: NotificationService.trackedNotifications.values
-        delegate: contactDelegate
-        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
-        focus: true
+        orientation: ListView.Vertical
+        verticalLayoutDirection: ListView.BottomToTop
+        clip: true
+        spacing: 5
+
+        delegate: NotificationWrapper {
+            required property var modelData
+            notification: modelData
+            width: ListView.width
+            onDismissed: {
+                if (notification && typeof notification.dismiss === "function") {
+                    notification.dismiss();
+                }
+            }
+        }
+        Component.onCompleted: positionViewAtEnd()
+        onModelChanged: positionViewAtEnd()
     }
 }

Widgets/NotificationWrapper.qml

@@ -0,0 +1,138 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+
+Rectangle {
+    id: notificationWrapper
+
+    signal dismissed
+
+    property bool hasImage: notification?.image ? true : false
+    property var notification: null
+
+    property string image: {
+        if (hasImage) {
+            return notification.image;
+        }
+        if (notification?.appIcon === "") {
+            return "";
+        }
+        return Quickshell.iconPath(notification?.appIcon);
+    }
+
+    implicitWidth: 400
+    implicitHeight: notifLayout.implicitHeight
+    topLeftRadius: image ? 100 : 20
+    bottomLeftRadius: image ? 100 : 20
+    topRightRadius: 20
+    bottomRightRadius: 20
+    color: "#80000000"
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            notificationWrapper.dismissed();
+            console.log("opa");
+        }
+    }
+
+    RowLayout {
+        id: notifLayout
+
+        anchors {
+            fill: parent
+        }
+
+        ClippingRectangle {
+
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+            implicitWidth: 100
+            implicitHeight: 100
+            visible: notificationWrapper.image ? true : false
+
+            color: "grey"
+
+            radius: 100
+
+            IconImage {
+                anchors.centerIn: parent
+                implicitSize: 100
+                source: notificationWrapper.image
+            }
+        }
+
+        ColumnLayout {
+
+            Layout.leftMargin: 10
+            Layout.rightMargin: 10
+
+            Rectangle {
+                Layout.fillWidth: true
+
+                implicitHeight: summaryText.implicitHeight + 10
+                radius: 20
+                color: "#50ffffff"
+
+                Rectangle {
+                    anchors {
+                        left: parent.left
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+
+                    implicitWidth: parent.width
+                    radius: parent.radius
+                    color: "white"
+
+                    Text {
+                        id: summaryText
+
+                        anchors.fill: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: 12
+                        wrapMode: Text.WordWrap
+                        textFormat: Text.MarkdownText
+
+                        text: notificationWrapper.notification.summary
+                    }
+                }
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+
+                implicitHeight: bodyText.implicitHeight + 10
+                radius: 20
+
+                Rectangle {
+                    anchors {
+                        left: parent.left
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+
+                    implicitWidth: parent.width
+                    radius: parent.radius
+                    color: "white"
+
+                    Text {
+                        id: bodyText
+
+                        anchors.fill: parent
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: 14
+                        wrapMode: Text.WordWrap
+                        textFormat: Text.MarkdownText
+
+                        text: notificationWrapper.notification.body
+                        onLinkActivated: link => Qt.openUrlExternally(link)
+                    }
+                }
+            }
+        }
+    }
+}