feat: add NotificationButton widget to bar to display notifications and work NotificationButton to a usable state
This commit is contained in:
Hannes
@@ -73,6 +73,7 @@ PanelWindow {
|
||||
|
||||
// TODO: Add bluetooth, network, audio, power, maybe HW monitor
|
||||
Tray{}
|
||||
NotificationButton {}
|
||||
// AudioSource{}
|
||||
AudioSink{}
|
||||
Battery{}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import Quickshell.Io
|
||||
import "../../notification/notificationServer/"
|
||||
import "../../../config"
|
||||
|
||||
MouseArea {
|
||||
id: notificationButton
|
||||
width: Math.max(bar.height, notificationText.width + Config.spacing)
|
||||
height: bar.height
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: {
|
||||
menuProc.running = true
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
radius: Config.radius_fun(notificationButton.height)
|
||||
|
||||
Text {
|
||||
id: notificationText
|
||||
anchors.centerIn: parent
|
||||
text: Quickshell.iconPath("discord")
|
||||
// text: ""
|
||||
font.pixelSize: Config.bigIconSize(notificationButton.height)
|
||||
font.family: Config.font
|
||||
color: Colors.secondaryContainer_fg
|
||||
}
|
||||
|
||||
Image{
|
||||
id: iconImage
|
||||
source: Quickshell.iconPath("discord")
|
||||
width: Config.bigIconSize(notificationButton.height)
|
||||
height: Config.bigIconSize(notificationButton.height)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -58,9 +58,11 @@ PanelWindow {
|
||||
|
||||
notification: notificationData
|
||||
|
||||
onDismissed: function(notification) {
|
||||
onDismissed: function(notification, dismiss) {
|
||||
notificationListModel.remove(index)
|
||||
notification.dismiss()
|
||||
if (dismiss) {
|
||||
notification.dismiss()
|
||||
}
|
||||
console.log("[Notification]: Dismissed Notification:", notification.appName, notification.id, notification.summary, notification.body)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import "../../config"
|
||||
import QtQuick.Layouts
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
//TODO: urgency, expireTimeoutText, ...
|
||||
|
||||
required property var notification
|
||||
property real duration: 5000 // Expected in milliseconds (e.g., 5000 for 5s)
|
||||
|
||||
signal dismissed(var notification)
|
||||
signal dismissed(var notification, bool dismiss)
|
||||
|
||||
implicitWidth: content.implicitWidth + 2*18
|
||||
implicitHeight: content.implicitHeight + 18 + progressBar.height
|
||||
implicitWidth: iconColumn.width+contentColumn.width+2*Config.spacing
|
||||
implicitHeight: Math.max(iconColumn.height, contentColumn.height)+Config.spacing+Config.spacing
|
||||
|
||||
color: Qt.alpha(Colors.primaryContainer, 0.75)
|
||||
border.width: Config.border_width
|
||||
@@ -23,40 +26,179 @@ Rectangle {
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: {
|
||||
dismissed(root.notification)
|
||||
dismissed(root.notification, true)
|
||||
}
|
||||
|
||||
Column {
|
||||
id: content
|
||||
Row {
|
||||
id: contentRow
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 5
|
||||
spacing: Config.spacing
|
||||
|
||||
Text {
|
||||
id: appNameText
|
||||
text: root.notification?.id + ": " + (root.notification?.appName ?? "")
|
||||
font.family: Config.font
|
||||
font.pixelSize: 18
|
||||
color: Colors.primary
|
||||
elide: Text.ElideRight
|
||||
// Left side: icon + icon information
|
||||
Column {
|
||||
id: iconColumn
|
||||
height: Math.max(iconImage.height+summaryText.height+3*Config.spacing, contentColumn.height)+Config.spacing
|
||||
width: Math.max(128, summaryText.implicitWidth) + Config.spacing
|
||||
spacing: Config.spacing
|
||||
|
||||
Image {
|
||||
id: iconImage
|
||||
|
||||
width: 128
|
||||
height: 128
|
||||
|
||||
source: Quickshell.iconPath(root.notification?.appIcon ?? "")
|
||||
fillMode: Image.PreserveAspectFit
|
||||
asynchronous: true
|
||||
}
|
||||
|
||||
Text {
|
||||
id: summaryText
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: root.notification?.summary ?? ""
|
||||
font.family: Config.font
|
||||
font.pixelSize: 22
|
||||
color: Colors.primary
|
||||
|
||||
wrapMode: Text.Wrap
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: summaryText
|
||||
text: root.notification?.summary ?? ""
|
||||
font.family: Config.font
|
||||
font.pixelSize: 22
|
||||
color: Colors.primary
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
// Right side: notification information
|
||||
Column {
|
||||
id: contentColumn
|
||||
width: bodyText.width + Config.spacing
|
||||
spacing: Config.spacing
|
||||
|
||||
Text {
|
||||
id: bodyText
|
||||
text: root.notification?.body ?? ""
|
||||
font.family: Config.font
|
||||
font.pixelSize: 16
|
||||
color: Colors.primary
|
||||
wrapMode: Text.Wrap
|
||||
Text {
|
||||
id: bodyText
|
||||
text: root.notification?.body ?? ""
|
||||
|
||||
width: Math.min(implicitWidth, iconColumn.width*2)
|
||||
font.family: Config.font
|
||||
font.pixelSize: 22
|
||||
color: Colors.primary
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
|
||||
// Text {
|
||||
// id: appNameText
|
||||
// width: parent.width
|
||||
// text: root.notification?.id + ": " +
|
||||
// (root.notification?.appName ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 18
|
||||
// color: Colors.primary
|
||||
// elide: Text.ElideRight
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: inlineReplyPlaceholderText
|
||||
// width: parent.width
|
||||
// text: "inlineReplyPlaceholder: " + (root.notification?.inlineReplyPlaceholder ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: iconPathText
|
||||
// width: parent.width
|
||||
// text: "iconPath: " + (root.notification?.iconPath ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: expireTimeoutText
|
||||
// width: parent.width
|
||||
// text: "expireTimeout: " +
|
||||
// (root.notification?.expireTimeout ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: residentText
|
||||
// width: parent.width
|
||||
// text: "resident: " + (root.notification?.resident ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: urgencyText
|
||||
// width: parent.width
|
||||
// text: "urgency: " + (root.notification?.urgency ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: desktopEntryText
|
||||
// width: parent.width
|
||||
// text: "desktopEntry: " +
|
||||
// (root.notification?.desktopEntry ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: hintsText
|
||||
// width: parent.width
|
||||
// text: "hints: " + (root.notification?.hints ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: transientText
|
||||
// width: parent.width
|
||||
// text: "transient: " + (root.notification?.transient ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: hasInlineReplyText
|
||||
// width: parent.width
|
||||
// text: "hasInlineReply: " +
|
||||
// (root.notification?.hasInlineReply ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
|
||||
// Text {
|
||||
// id: hasActionIconsText
|
||||
// width: parent.width
|
||||
// text: "hasActionIcons: " +
|
||||
// (root.notification?.hasActionIcons ?? "")
|
||||
// font.family: Config.font
|
||||
// font.pixelSize: 16
|
||||
// color: Colors.primary
|
||||
// wrapMode: Text.Wrap
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -66,7 +208,7 @@ Rectangle {
|
||||
id: progressBar
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
height: 10
|
||||
height: Math.min(10, 0.1 * root.height)
|
||||
color: Colors.primary
|
||||
|
||||
property real progress: 1.0
|
||||
@@ -81,7 +223,7 @@ Rectangle {
|
||||
duration: root.duration
|
||||
paused: mouseArea.containsMouse
|
||||
|
||||
onFinished: root.dismissed(root.notification)
|
||||
onFinished: root.dismissed(root.notification, false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,16 @@ Item {
|
||||
|
||||
NotificationServer {
|
||||
id: notificationServer
|
||||
|
||||
actionsSupported: true
|
||||
bodyHyperlinksSupported: true
|
||||
bodyImagesSupported: true
|
||||
actionIconsSupported: true
|
||||
imageSupported: true
|
||||
persistenceSupported: true
|
||||
bodyMarkupSupported: true
|
||||
inlineReplySupported: true
|
||||
|
||||
onNotification: function(notification) {
|
||||
// if(notification.lastGeneration){
|
||||
// console.log(
|
||||
|
||||
@@ -62,7 +62,7 @@ Variants {
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
console.log("clicked ???, closing Wallpaper Picker")
|
||||
console.log("clicked Background, closing Wallpaper Picker")
|
||||
wlogoutLoader.active = false
|
||||
}
|
||||
GridLayout {
|
||||
|
||||
Reference in New Issue
Block a user