Notifications WIP

Widgets/NotificationPopup.qml

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,42 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+import Quickshell.Widgets
+import qs.Services
+import qs.Widgets
+
+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
+        }
+    }
+
+    ListView {
+        anchors.fill: parent
+        model: NotificationService.trackedNotifications.values
+        delegate: contactDelegate
+        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
+        focus: true
+    }
+}