no mako needed, implemented a simple notification system in qs

1 files changed, 121 insertions, 0 deletions

diff --git a/quickshell/NotificationOverlay.qml b/quickshell/NotificationOverlay.qml
new file mode 100644
index 0000000..3a0dfed
--- /dev/null
+++ b/quickshell/NotificationOverlay.qml
@@ -0,0 +1,121 @@
+import Quickshell
+import Quickshell.Services.Notifications
+import Quickshell.Wayland
+import QtQuick
+
+PanelWindow {
+  id: root
+
+  anchors {
+    top: true
+    left: true
+  }
+
+  margins {
+    top: 15
+    left: 15
+  }
+
+  implicitWidth: 360
+  implicitHeight: notificationColumn.implicitHeight
+
+  color: "transparent"
+  exclusiveZone: 0
+
+  WlrLayershell.layer: WlrLayer.Overlay
+
+  NotificationServer {
+    id: server
+
+    bodySupported: true
+    imageSupported: true
+    actionsSupported: true
+
+    onNotification: notification => {
+      notification.tracked = true
+    }
+  }
+
+  Column {
+    id: notificationColumn
+
+    spacing: 10
+
+    Repeater {
+      model: server.trackedNotifications
+
+      Rectangle {
+        id: notification
+
+        width: 360
+        height: Math.max(content.implicitHeight + 24, 80)
+
+        color: "#000000"
+
+        border.width: 1
+        border.color: "#404040"
+
+        opacity: 0
+
+        Behavior on y {
+          NumberAnimation {
+            duration: 200
+            easing.type: Easing.OutCubic
+          }
+        }
+
+        Behavior on opacity {
+          NumberAnimation {
+            duration: 150
+          }
+        }
+
+        Component.onCompleted: opacity = 0.8
+
+        Timer {
+          interval: 2000
+          running: true
+          repeat: false
+
+          onTriggered: {
+            notification.opacity = 0
+            destroyTimer.start()
+          }
+        }
+
+        Timer {
+          id: destroyTimer
+
+          interval: 150
+          running: false
+          repeat: false
+
+          onTriggered: {
+            modelData.dismiss()
+          }
+        }
+
+        Column {
+          id: content
+
+          anchors.fill: parent
+          anchors.margins: 12
+
+          spacing: 4
+
+          Text {
+            text: modelData.summary
+            color: "white"
+            font.bold: true
+          }
+
+          Text {
+            text: modelData.body
+            color: "white"
+            wrapMode: Text.Wrap
+          }
+        }
+      }
+    }
+  }
+}