notification popups

.config/quickshell/modules/common/widgets/CircularProgress.qml

@@ -1,7 +1,8 @@
 // From https://github.com/rafzby/circular-progressbar
 // License: LGPL-3.0 - A copy can be found in `licenses` folder of repo
 // Modified so it looks like in Material 3: https://m3.material.io/components/progress-indicators/specs
-import QtQuick 2.9
+import QtQuick
+import "root:/modules/common"
 
 Item {
     id: root
@@ -9,15 +10,19 @@ Item {
     property int size: 30
     property int lineWidth: 2
     property real value: 0
-    property color primaryColor: "#70585D"
-    property color secondaryColor: "#FFF8F7"
+    property color primaryColor: Appearance.m3colors.m3onSecondaryContainer
+    property color secondaryColor: Appearance.m3colors.m3secondaryContainer
     property real gapAngle: Math.PI / 10
     property bool fill: false
     property int fillOverflow: 2
     property int animationDuration: 1000
+    property var easingType: Easing.OutCubic
 
     width: size
     height: size
+
+    signal animationFinished();
+
     onValueChanged: {
         canvas.degree = value * 360;
     }
@@ -62,12 +67,12 @@ Item {
 
             // Secondary
             ctx.beginPath();
-            ctx.arc(x, y, radius, progressAngle + gapAngle, startAngle - gapAngle);
+            ctx.arc(x, y, radius, progressAngle + gapAngle, fullAngle - gapAngle);
             ctx.strokeStyle = root.secondaryColor;
             ctx.stroke();
 
             // Primary (value indication)
-            var endAngle = (progressAngle === startAngle) ? startAngle + epsilon : progressAngle;
+            var endAngle = progressAngle + (value > 0 ? 0 : epsilon);
             ctx.beginPath();
             ctx.arc(x, y, radius, startAngle, endAngle);
             ctx.strokeStyle = root.primaryColor;
@@ -77,7 +82,7 @@ Item {
         Behavior on degree {
             NumberAnimation {
                 duration: root.animationDuration
-                easing.type: Easing.OutCubic
+                easing.type: root.easingType
             }
 
         }

.config/quickshell/modules/common/widgets/NotificationWidget.qml

@@ -13,13 +13,15 @@ import "./notification_utils.js" as NotificationUtils
 Item {
     id: root
     property var notificationObject
+    property bool popup: false
     property bool expanded: false
     property bool enableAnimation: true
     property int notificationListSpacing: 5
     property bool ready: false
+    property int defaultTimeoutValue: 5000
 
     Layout.fillWidth: true
-    clip: true
+    clip: !popup
 
     Process {
         id: closeSidebarProcess
@@ -42,6 +44,16 @@ Item {
 
     Component.onCompleted: {
         root.ready = true
+        if (popup) timeoutTimer.start()
+    }
+
+    Timer {
+        id: timeoutTimer
+        interval: notificationObject.expireTimeout ?? root.defaultTimeoutValue
+        repeat: false
+        onTriggered: {
+            Notifications.timeoutNotification(notificationObject.id);
+        }
     }
 
     function destroyWithAnimation(delay = 0) {
@@ -104,7 +116,7 @@ Item {
                 root.toggleExpanded()
         }
 
-        // Flick right to dismiss
+        // Flick right to dismiss/discard
         property real startX: 0
         property real dragStartThreshold: 10
         property real dragConfirmThreshold: 70
@@ -124,7 +136,7 @@ Item {
         }
         onDragStartedChanged: () => {
             // Prevent drag focus being shifted to parent flickable
-            root.parent.parent.parent.interactive = !dragStarted
+            if (root.parent.parent.parent.interactive !== undefined) root.parent.parent.parent.interactive = !dragStarted
             root.enableAnimation = !dragStarted
         }
         onReleased: (mouse) => {
@@ -196,6 +208,18 @@ Item {
                 }
             }
         }
+
+        DropShadow {
+            visible: popup
+            id: notificationShadow
+            anchors.fill: notificationBackground
+            source: notificationBackground
+            radius: 5
+            samples: radius * 2 + 1
+            color: Appearance.colors.colShadow
+            verticalOffset: 2
+            horizontalOffset: 0
+        }
     }
 
 
@@ -334,6 +358,21 @@ Item {
                                 elide: Text.ElideRight
                             }
 
+                            CircularProgress {
+                                id: notificationProgress
+                                visible: popup
+                                Layout.alignment: Qt.AlignVCenter
+                                lineWidth: 2
+                                value: popup ? 1 : 0
+                                size: 20
+                                animationDuration: notificationObject.expireTimeout ?? root.defaultTimeoutValue
+                                easingType: Easing.Linear
+
+                                Component.onCompleted: {
+                                    value = 0
+                                }
+                            }
+
                             StyledText { // Time
                                 id: notificationTimeText
                                 Layout.fillWidth: false