Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-06 05:25:41 -05:00
Code Packages Releases Activity

Notifications updates

Browse Source
This commit is contained in:
purian23
2025-07-17 14:51:54 -04:00
parent 6484ee0806
commit 8a57c6a6b1
9 changed files with 4114 additions and 1429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
Services/NotificationService.qml
View File

@@ -200,7 +200,91 @@ Singleton {
function getGroupKey(wrapper) {
const appName = wrapper.appName.toLowerCase();
// Group by app only - one group per unique application
// Enhanced grouping for conversation apps
if (wrapper.isConversation) {
const summary = wrapper.summary.toLowerCase();
const body = wrapper.body.toLowerCase();
// Discord: Group by channel or conversation
if (appName.includes("discord") || appName.includes("vesktop")) {
// Channel notifications: "#general", "#announcements"
if (summary.includes("#")) {
const channelMatch = summary.match(/#[\w-]+/);
if (channelMatch) {
return `${appName}:${channelMatch[0]}`;
}
}
// Direct messages: group by sender
if (summary && !summary.includes("new message") && !summary.includes("notification")) {
return `${appName}:dm:${summary}`;
}
// Server messages or general
return `${appName}:messages`;
}
// Telegram: Group by chat/channel
if (appName.includes("telegram")) {
if (summary && !summary.includes("new message")) {
return `${appName}:${summary}`;
}
return `${appName}:messages`;
}
// Signal: Group by conversation
if (appName.includes("signal")) {
if (summary && !summary.includes("new message")) {
return `${appName}:${summary}`;
}
return `${appName}:messages`;
}
// WhatsApp: Group by contact/group
if (appName.includes("whatsapp")) {
if (summary && !summary.includes("new message")) {
return `${appName}:${summary}`;
}
return `${appName}:messages`;
}
// Slack: Group by channel/DM
if (appName.includes("slack")) {
if (summary.includes("#")) {
const channelMatch = summary.match(/#[\w-]+/);
if (channelMatch) {
return `${appName}:${channelMatch[0]}`;
}
}
if (summary && !summary.includes("new message")) {
return `${appName}:dm:${summary}`;
}
return `${appName}:messages`;
}
// Default conversation grouping
return `${appName}:conversation`;
}
// Media: Replace previous media notification from same app
if (wrapper.isMedia) {
return `${appName}:media`;
}
// System: Group by type
if (wrapper.isSystem) {
const summary = wrapper.summary.toLowerCase();
if (summary.includes("update")) {
return "system:updates";
}
if (summary.includes("battery")) {
return "system:battery";
}
if (summary.includes("network")) {
return "system:network";
}
return "system:general";
}
// Default: Group by app
return appName;
}
@@ -295,6 +379,20 @@ Singleton {
}
if (group.isConversation) {
// Extract conversation/channel name from group key
const keyParts = group.key.split(":");
if (keyParts.length > 1) {
const conversationKey = keyParts[keyParts.length - 1];
if (conversationKey.startsWith("#")) {
return `${conversationKey}: ${group.count} messages`;
}
if (keyParts.includes("dm")) {
return `${conversationKey}: ${group.count} messages`;
}
if (conversationKey !== "messages" && conversationKey !== "conversation") {
return `${conversationKey}: ${group.count} messages`;
}
}
return `${group.count} new messages`;
}
@@ -302,6 +400,20 @@ Singleton {
return "Now playing";
}
if (group.isSystem) {
const keyParts = group.key.split(":");
if (keyParts.length > 1) {
const systemType = keyParts[1];
switch (systemType) {
case "updates": return `${group.count} system updates`;
case "battery": return `${group.count} battery notifications`;
case "network": return `${group.count} network notifications`;
default: return `${group.count} system notifications`;
}
}
return `${group.count} system notifications`;
}
return `${group.count} notifications`;
}
@@ -311,7 +423,15 @@ Singleton {
}
if (group.isConversation) {
return group.latestNotification.body || "Tap to view messages";
const latest = group.latestNotification;
if (latest.body && latest.body.length > 0) {
return latest.body;
}
return "Tap to view conversation";
}
if (group.isMedia) {
return group.latestNotification.body || "Media playback";
}
return `Latest: ${group.latestNotification.summary}`;

97
Tests/NotificationNativeDemo.qml
View File

@@ -1,97 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Common
import qs.Services
import qs.Widgets
ApplicationWindow {
id: demoWindow
width: 800
height: 600
visible: true
title: "Native Notification System Demo"
color: Theme.background
Column {
anchors.centerIn: parent
spacing: Theme.spacingL
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: "Native Notification System Demo"
font.pixelSize: Theme.fontSizeXLarge
color: Theme.surfaceText
font.weight: Font.Bold
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
text: "This demo uses Quickshell's native NotificationServer"
font.pixelSize: Theme.fontSizeMedium
color: Theme.onSurfaceVariant
}
Row {
anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.spacingL
Button {
text: "Show Popups"
onClicked: notificationPopup.visible = true
}
Button {
text: "Show History"
onClicked: notificationHistory.notificationHistoryVisible = true
}
Button {
text: "Clear All"
onClicked: NotificationService.clearAllNotifications()
}
}
Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.spacingM
Text {
text: `Total Notifications: ${NotificationService.notifications.length}`
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
}
Text {
text: `Active Popups: ${NotificationService.popups.length}`
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
}
}
Text {
width: 600
anchors.horizontalCenter: parent.horizontalCenter
text: "Instructions:\n" +
"• Send notifications from other applications (Discord, etc.)\n" +
"• Use 'notify-send' command to test\n" +
"• Notifications will appear automatically in the popup\n" +
"• Images from Discord/Vesktop will show as avatars\n" +
"• App icons are automatically detected"
font.pixelSize: Theme.fontSizeSmall
color: Theme.onSurfaceVariant
wrapMode: Text.WordWrap
}
}
// Native notification popup
NotificationInit {
id: notificationPopup
}
// Native notification history
NotificationCenter {
id: notificationHistory
}
}

2557
Tests/Notifications.md Normal file
View File

File diff suppressed because it is too large Load Diff

796
Widgets/GroupedNotificationCard.qml
View File

@@ -1,796 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Notifications
import qs.Common
import qs.Services
Rectangle {
id: root
required property var group
// Context detection - set by parent if in popup
property bool isPopupContext: false
// Bind directly to the service property for automatic updates
readonly property bool expanded: NotificationService.expandedGroups[group.key] || false
// Height calculation with popup context adjustment
height: {
let baseHeight = expanded ? expandedContent.height + Theme.spacingL * 2 : collapsedContent.height + Theme.spacingL * 2;
// Add extra height for single notifications in popup context
if (isPopupContext && group.count === 1) {
return baseHeight + 12;
}
return baseHeight;
}
radius: Theme.cornerRadiusLarge
color: Theme.popupBackground()
border.color: group.latestNotification.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) :
Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: group.latestNotification.urgency === 2 ? 2 : 1
// Stabilize layout during content changes
clip: true
// Priority indicator for urgent notifications
Rectangle {
width: 4
height: parent.height - 16
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
radius: 2
color: Theme.primary
visible: group.latestNotification.urgency === 2
}
Behavior on height {
enabled: !isPopupContext // Disable automatic height animation in popup to prevent glitches
SequentialAnimation {
// Small pause to let content settle
PauseAnimation {
duration: 25
}
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}
// Collapsed view - shows app header and latest notification
Column {
id: collapsedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingS
visible: !expanded
// App header with group info
Item {
width: parent.width
height: 48 // Fixed height to prevent layout shifts
// Round app icon with proper API usage
Item {
id: iconContainer
width: 48
height: 48
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 48
height: 48
radius: 24
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 6
source: {
console.log("Icon source for", group.appName, ":", group.latestNotification.appIcon)
if (group.latestNotification.appIcon && group.latestNotification.appIcon !== "") {
return Quickshell.iconPath(group.latestNotification.appIcon, "")
}
return ""
}
visible: status === Image.Ready
onStatusChanged: {
console.log("Icon status changed for", group.appName, ":", status)
if (status === Image.Error || status === Image.Null || source === "") {
fallbackIcon.visible = true
} else if (status === Image.Ready) {
fallbackIcon.visible = false
}
}
}
// Fallback icon - show by default, hide when real icon loads
Text {
id: fallbackIcon
anchors.centerIn: parent
visible: true // Start visible, hide when real icon loads
text: {
// Use first letter of app name as fallback
const appName = group.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 20
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Count badge for multiple notifications - small circle
Rectangle {
width: 20
height: 20
radius: 10
color: Theme.primary
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: -2
anchors.rightMargin: -2
visible: group.count > 1
Text {
id: countText
anchors.centerIn: parent
text: group.count > 99 ? "99+" : group.count.toString()
color: Theme.primaryText
font.pixelSize: 10
font.weight: Font.Bold
}
}
}
// App info and latest notification content
Column {
id: contentColumn
anchors.left: iconContainer.right
anchors.leftMargin: Theme.spacingM
anchors.right: controlsContainer.left
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS
// App name and timestamp on same line
Text {
width: parent.width
text: {
if (group.latestNotification.timeStr.length > 0) {
return group.appName + " • " + group.latestNotification.timeStr
} else {
return group.appName
}
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
}
// Latest notification title (emphasized)
Text {
text: group.latestNotification.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium + 1 // Slightly larger for emphasis
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
maximumLineCount: 1
visible: text.length > 0
}
// Latest notification body (smaller, secondary)
Text {
text: group.latestNotification.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
elide: Text.ElideRight
maximumLineCount: group.count > 1 ? 1 : 2 // More space for single notifications
wrapMode: Text.WordWrap
visible: text.length > 0
}
}
// Expand/dismiss controls - use anchored layout for stability
Item {
id: controlsContainer
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
id: expandButton
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: expandArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
visible: group.count > 1
Text {
anchors.centerIn: parent
text: "expand_more"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
rotation: expanded ? 180 : 0
Behavior on rotation {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
MouseArea {
id: expandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log("Expand clicked for group:", group.key, "current state:", expanded)
NotificationService.toggleGroupExpansion(group.key)
}
}
}
Rectangle {
id: dismissButton
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(group.key)
}
}
}
}
// Quick reply for conversations (only if latest notification supports it)
Row {
width: parent.width
spacing: Theme.spacingS
visible: group.latestNotification.notification.hasInlineReply && !expanded
Rectangle {
width: parent.width - 60
height: 36
radius: 18
color: Theme.surfaceContainer
border.color: quickReplyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: quickReplyField
anchors.fill: parent
anchors.margins: Theme.spacingS
placeholderText: group.latestNotification.notification.inlineReplyPlaceholder || "Quick reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
onAccepted: {
if (text.length > 0) {
group.latestNotification.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 52
height: 36
radius: 18
color: quickReplyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
border.color: quickReplyField.text.length > 0 ? "transparent" : Theme.outline
border.width: quickReplyField.text.length > 0 ? 0 : 1
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 16
color: quickReplyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: quickReplyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
group.latestNotification.notification.sendInlineReply(quickReplyField.text)
quickReplyField.text = ""
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
// Expanded view - shows all notifications stacked
Column {
id: expandedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingM
visible: expanded
// Group header with fixed anchored positioning
Item {
width: parent.width
height: 48
// Round app icon - fixed position on left
Rectangle {
id: expandedIconContainer
width: 40
height: 40
radius: 20
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 4
source: group.latestNotification.appIcon ? Quickshell.iconPath(group.latestNotification.appIcon, "") : ""
visible: status === Image.Ready
}
// Fallback for expanded view
Text {
anchors.centerIn: parent
visible: !group.latestNotification.appIcon || group.latestNotification.appIcon === ""
text: {
const appName = group.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 16
font.weight: Font.Bold
color: Theme.primaryText
}
}
// App name and count badge - centered area
Item {
anchors.left: expandedIconContainer.right
anchors.leftMargin: Theme.spacingM
anchors.right: expandedControlsContainer.left
anchors.rightMargin: Theme.spacingM
anchors.verticalCenter: parent.verticalCenter
height: 32
Text {
id: expandedAppNameText
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
text: group.appName
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Bold
}
// Count badge in expanded view - positioned next to app name
Rectangle {
width: 24
height: 24
radius: 12
color: Theme.primary
anchors.left: expandedAppNameText.right
anchors.leftMargin: Theme.spacingS
anchors.verticalCenter: parent.verticalCenter
Text {
anchors.centerIn: parent
text: group.count > 99 ? "99+" : group.count.toString()
color: Theme.primaryText
font.pixelSize: 11
font.weight: Font.Bold
}
}
}
// Controls container - fixed position on right
Item {
id: expandedControlsContainer
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
id: collapseButton
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: collapseArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "expand_less"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
}
MouseArea {
id: collapseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleGroupExpansion(group.key)
}
}
Rectangle {
id: dismissAllButton
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissAllArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissAllArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(group.key)
}
}
}
}
// Stacked individual notifications with smooth transitions
Column {
width: parent.width
spacing: Theme.spacingS
Repeater {
model: group.notifications.slice(0, 10) // Show max 10 expanded
delegate: Rectangle {
required property var modelData
width: parent.width
height: notifContent.height + Theme.spacingM * 2
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5)
border.color: modelData.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) :
"transparent"
border.width: modelData.urgency === 2 ? 1 : 0
// Stabilize layout during dismiss operations
clip: true
// Smooth height transitions
Behavior on height {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
Item {
id: notifContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingM
height: Math.max(individualIcon.height, contentColumn.height)
// Small round notification icon/avatar - fixed position on left
Rectangle {
id: individualIcon
width: 32
height: 32
radius: 16
anchors.left: parent.left
anchors.top: parent.top
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 3
source: modelData.appIcon ? Quickshell.iconPath(modelData.appIcon, "") : ""
visible: status === Image.Ready
}
// Fallback for individual notifications
Text {
anchors.centerIn: parent
visible: !modelData.appIcon || modelData.appIcon === ""
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 12
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Individual dismiss button - fixed position on right
Rectangle {
id: individualDismissButton
width: 24
height: 24
radius: 12
anchors.right: parent.right
anchors.top: parent.top
color: individualDismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 12
color: Theme.surfaceVariantText
}
MouseArea {
id: individualDismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(modelData)
}
}
// Notification content - fills space between icon and dismiss button
Column {
id: contentColumn
anchors.left: individualIcon.right
anchors.leftMargin: Theme.spacingM
anchors.right: individualDismissButton.left
anchors.rightMargin: Theme.spacingM
anchors.top: parent.top
spacing: Theme.spacingXS
// Title and timestamp
Item {
width: parent.width
height: Math.max(titleText.height, timeText.height)
Text {
id: titleText
anchors.left: parent.left
anchors.right: timeText.left
anchors.rightMargin: Theme.spacingS
text: modelData.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
}
Text {
id: timeText
anchors.right: parent.right
text: modelData.timeStr
color: Theme.surfaceVariantText
font.pixelSize: 10
}
}
// Body text
Text {
text: modelData.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
wrapMode: Text.WordWrap
maximumLineCount: 3
elide: Text.ElideRight
visible: text.length > 0
}
// Individual notification inline reply
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.notification.hasInlineReply
Rectangle {
width: parent.width - 50
height: 28
radius: 14
color: Theme.surface
border.color: replyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: replyField
anchors.fill: parent
anchors.margins: Theme.spacingXS
placeholderText: modelData.notification.inlineReplyPlaceholder || "Reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: 11
onAccepted: {
if (text.length > 0) {
modelData.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 42
height: 28
radius: 14
color: replyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 12
color: replyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: replyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.notification.sendInlineReply(replyField.text)
replyField.text = ""
}
}
}
}
// Actions
Row {
spacing: Theme.spacingS
visible: modelData.actions && modelData.actions.length > 0
Repeater {
model: modelData.actions || []
delegate: Rectangle {
width: actionText.width + Theme.spacingS * 2
height: 24
radius: Theme.cornerRadius
color: actionArea.containsMouse ? Theme.primaryContainer : Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
Text {
id: actionText
anchors.centerIn: parent
text: modelData.text
font.pixelSize: 11
color: Theme.surfaceText
font.weight: Font.Medium
}
MouseArea {
id: actionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: modelData.invoke()
}
}
}
}
}
}
}
}
// "Show more" if there are many notifications
Rectangle {
width: parent.width
height: 32
radius: Theme.cornerRadius
color: Theme.surfaceContainer
visible: group.count > 10
Text {
anchors.centerIn: parent
text: `Show ${group.count - 10} more notifications...`
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
// Implement pagination or full expansion
console.log("Show more notifications")
}
}
}
}
}
// Tap to expand (only for collapsed state with multiple notifications)
MouseArea {
anchors.fill: parent
visible: !expanded && group.count > 1
onClicked: NotificationService.toggleGroupExpansion(group.key)
z: -1
}
}

640
Widgets/NotificationCenter.qml
View File

@@ -117,7 +117,7 @@ PanelWindow {
spacing: Theme.spacingM
// Header
Row {
Item {
width: parent.width
height: 32
@@ -126,19 +126,16 @@ PanelWindow {
font.pixelSize: Theme.fontSizeLarge
color: Theme.surfaceText
font.weight: Font.Medium
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
Item {
width: parent.width - 240 - Theme.spacingM
height: 1
}
// Clear All Button
// Clear All Button - fixed width aligned to right
Rectangle {
width: 120
height: 28
radius: Theme.cornerRadius
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
visible: NotificationService.notifications.length > 0
@@ -273,11 +270,632 @@ PanelWindow {
}
}
delegate: GroupedNotificationCard {
delegate: Rectangle {
required property var modelData
group: modelData
width: ListView.view.width - Theme.spacingM
// expanded property is now readonly and managed by NotificationService
readonly property bool expanded: NotificationService.expandedGroups[modelData.key] || false
width: ListView.view.width
height: {
if (expanded) {
// Calculate expanded height: header (48) + spacing (16) + individual notifications
let headerHeight = 48 + Theme.spacingM
let notificationHeight = modelData.notifications.length * (60 + Theme.spacingS) // Each notification ~60px + spacing
let totalExpandedHeight = headerHeight + notificationHeight + Theme.spacingL * 2
return Math.max(totalExpandedHeight, 200) // Minimum expanded height
} else {
// Collapsed height: icon + content + quick reply (if any)
let collapsedHeight = 72 + Theme.spacingS * 2 // Header height + spacing
if (modelData.latestNotification.notification.hasInlineReply) {
collapsedHeight += 36 + Theme.spacingS // Quick reply height
}
return collapsedHeight + Theme.spacingL * 2
}
}
radius: Theme.cornerRadiusLarge
color: Theme.popupBackground()
border.color: modelData.latestNotification.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) :
Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
clip: true
// Priority indicator for urgent notifications
Rectangle {
width: 4
height: parent.height - 16
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
radius: 2
color: Theme.primary
visible: modelData.latestNotification.urgency === 2
}
Behavior on height {
SequentialAnimation {
PauseAnimation { duration: 25 }
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}
// Collapsed view - shows app header and latest notification
Column {
id: collapsedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingS
visible: !expanded
// App header with group info
Item {
width: parent.width
height: 72
// App icon with proper fallback handling
Item {
id: iconContainer
width: 48
height: 48
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 48
height: 48
radius: 24
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 6
source: {
if (modelData.latestNotification.appIcon && modelData.latestNotification.appIcon !== "") {
return Quickshell.iconPath(modelData.latestNotification.appIcon, "")
}
return ""
}
visible: status === Image.Ready
onStatusChanged: {
if (status === Image.Error || status === Image.Null || source === "") {
fallbackIcon.visible = true
} else if (status === Image.Ready) {
fallbackIcon.visible = false
}
}
}
Text {
id: fallbackIcon
anchors.centerIn: parent
visible: true
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 20
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Count badge for multiple notifications
Rectangle {
width: 18
height: 18
radius: 9
color: Theme.primary
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: -2
anchors.rightMargin: -2
visible: modelData.count > 1
Text {
anchors.centerIn: parent
text: modelData.count > 99 ? "99+" : modelData.count.toString()
color: Theme.primaryText
font.pixelSize: 9
font.weight: Font.Bold
}
}
}
// Content area with proper spacing
Column {
anchors.left: iconContainer.right
anchors.leftMargin: Theme.spacingM
anchors.right: controlsContainer.left
anchors.rightMargin: Theme.spacingM
anchors.top: parent.top
anchors.topMargin: Theme.spacingS
spacing: Theme.spacingS
// App name and timestamp
Text {
width: parent.width
text: {
if (modelData.latestNotification.timeStr.length > 0) {
return modelData.appName + " • " + modelData.latestNotification.timeStr
} else {
return modelData.appName
}
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
}
// Latest notification title (emphasized)
Text {
text: modelData.latestNotification.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium + 1
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
maximumLineCount: 1
visible: text.length > 0
}
// Latest notification body
Text {
text: modelData.latestNotification.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
elide: Text.ElideRight
maximumLineCount: modelData.count > 1 ? 1 : 2
wrapMode: Text.WordWrap
visible: text.length > 0
}
}
// Controls with fixed positioning
Item {
id: controlsContainer
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: expandArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
visible: modelData.count > 1
Text {
anchors.centerIn: parent
text: "expand_more"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
rotation: expanded ? 180 : 0
Behavior on rotation {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
MouseArea {
id: expandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleGroupExpansion(modelData.key)
}
}
Rectangle {
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Enhanced quick reply for conversations
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.notification.hasInlineReply && !expanded
Rectangle {
width: parent.width - 60
height: 36
radius: 18
color: Theme.surfaceContainer
border.color: quickReplyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: quickReplyField
anchors.fill: parent
anchors.margins: Theme.spacingS
placeholderText: modelData.latestNotification.notification.inlineReplyPlaceholder || "Quick reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
onAccepted: {
if (text.length > 0) {
modelData.latestNotification.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 52
height: 36
radius: 18
color: quickReplyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
border.color: quickReplyField.text.length > 0 ? "transparent" : Theme.outline
border.width: quickReplyField.text.length > 0 ? 0 : 1
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 16
color: quickReplyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: quickReplyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.latestNotification.notification.sendInlineReply(quickReplyField.text)
quickReplyField.text = ""
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
// Expanded view - shows all notifications stacked
Column {
id: expandedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingM
visible: expanded
// Group header in expanded view
Item {
width: parent.width
height: 48
Rectangle {
width: 40
height: 40
radius: 20
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 4
source: modelData.latestNotification.appIcon ? Quickshell.iconPath(modelData.latestNotification.appIcon, "") : ""
visible: status === Image.Ready
}
Text {
anchors.centerIn: parent
visible: !modelData.latestNotification.appIcon || modelData.latestNotification.appIcon === ""
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 16
font.weight: Font.Bold
color: Theme.primaryText
}
}
Text {
anchors.left: parent.left
anchors.leftMargin: 52
anchors.verticalCenter: parent.verticalCenter
text: modelData.appName
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Bold
}
Item {
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: collapseArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "expand_less"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
}
MouseArea {
id: collapseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.toggleGroupExpansion(modelData.key)
}
}
Rectangle {
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissAllArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissAllArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Individual notifications
Column {
width: parent.width
spacing: Theme.spacingS
Repeater {
model: modelData.notifications.slice(0, 10)
delegate: Rectangle {
required property var modelData
width: parent.width
height: Math.max(48, 32 + contentColumn.height + Theme.spacingM * 2) // 32 for icon height, plus content
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5)
border.color: modelData.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) :
"transparent"
border.width: modelData.urgency === 2 ? 1 : 0
clip: true
Item {
id: notifContent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: Theme.spacingM
height: Math.max(32, contentColumn.height)
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
anchors.top: parent.top
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
border.width: 1
Text {
anchors.centerIn: parent
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 12
font.weight: Font.Bold
color: Theme.primaryText
}
}
Rectangle {
width: 24
height: 24
radius: 12
anchors.right: parent.right
anchors.top: parent.top
color: individualDismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 12
color: Theme.surfaceVariantText
}
MouseArea {
id: individualDismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(modelData)
}
}
Column {
id: contentColumn
anchors.left: parent.left
anchors.leftMargin: 44
anchors.right: parent.right
anchors.rightMargin: 36
anchors.top: parent.top
spacing: Theme.spacingXS
Text {
text: modelData.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
}
Text {
text: modelData.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
wrapMode: Text.WordWrap
maximumLineCount: 3
elide: Text.ElideRight
visible: text.length > 0
}
// Individual inline reply
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.notification.hasInlineReply
Rectangle {
width: parent.width - 50
height: 28
radius: 14
color: Theme.surface
border.color: replyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: replyField
anchors.fill: parent
anchors.margins: Theme.spacingXS
placeholderText: modelData.notification.inlineReplyPlaceholder || "Reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: 11
onAccepted: {
if (text.length > 0) {
modelData.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 42
height: 28
radius: 14
color: replyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 12
color: replyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: replyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.notification.sendInlineReply(replyField.text)
replyField.text = ""
}
}
}
}
}
}
}
}
}
}
// Tap to expand for collapsed groups
MouseArea {
anchors.fill: parent
visible: !expanded && modelData.count > 1
onClicked: NotificationService.toggleGroupExpansion(modelData.key)
z: -1
}
}
}

172
Widgets/NotificationInit.qml
View File

@@ -1,172 +0,0 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import qs.Common
import qs.Services
PanelWindow {
id: notificationPopup
objectName: "notificationPopup" // For context detection
visible: NotificationService.groupedPopups.length > 0
WlrLayershell.layer: WlrLayershell.Overlay
WlrLayershell.exclusiveZone: -1
WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
color: "transparent"
anchors {
top: true
right: true
}
margins {
top: Theme.barHeight
right: 16
}
implicitWidth: 400
implicitHeight: groupedNotificationsList.height + 32
Column {
id: groupedNotificationsList
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 16
anchors.rightMargin: 16
spacing: Theme.spacingM
width: 380
Repeater {
model: NotificationService.groupedPopups
delegate: GroupedNotificationCard {
required property var modelData
group: modelData
width: parent.width
// Popup-specific styling: Extra padding for single notifications
property bool isPopupContext: true
property int extraTopMargin: group.count === 1 ? 6 : 0
property int extraBottomMargin: group.count === 1 ? 6 : 0
// Hover detection for preventing auto-dismiss
property bool isHovered: false
MouseArea {
id: hoverDetection
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton // Don't intercept clicks
propagateComposedEvents: true
z: -1 // Behind other elements
onEntered: {
parent.isHovered = true
console.log("Notification hovered - pausing auto-dismiss")
}
onExited: {
parent.isHovered = false
console.log("Notification hover ended - resuming auto-dismiss")
}
}
// Enhanced auto-dismiss timer with hover pause
Timer {
id: autoDismissTimer
running: group.count === 1 && group.latestNotification.popup && !group.latestNotification.notification.hasInlineReply && !parent.isHovered
interval: group.latestNotification.notification.expireTimeout > 0 ?
group.latestNotification.notification.expireTimeout * 1000 : 7000 // Increased to 7 seconds
onTriggered: {
if (!parent.isHovered) {
group.latestNotification.popup = false
}
}
// Restart timer when hover ends
onRunningChanged: {
if (running && !parent.isHovered) {
restart()
}
}
}
// Don't auto-dismiss conversation groups - let user interact
property bool isConversationGroup: group.isConversation && group.count > 1
// Stabilized entry animation for popup context
transform: [
Translate {
id: slideTransform
x: notificationPopup.visible ? 0 : 400
Behavior on x {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
},
Scale {
id: scaleTransform
origin.x: parent.width
origin.y: 0
xScale: notificationPopup.visible ? 1.0 : 0.95
yScale: notificationPopup.visible ? 1.0 : 0.8
Behavior on xScale {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
Behavior on yScale {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}
]
opacity: notificationPopup.visible ? 1.0 : 0.0
// Enhanced height transitions for popup stability
Behavior on height {
SequentialAnimation {
PauseAnimation {
duration: 10 // Shorter pause for popup responsiveness
}
NumberAnimation {
duration: Theme.shortDuration // Faster transitions in popup
easing.type: Theme.standardEasing
}
}
}
Behavior on opacity {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
// Popup-specific stability improvements
clip: true // Prevent content overflow during animations
}
}
}
// Smooth height animation
Behavior on implicitHeight {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}

350
Widgets/NotificationItem.qml
View File

@@ -1,350 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import Quickshell
import Quickshell.Widgets
import Quickshell.Services.Notifications
import qs.Common
import qs.Services
Rectangle {
id: root
required property var notificationWrapper
readonly property bool hasImage: notificationWrapper.hasImage
readonly property bool hasAppIcon: notificationWrapper.hasAppIcon
readonly property bool isConversation: notificationWrapper.isConversation
readonly property bool isMedia: notificationWrapper.isMedia
readonly property bool isUrgent: notificationWrapper.urgency === 2
readonly property bool isPopup: notificationWrapper.popup
property bool expanded: false
width: 380
height: Math.max(contentColumn.height + Theme.spacingL * 2, 80)
radius: Theme.cornerRadiusLarge
color: isUrgent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) : Theme.popupBackground()
border.color: isUrgent ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: 1
// Priority indicator for urgent notifications
Rectangle {
width: 4
height: parent.height - 16
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
radius: 2
color: Theme.primary
visible: isUrgent
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.MiddleButton
onEntered: notificationWrapper.timer.stop()
onExited: notificationWrapper.timer.start()
onClicked: (mouse) => {
if (mouse.button === Qt.MiddleButton) {
NotificationService.dismissNotification(notificationWrapper)
} else {
// Handle notification action
const actions = notificationWrapper.actions;
if (actions && actions.length === 1) {
actions[0].invoke();
}
}
}
}
Column {
id: contentColumn
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: Theme.spacingL
spacing: Theme.spacingS
Row {
width: parent.width
spacing: Theme.spacingM
// Image/Icon container
Item {
width: 48
height: 48
anchors.top: parent.top
// Notification image (Discord avatars, media artwork, etc.)
Loader {
id: imageLoader
active: root.hasImage
anchors.fill: parent
sourceComponent: Rectangle {
radius: 24 // Fully rounded
color: Theme.surfaceContainer
clip: true
Image {
id: notifImage
anchors.fill: parent
source: root.notificationWrapper.image
fillMode: Image.PreserveAspectCrop
cache: false
antialiasing: true
asynchronous: true
smooth: true
onStatusChanged: {
if (status === Image.Error) {
console.warn("Failed to load notification image:", source)
}
}
}
}
}
// App icon (shown when no image, or as badge when image present)
Loader {
active: root.hasAppIcon || !root.hasImage
// Position as overlay badge when image is present, center when no image
anchors.centerIn: root.hasImage ? undefined : parent
anchors.bottom: root.hasImage ? parent.bottom : undefined
anchors.right: root.hasImage ? parent.right : undefined
sourceComponent: Rectangle {
width: root.hasImage ? 20 : 48
height: root.hasImage ? 20 : 48
radius: width / 2
color: getIconBackgroundColor()
border.color: root.hasImage ? Theme.surface : "transparent"
border.width: root.hasImage ? 2 : 0
function getIconBackgroundColor() {
if (root.hasImage) {
return Theme.surface // Badge background
} else if (root.isConversation) {
return Theme.primaryContainer
} else if (root.isMedia) {
return Qt.rgba(1, 0.42, 0.21, 0.2) // Orange tint
}
return Theme.primaryContainer
}
IconImage {
id: iconImage
width: root.hasImage ? 14 : 32
height: root.hasImage ? 14 : 32
anchors.centerIn: parent
asynchronous: true
visible: status === Image.Ready
source: {
if (root.hasAppIcon) {
return Quickshell.iconPath(root.notificationWrapper.appIcon, "")
}
// Special cases for specific apps
if (root.notificationWrapper.appName === "niri" && root.notificationWrapper.summary === "Screenshot captured") {
return Quickshell.iconPath("camera-photo", "")
}
// Fallback icons
if (root.isConversation) return Quickshell.iconPath("chat", "")
if (root.isMedia) return Quickshell.iconPath("music_note", "")
return Quickshell.iconPath("dialog-information", "")
}
// Color overlay for symbolic icons when used as badge
layer.enabled: root.hasImage && root.notificationWrapper.appIcon.endsWith("symbolic")
layer.effect: MultiEffect {
colorization: 1.0
colorizationColor: Theme.surfaceText
}
}
// Elegant fallback when icon fails to load
Rectangle {
width: root.hasImage ? 14 : 32
height: root.hasImage ? 14 : 32
anchors.centerIn: parent
visible: iconImage.status === Image.Error || iconImage.status === Image.Null
radius: width / 2
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
Text {
anchors.centerIn: parent
text: {
if (root.isConversation) return "💬"
if (root.isMedia) return "🎵"
if (root.notificationWrapper.appName === "niri") return "📷"
return "📋"
}
font.pixelSize: root.hasImage ? 8 : 16
color: Theme.primary
}
}
}
}
// Fallback when no app icon and no image
Loader {
active: !root.hasAppIcon && !root.hasImage
anchors.centerIn: parent
sourceComponent: Rectangle {
width: 48
height: 48
radius: 24
color: Theme.primaryContainer
Text {
anchors.centerIn: parent
text: getFallbackIconText()
font.family: Theme.iconFont
font.pixelSize: 20
color: Theme.primaryText
function getFallbackIconText() {
if (root.isConversation) return "chat"
if (root.isMedia) return "music_note"
return "apps"
}
}
}
}
}
// Content area
Column {
width: parent.width - 48 - Theme.spacingM - 24 - Theme.spacingS
spacing: Theme.spacingXS
// Header row: App name and timestamp combined
Text {
text: {
const appName = root.notificationWrapper.appName || "Unknown"
const timeStr = root.notificationWrapper.timeStr || "now"
return appName + " • " + timeStr
}
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
}
// Summary (title)
Text {
text: root.notificationWrapper.summary
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceText
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
visible: text.length > 0
}
// Body text - use full available width
Text {
text: root.notificationWrapper.body
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
width: parent.width
wrapMode: Text.WordWrap
maximumLineCount: root.expanded ? -1 : 2
elide: Text.ElideRight
visible: text.length > 0
textFormat: Text.MarkdownText
onLinkActivated: (link) => {
Qt.openUrlExternally(link)
NotificationService.dismissNotification(root.notificationWrapper)
}
}
}
// Close button
Rectangle {
width: 24
height: 24
radius: 12
color: closeArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 14
color: closeArea.containsMouse ? Theme.primary : Theme.surfaceVariantText
}
MouseArea {
id: closeArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(root.notificationWrapper)
}
}
}
// Actions (if present)
Row {
width: parent.width
spacing: Theme.spacingS
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 48 + Theme.spacingM + Theme.spacingL
anchors.rightMargin: Theme.spacingL
visible: root.notificationWrapper.actions && root.notificationWrapper.actions.length > 0
Repeater {
model: root.notificationWrapper.actions || []
delegate: Rectangle {
required property NotificationAction modelData
width: actionText.width + Theme.spacingM * 2
height: 32
radius: Theme.cornerRadius
color: actionArea.containsMouse ? Theme.primaryContainer : Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
Text {
id: actionText
anchors.centerIn: parent
text: modelData.text
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
font.weight: Font.Medium
}
MouseArea {
id: actionArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: modelData.invoke()
}
}
}
}
}
// Animations
Behavior on height {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}

805
Widgets/NotificationPopup.qml Normal file
View File

@@ -0,0 +1,805 @@
import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import qs.Common
import qs.Services
PanelWindow {
id: notificationPopup
objectName: "notificationPopup"
visible: NotificationService.groupedPopups.length > 0
WlrLayershell.layer: WlrLayershell.Overlay
WlrLayershell.exclusiveZone: -1
WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
color: "transparent"
anchors {
top: true
right: true
}
margins {
top: Theme.barHeight
right: 12
}
implicitWidth: 400
implicitHeight: notificationsList.height + 32
// Expose key child objects for testing
// Expose the currently visible quickReplyField for testing
property TextField quickReplyField: null
// Expose the currently visible iconContainer for testing
property Item iconContainer: null
// Expose the currently visible expandedContent for testing
property Column expandedContent: null
// Expose the currently visible hoverArea for testing
property MouseArea hoverArea: null
Column {
id: notificationsList
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 16
anchors.rightMargin: 16
spacing: Theme.spacingM
width: 380
Repeater {
model: NotificationService.groupedPopups
delegate: Rectangle {
required property var modelData
// Context detection for popup
readonly property bool isPopupContext: true
readonly property bool expanded: NotificationService.expandedGroups[modelData.key] || false
width: parent.width
height: {
let calculatedHeight;
if (expanded) {
// Calculate expanded height properly: header (48) + spacing + notifications
let headerHeight = 48 + Theme.spacingM
let maxNotificationsInPopup = Math.min(modelData.notifications.length, 5)
let notificationHeight = maxNotificationsInPopup * (60 + Theme.spacingS)
calculatedHeight = headerHeight + notificationHeight + Theme.spacingL * 2
} else {
// Collapsed height: header (72) + quick reply if present
calculatedHeight = 72 + Theme.spacingS * 2
if (modelData.latestNotification.notification.hasInlineReply) {
calculatedHeight += 36 + Theme.spacingS
}
calculatedHeight += Theme.spacingL * 2
}
// Add extra height for single notifications in popup context
if (isPopupContext && modelData.count === 1) {
calculatedHeight += 12;
}
return calculatedHeight;
}
radius: Theme.cornerRadiusLarge
color: Theme.popupBackground()
border.color: modelData.latestNotification.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3) :
Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
border.width: modelData.latestNotification.urgency === 2 ? 2 : 1
// Stabilize layout during content changes
clip: true
// Smooth popup animations
transform: Translate {
x: notificationPopup.visible ? 0 : 400
Behavior on x {
NumberAnimation {
duration: 350
easing.type: Easing.OutCubic
}
}
}
opacity: notificationPopup.visible ? 1.0 : 0.0
Behavior on opacity {
NumberAnimation {
duration: 300
easing.type: Easing.OutCubic
}
}
scale: notificationPopup.visible ? 1.0 : 0.98
Behavior on scale {
NumberAnimation {
duration: 350
easing.type: Easing.OutCubic
}
}
// Priority indicator for urgent notifications
Rectangle {
width: 4
height: parent.height - 16
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
radius: 2
color: Theme.primary
visible: modelData.latestNotification.urgency === 2
}
Behavior on height {
enabled: !isPopupContext // Disable automatic height animation in popup to prevent glitches
SequentialAnimation {
PauseAnimation { duration: 25 }
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}
// Collapsed view - shows app header and latest notification
Column {
id: collapsedContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingS
visible: !expanded
// App header with group info
Item {
width: parent.width
height: 72 // Increased height for better text spacing
// Round app icon with proper API usage
Item {
id: iconContainer
Component.onCompleted: {
// Expose this iconContainer to the root for testing if visible
notificationPopup.iconContainer = iconContainer
}
width: 48
height: 48
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 48
height: 48
radius: 24
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 6
source: {
if (modelData.latestNotification.appIcon && modelData.latestNotification.appIcon !== "") {
return Quickshell.iconPath(modelData.latestNotification.appIcon, "")
}
return ""
}
visible: status === Image.Ready
onStatusChanged: {
if (status === Image.Error || status === Image.Null || source === "") {
fallbackIcon.visible = true
} else if (status === Image.Ready) {
fallbackIcon.visible = false
}
}
}
// Fallback icon - show by default, hide when real icon loads
Text {
id: fallbackIcon
anchors.centerIn: parent
visible: true // Start visible, hide when real icon loads
text: {
// Use first letter of app name as fallback
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 20
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Count badge for multiple notifications - smaller circle
Rectangle {
width: 18
height: 18
radius: 9
color: Theme.primary
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: -2
anchors.rightMargin: -2
visible: modelData.count > 1
Text {
anchors.centerIn: parent
text: modelData.count > 99 ? "99+" : modelData.count.toString()
color: Theme.primaryText
font.pixelSize: 9
font.weight: Font.Bold
}
}
}
// App info and latest notification content
Column {
anchors.left: iconContainer.right
anchors.leftMargin: Theme.spacingM
anchors.right: controlsContainer.left
anchors.rightMargin: Theme.spacingM
anchors.top: parent.top
anchors.topMargin: Theme.spacingS
spacing: Theme.spacingS
// App name and timestamp on same line
Text {
width: parent.width
text: {
if (modelData.latestNotification.timeStr.length > 0) {
return modelData.appName + " • " + modelData.latestNotification.timeStr
} else {
return modelData.appName
}
}
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
elide: Text.ElideRight
maximumLineCount: 1
}
// Latest notification title (emphasized)
Text {
text: modelData.latestNotification.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeMedium + 1 // Slightly larger for emphasis
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
maximumLineCount: 1
visible: text.length > 0
}
// Latest notification body (smaller, secondary)
Text {
text: modelData.latestNotification.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
elide: Text.ElideRight
maximumLineCount: modelData.count > 1 ? 1 : 2 // More space for single notifications
wrapMode: Text.WordWrap
visible: text.length > 0
}
}
// Expand/dismiss controls - use anchored layout for stability
Item {
id: controlsContainer
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: expandArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
visible: modelData.count > 1
Text {
anchors.centerIn: parent
text: "expand_more"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
rotation: expanded ? 180 : 0
Behavior on rotation {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
MouseArea {
// ...existing code...
id: expandArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log("Expand clicked - pausing timer")
dismissTimer.stop()
NotificationService.toggleGroupExpansion(modelData.key)
}
}
}
Rectangle {
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Quick reply for conversations (only if latest notification supports it)
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.latestNotification.notification.hasInlineReply && !expanded
Rectangle {
width: parent.width - 60
height: 36
radius: 18
color: Theme.surfaceContainer
border.color: quickReplyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: quickReplyField
anchors.fill: parent
anchors.margins: Theme.spacingS
placeholderText: modelData.latestNotification.notification.inlineReplyPlaceholder || "Quick reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
onAccepted: {
if (text.length > 0) {
modelData.latestNotification.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 52
height: 36
radius: 18
color: quickReplyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
border.color: quickReplyField.text.length > 0 ? "transparent" : Theme.outline
border.width: quickReplyField.text.length > 0 ? 0 : 1
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 16
color: quickReplyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: quickReplyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.latestNotification.notification.sendInlineReply(quickReplyField.text)
quickReplyField.text = ""
}
}
Behavior on color {
ColorAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
}
}
// Expanded view - shows all notifications stacked
Column {
id: expandedContent
Component.onCompleted: {
// Expose this expandedContent to the root for testing if visible
notificationPopup.expandedContent = expandedContent
}
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingL
spacing: Theme.spacingM
visible: expanded
// Group header with fixed anchored positioning
Item {
width: parent.width
height: 48
// Round app icon - fixed position on left
Rectangle {
width: 40
height: 40
radius: 20
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 4
source: modelData.latestNotification.appIcon ? Quickshell.iconPath(modelData.latestNotification.appIcon, "") : ""
visible: status === Image.Ready
}
// Fallback for expanded view
Text {
anchors.centerIn: parent
visible: !modelData.latestNotification.appIcon || modelData.latestNotification.appIcon === ""
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 16
font.weight: Font.Bold
color: Theme.primaryText
}
}
// App name and count badge - centered area
Text {
anchors.left: parent.left
anchors.leftMargin: 52
anchors.verticalCenter: parent.verticalCenter
text: modelData.appName
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Bold
}
// Controls container - fixed position on right
Item {
width: 72
height: 32
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
color: collapseArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "expand_less"
font.family: Theme.iconFont
font.pixelSize: 18
color: Theme.surfaceText
}
MouseArea {
id: collapseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log("Expand clicked - pausing timer")
dismissTimer.stop()
NotificationService.toggleGroupExpansion(modelData.key)
}
}
}
Rectangle {
width: 32
height: 32
radius: 16
anchors.right: parent.right
color: dismissAllArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 16
color: Theme.surfaceText
}
MouseArea {
id: dismissAllArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissGroup(modelData.key)
}
}
}
}
// Stacked individual notifications with smooth transitions
Column {
width: parent.width
spacing: Theme.spacingS
Repeater {
model: modelData.notifications.slice(0, 5) // Show max 5 in popup
delegate: Rectangle {
required property var modelData
width: parent.width
height: notifContent.height + Theme.spacingM * 2
radius: Theme.cornerRadius
color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.5)
border.color: modelData.urgency === 2 ?
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2) :
"transparent"
border.width: modelData.urgency === 2 ? 1 : 0
// Stabilize layout during dismiss operations
clip: true
Item {
id: notifContent
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.spacingM
height: Math.max(32, contentColumn.height)
// Small round notification icon/avatar - fixed position on left
Rectangle {
width: 32
height: 32
radius: 16
anchors.left: parent.left
anchors.top: parent.top
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.1)
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
border.width: 1
clip: true
IconImage {
anchors.fill: parent
anchors.margins: 3
source: modelData.appIcon ? Quickshell.iconPath(modelData.appIcon, "") : ""
visible: status === Image.Ready
}
// Fallback for individual notifications
Text {
anchors.centerIn: parent
visible: !modelData.appIcon || modelData.appIcon === ""
text: {
const appName = modelData.appName || "?"
return appName.charAt(0).toUpperCase()
}
font.pixelSize: 12
font.weight: Font.Bold
color: Theme.primaryText
}
}
// Individual dismiss button - fixed position on right
Rectangle {
width: 24
height: 24
radius: 12
anchors.right: parent.right
anchors.top: parent.top
color: individualDismissArea.containsMouse ?
Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.08) :
"transparent"
Text {
anchors.centerIn: parent
text: "close"
font.family: Theme.iconFont
font.pixelSize: 12
color: Theme.surfaceVariantText
}
MouseArea {
id: individualDismissArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: NotificationService.dismissNotification(modelData)
}
}
// Notification content - fills space between icon and dismiss button
Column {
id: contentColumn
anchors.left: parent.left
anchors.leftMargin: 44
anchors.right: parent.right
anchors.rightMargin: 36
anchors.top: parent.top
spacing: Theme.spacingXS
// Title and timestamp
Text {
text: modelData.summary
color: Theme.surfaceText
font.pixelSize: Theme.fontSizeSmall
font.weight: Font.Medium
width: parent.width
elide: Text.ElideRight
}
// Body text
Text {
text: modelData.body
color: Theme.surfaceVariantText
font.pixelSize: Theme.fontSizeSmall
width: parent.width
wrapMode: Text.WordWrap
maximumLineCount: 2
elide: Text.ElideRight
visible: text.length > 0
}
// Individual notification inline reply
Row {
width: parent.width
spacing: Theme.spacingS
visible: modelData.notification.hasInlineReply
Rectangle {
width: parent.width - 50
height: 28
radius: 14
color: Theme.surface
border.color: replyField.activeFocus ? Theme.primary : Theme.outline
border.width: 1
TextField {
id: replyField
anchors.fill: parent
anchors.margins: Theme.spacingXS
placeholderText: modelData.notification.inlineReplyPlaceholder || "Reply..."
background: Item {}
color: Theme.surfaceText
font.pixelSize: 11
onAccepted: {
if (text.length > 0) {
modelData.notification.sendInlineReply(text)
text = ""
}
}
}
}
Rectangle {
width: 42
height: 28
radius: 14
color: replyField.text.length > 0 ? Theme.primary : Theme.surfaceContainer
Text {
anchors.centerIn: parent
text: "send"
font.family: Theme.iconFont
font.pixelSize: 12
color: replyField.text.length > 0 ? Theme.primaryText : Theme.surfaceVariantText
}
MouseArea {
anchors.fill: parent
enabled: replyField.text.length > 0
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
onClicked: {
modelData.notification.sendInlineReply(replyField.text)
replyField.text = ""
}
}
}
}
}
}
}
}
}
}
// Hover to pause auto-dismiss - MUST be properly configured
MouseArea {
id: hoverArea
Component.onCompleted: {
// Expose this hoverArea to the root for testing if visible
notificationPopup.hoverArea = hoverArea
}
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
z: 10 // Higher z-order to ensure hover detection
propagateComposedEvents: true
onEntered: {
console.log("Notification hover entered - pausing timer")
dismissTimer.stop()
}
onExited: {
console.log("Notification hover exited - resuming timer")
if (modelData.latestNotification.popup && !expanded) {
dismissTimer.restart()
}
}
}
// Auto-dismiss timer - properly pauses on hover
Timer {
id: dismissTimer
running: modelData.latestNotification.popup && !expanded
interval: modelData.latestNotification.notification.expireTimeout > 0 ?
modelData.latestNotification.notification.expireTimeout * 1000 : 5000
onTriggered: {
console.log("Timer triggered - hover state:", hoverArea.containsMouse, "expanded:", expanded)
if (!hoverArea.containsMouse && !expanded) {
console.log("Dismissing notification")
modelData.latestNotification.popup = false
} else {
console.log("Conditions not met - not dismissing")
}
}
}
}
}
}
// Smooth height animation
Behavior on implicitHeight {
NumberAnimation {
duration: Theme.mediumDuration
easing.type: Theme.emphasizedEasing
}
}
}

2
shell.qml
View File

@@ -209,7 +209,7 @@ ShellRoot {
// Global popup windows
CenterCommandCenter {}
TrayMenuPopup {}
NotificationInit {}
NotificationPopup {}
NotificationCenter {
notificationHistoryVisible: root.notificationHistoryVisible
onCloseRequested: {