Notifications: proper display on selected screen
This commit is contained in:
quadbyte
parent
8afb71b114
commit
2abe7c9bd1
6 changed files with 260 additions and 255 deletions
|
|
@ -8,182 +8,190 @@ import qs.Services
|
|||
import qs.Widgets
|
||||
|
||||
// Simple notification popup - displays multiple notifications
|
||||
PanelWindow {
|
||||
id: root
|
||||
Variants {
|
||||
model: Quickshell.screens
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
color: "transparent"
|
||||
visible: notificationService.notificationModel.count > 0
|
||||
anchors.top: true
|
||||
anchors.right: true
|
||||
margins.top: (Style.barHeight + Style.marginMedium) * scaling
|
||||
margins.right: Style.marginMedium * scaling
|
||||
implicitWidth: 360 * scaling
|
||||
implicitHeight: Math.min(notificationStack.implicitHeight, (notificationService.maxVisible * 120) * scaling)
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.exclusionMode: ExclusionMode.Ignore
|
||||
required property ShellScreen modelData
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
|
||||
// Use the notification service singleton
|
||||
property var notificationService: NotificationService
|
||||
// Access the notification model from the service
|
||||
property ListModel notificationModel: NotificationService.notificationModel
|
||||
|
||||
// Access the notification model from the service
|
||||
property ListModel notificationModel: notificationService.notificationModel
|
||||
// Track notifications being removed for animation
|
||||
property var removingNotifications: ({})
|
||||
|
||||
// Track notifications being removed for animation
|
||||
property var removingNotifications: ({})
|
||||
screen: modelData
|
||||
color: "transparent"
|
||||
|
||||
// Connect to animation signal from service
|
||||
Component.onCompleted: {
|
||||
notificationService.animateAndRemove.connect(function (notification, index) {
|
||||
// Find the delegate and trigger its animation
|
||||
if (notificationStack.children && notificationStack.children[index]) {
|
||||
let delegate = notificationStack.children[index]
|
||||
if (delegate && delegate.animateOut) {
|
||||
delegate.animateOut()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
// If no notification display activated in settings, then show them all
|
||||
visible: modelData ? (Settings.data.notifications.monitors.includes(modelData.name)
|
||||
|| (Settings.data.notifications.monitors.length === 0))
|
||||
&& (NotificationService.notificationModel.count > 0) : false
|
||||
|
||||
// Main notification container
|
||||
Column {
|
||||
id: notificationStack
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
spacing: 8 * scaling
|
||||
width: 360 * scaling
|
||||
visible: true
|
||||
anchors.top: true
|
||||
anchors.right: true
|
||||
margins.top: (Style.barHeight + Style.marginMedium) * scaling
|
||||
margins.right: Style.marginMedium * scaling
|
||||
implicitWidth: 360 * scaling
|
||||
implicitHeight: Math.min(notificationStack.implicitHeight, (NotificationService.maxVisible * 120) * scaling)
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
// Multiple notifications display
|
||||
Repeater {
|
||||
model: notificationModel
|
||||
delegate: Rectangle {
|
||||
width: 360 * scaling
|
||||
height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginMedium * 2 * scaling))
|
||||
clip: true
|
||||
radius: Style.radiusMedium * scaling
|
||||
border.color: Colors.mPrimary
|
||||
border.width: Math.max(1, Style.borderThin * scaling)
|
||||
color: Colors.mSurface
|
||||
|
||||
// Animation properties
|
||||
property real scaleValue: 0.8
|
||||
property real opacityValue: 0.0
|
||||
property bool isRemoving: false
|
||||
|
||||
// Scale and fade-in animation
|
||||
scale: scaleValue
|
||||
opacity: opacityValue
|
||||
|
||||
// Animate in when the item is created
|
||||
Component.onCompleted: {
|
||||
scaleValue = 1.0
|
||||
opacityValue = 1.0
|
||||
}
|
||||
|
||||
// Animate out when being removed
|
||||
function animateOut() {
|
||||
isRemoving = true
|
||||
scaleValue = 0.8
|
||||
opacityValue = 0.0
|
||||
}
|
||||
|
||||
// Timer for delayed removal after animation
|
||||
Timer {
|
||||
id: removalTimer
|
||||
interval: Style.animationSlow
|
||||
repeat: false
|
||||
onTriggered: {
|
||||
notificationService.forceRemoveNotification(model.rawNotification)
|
||||
// Connect to animation signal from service
|
||||
Component.onCompleted: {
|
||||
NotificationService.animateAndRemove.connect(function (notification, index) {
|
||||
// Find the delegate and trigger its animation
|
||||
if (notificationStack.children && notificationStack.children[index]) {
|
||||
let delegate = notificationStack.children[index]
|
||||
if (delegate && delegate.animateOut) {
|
||||
delegate.animateOut()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Check if this notification is being removed
|
||||
onIsRemovingChanged: {
|
||||
if (isRemoving) {
|
||||
// Remove from model after animation completes
|
||||
removalTimer.start()
|
||||
// Main notification container
|
||||
Column {
|
||||
id: notificationStack
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
spacing: 8 * scaling
|
||||
width: 360 * scaling
|
||||
visible: true
|
||||
|
||||
// Multiple notifications display
|
||||
Repeater {
|
||||
model: notificationModel
|
||||
delegate: Rectangle {
|
||||
width: 360 * scaling
|
||||
height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginMedium * 2 * scaling))
|
||||
clip: true
|
||||
radius: Style.radiusMedium * scaling
|
||||
border.color: Colors.mPrimary
|
||||
border.width: Math.max(1, Style.borderThin * scaling)
|
||||
color: Colors.mSurface
|
||||
|
||||
// Animation properties
|
||||
property real scaleValue: 0.8
|
||||
property real opacityValue: 0.0
|
||||
property bool isRemoving: false
|
||||
|
||||
// Scale and fade-in animation
|
||||
scale: scaleValue
|
||||
opacity: opacityValue
|
||||
|
||||
// Animate in when the item is created
|
||||
Component.onCompleted: {
|
||||
scaleValue = 1.0
|
||||
opacityValue = 1.0
|
||||
}
|
||||
}
|
||||
|
||||
// Animation behaviors
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Style.animationSlow
|
||||
easing.type: Easing.OutExpo
|
||||
//easing.type: Easing.OutBack looks better but notification get clipped on all sides
|
||||
// Animate out when being removed
|
||||
function animateOut() {
|
||||
isRemoving = true
|
||||
scaleValue = 0.8
|
||||
opacityValue = 0.0
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutQuad
|
||||
// Timer for delayed removal after animation
|
||||
Timer {
|
||||
id: removalTimer
|
||||
interval: Style.animationSlow
|
||||
repeat: false
|
||||
onTriggered: {
|
||||
NotificationService.forceRemoveNotification(model.rawNotification)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: contentColumn
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginMedium * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
// Check if this notification is being removed
|
||||
onIsRemovingChanged: {
|
||||
if (isRemoving) {
|
||||
// Remove from model after animation completes
|
||||
removalTimer.start()
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
// Animation behaviors
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
duration: Style.animationSlow
|
||||
easing.type: Easing.OutExpo
|
||||
//easing.type: Easing.OutBack looks better but notification get clipped on all sides
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: contentColumn
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginMedium * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
|
||||
RowLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
NText {
|
||||
text: (model.appName || model.desktopEntry) || "Unknown App"
|
||||
color: Colors.mSecondary
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
}
|
||||
Rectangle {
|
||||
width: 6 * scaling
|
||||
height: 6 * scaling
|
||||
radius: 3 * scaling
|
||||
color: (model.urgency === NotificationUrgency.Critical) ? Colors.mError : (model.urgency === NotificationUrgency.Low) ? Colors.mOnSurface : Colors.mPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
NText {
|
||||
text: NotificationService.formatTimestamp(model.timestamp)
|
||||
color: Colors.mOnSurface
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: (model.appName || model.desktopEntry) || "Unknown App"
|
||||
color: Colors.mSecondary
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
}
|
||||
Rectangle {
|
||||
width: 6 * scaling
|
||||
height: 6 * scaling
|
||||
radius: 3 * scaling
|
||||
color: (model.urgency === NotificationUrgency.Critical) ? Colors.mError : (model.urgency === NotificationUrgency.Low) ? Colors.mOnSurface : Colors.mPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
NText {
|
||||
text: notificationService.formatTimestamp(model.timestamp)
|
||||
text: model.summary || "No summary"
|
||||
font.pointSize: Style.fontSizeLarge * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.mOnSurface
|
||||
wrapMode: Text.Wrap
|
||||
width: 300 * scaling
|
||||
maximumLineCount: 3
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
NText {
|
||||
text: model.body || ""
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
color: Colors.mOnSurface
|
||||
wrapMode: Text.Wrap
|
||||
width: 300 * scaling
|
||||
maximumLineCount: 5
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
NText {
|
||||
text: model.summary || "No summary"
|
||||
font.pointSize: Style.fontSizeLarge * scaling
|
||||
font.weight: Style.fontWeightBold
|
||||
color: Colors.mOnSurface
|
||||
wrapMode: Text.Wrap
|
||||
width: 300 * scaling
|
||||
maximumLineCount: 3
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
NText {
|
||||
text: model.body || ""
|
||||
font.pointSize: Style.fontSizeSmall * scaling
|
||||
color: Colors.mOnSurface
|
||||
wrapMode: Text.Wrap
|
||||
width: 300 * scaling
|
||||
maximumLineCount: 5
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
NIconButton {
|
||||
sizeMultiplier: 0.8
|
||||
showBorder: false
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Style.marginSmall * scaling
|
||||
icon: "close"
|
||||
onClicked: {
|
||||
animateOut()
|
||||
NIconButton {
|
||||
sizeMultiplier: 0.8
|
||||
showBorder: false
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Style.marginSmall * scaling
|
||||
icon: "close"
|
||||
onClicked: {
|
||||
animateOut()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue