quickshell/notifications: add timestamp

disabled for now, to be used with a panel (TODO)

Author: fufexan

home/services/quickshell/notifications/NotificationBox.qml

@@ -13,20 +13,19 @@ WrapperMouseArea {
     id: root
 
     acceptedButtons: Qt.AllButtons
+    hoverEnabled: true
 
     property Notification n
+    property real timestamp
+    property real elapsed: Date.now()
     property string image: (n.image == "" && n.appIcon != "") ? n.appIcon : n.image
     property bool hasAppIcon: !(n.image == "" && n.appIcon != "")
     property int indexPopup: -1
     property int indexAll: -1
     property real iconSize: 48
-    property bool expanded: false
 
-    function getImage(image: string): string {
-        if (image.search(/:\/\//) != -1)
-            return Qt.resolvedUrl(image);
-        return Quickshell.iconPath(image);
-    }
+    property bool showTime: false
+    property bool expanded: false
 
     onClicked: mouse => {
         if (mouse.button == Qt.LeftButton && root.n.actions != []) {
@@ -41,6 +40,17 @@ WrapperMouseArea {
         }
     }
 
+    ElapsedTimer {
+        id: elapsedTimer
+    }
+
+    Timer {
+        running: root.showTime
+        interval: 1000
+        repeat: true
+        onTriggered: root.elapsed = elapsedTimer.elapsed()
+    }
+
     Rectangle {
         implicitWidth: 360
         implicitHeight: mainLayout.implicitHeight
@@ -76,7 +86,7 @@ WrapperMouseArea {
 
                     IconImage {
                         implicitSize: coverItem.height
-                        source: root.getImage(root.image)
+                        source: Utils.getImage(root.image)
                     }
                 }
 
@@ -95,7 +105,7 @@ WrapperMouseArea {
 
                     IconImage {
                         implicitSize: 16
-                        source: root.getImage(root.n.appIcon)
+                        source: Utils.getImage(root.n.appIcon)
                     }
                 }
             }
@@ -108,11 +118,21 @@ WrapperMouseArea {
                 Layout.leftMargin: coverItem.visible ? 4 : 12
                 spacing: 4
 
-                Text {
+                RowLayout {
                     Layout.maximumWidth: contentLayout.width - buttonLayout.width
-                    text: root.n.summary
-                    elide: Text.ElideRight
-                    font.weight: Font.Bold
+
+                    Text {
+                        Layout.alignment: Qt.AlignLeft
+                        text: root.n.summary
+                        elide: Text.ElideRight
+                        font.weight: Font.Bold
+                    }
+
+                    Text {
+                        visible: root.showTime
+                        Layout.alignment: Qt.AlignRight
+                        text: Utils.humanTime(root.timestamp, root.elapsed)
+                    }
                 }
 
                 Text {
@@ -170,6 +190,7 @@ WrapperMouseArea {
 
         RowLayout {
             id: buttonLayout
+            visible: root.containsMouse
             implicitHeight: 16
 
             anchors {

home/services/quickshell/notifications/NotificationOverlay.qml

@@ -37,6 +37,7 @@ PanelWindow {
                 id: notifBox
                 required property int index
                 n: NotificationState.popupNotifs[index]
+                timestamp: Date.now()
                 indexPopup: index
 
                 Timer {

home/services/quickshell/utils/Utils.qml

@@ -0,0 +1,34 @@
+pragma Singleton
+
+import QtQml
+import Quickshell
+
+Singleton {
+    function getImage(image: string): string {
+        if (image.search(/:\/\//) != -1)
+            return Qt.resolvedUrl(image);
+        return Quickshell.iconPath(image);
+    }
+
+    function humanTime(timestamp: int, elapsed: int): string {
+        const MINUTE = 60;
+        const HOUR = 60 * MINUTE;
+        const DAY = 24 * HOUR;
+
+        const diff = elapsed - timestamp;
+
+        if (diff < 15) {
+            return "now";
+        } else if (diff < MINUTE) {
+            return "seconds ago";
+        } else if (diff < HOUR) {
+            return `${diff}m ago`;
+        } else if (diff < DAY) {
+            return `${Math.round(diff / HOUR)}h ago`;
+        } else if (diff < 2 * DAY) {
+            return "yesterday";
+        } else {
+            return `${Math.round(diff / DAY)} days ago`;
+        }
+    }
+}

home/services/quickshell/utils/qmldir

@@ -3,3 +3,4 @@ singleton Config 1.0 Config.qml
 singleton MprisState 1.0 MprisState.qml
 singleton NotificationState 1.0 NotificationState.qml
 singleton ResourcesState 1.0 ResourcesState.qml
+singleton Utils 1.0 Utils.qml