shift-shell/components/mobileshell/qml/popups/notifications/NotificationPopupManager.qml

269 lines
11 KiB
QML
Raw Normal View History

notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
/*
* SPDX-FileCopyrightText: 2024 Micah Stanley <stanleymicah@proton.me>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Layouts
import QtQuick.Window
import org.kde.kirigami as Kirigami
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.plasma.private.mobileshell.state as MobileShellState
import org.kde.layershell 1.0 as LayerShell
import org.kde.notificationmanager as NotificationManager
import org.kde.plasma.clock
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
import QtQuick.Controls as Controls
import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.taskmanager 0.1 as TaskManager
/**
* This sets up and manages the notification popups
*/
Window {
id: notificationPopupManager
readonly property int popupWidth: Math.min(Kirigami.Units.gridUnit * 20, Screen.width - Kirigami.Units.gridUnit * 2)
readonly property real openOffset: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3
readonly property int longestLength: Math.max(Screen.width, Screen.height)
property var keyboardInteractivity: LayerShell.Window.KeyboardInteractivityNone
LayerShell.Window.scope: "notification"
LayerShell.Window.anchors: LayerShell.Window.AnchorTop | LayerShell.Window.AnchorHorizontalCenter
LayerShell.Window.layer: LayerShell.Window.LayerOverlay
LayerShell.Window.exclusionZone: -1
LayerShell.Window.keyboardInteractivity: keyboardInteractivity
// This toggles whether to show all the active popup notifications at ones in a list
property bool popupDrawerOpened: false
property var notificationModelType
property QtObject notificationSettings
property QtObject popupNotificationsModel
property QtObject tasksModel
property Clock clockSource
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
property bool inhibited
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
Kirigami.Theme.inherit: false
readonly property color backgroundColor: Qt.darker(Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.95), 1.05)
color: popupDrawerOpened && visible ? backgroundColor : "transparent"
Behavior on color {
ColorAnimation {
duration: Kirigami.Units.veryLongDuration * 1.5
easing.type: Easing.OutExpo
}
}
width: longestLength
height: longestLength
signal timeChanged
Component.onCompleted: ShellUtil.setInputTransparent(notificationPopupManager, true)
Binding {
target: MobileShellState.ShellDBusClient
property: "isNotificationPopupDrawerOpen"
value: popupDrawerOpened
}
// hide on timeout to give time to finish animations
Timer {
id: hideTimeout
interval: Kirigami.Units.veryLongDuration * 1.5
repeat: false
onTriggered: if (notifications.count == 0) notificationPopupManager.visible = false;
}
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
// Update the window touch region to encapsulate the notification area or the whole screen depending on the 'popupDrawerOpened' state
function updateTouchArea() {
ShellUtil.setInputTransparent(notificationPopupManager, false);
if (popupDrawerOpened) {
ShellUtil.setInputRegion(notificationPopupManager, Qt.rect(0, 0, 0, 0));
} else {
// get the height of the popup directly to ensure we get the latest version
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
let popupHeight = Kirigami.Units.gridUnit * 6;
let currentPopup = notifications.objectAt(notifications.currentPopupIndex);
if (currentPopup) {
popupHeight = currentPopup.popupHeight;
} else {
console.warn("popupNotification: could not retrieve current popup height - falling back to a default value")
}
ShellUtil.setInputRegion(notificationPopupManager, Qt.rect((notificationPopupManager.width - notificationPopupManager.popupWidth - Kirigami.Units.gridUnit) / 2, openOffset - Kirigami.Units.gridUnit / 2, notificationPopupManager.popupWidth + Kirigami.Units.gridUnit, popupHeight + Kirigami.Units.gridUnit * ((notifications.count - notifications.currentPopupIndex > 1) ? 4 : 1)));
}
}
// parent the popup notifications inside a Flickable so that they can be scrollable when the drawer state is active
Flickable {
id: flickable
width: notificationPopupManager.width
height: Screen.height
contentHeight: notifications.fullHeight + notificationPopupManager.openOffset
boundsBehavior: Flickable.DragAndOvershootBounds
bottomMargin: Kirigami.Units.gridUnit * 6
interactive: notificationPopupManager.popupDrawerOpened
onDragEnded: flickable.checkDismiss();
onFlickEnded: flickable.checkDismiss();
onDragStarted: {
notifications.recalculateHeight();
atBeginning = flickable.atYBeginning;
atEnd = flickable.atYEnd;
}
onFlickStarted: {
notifications.recalculateHeight();
atBeginning = flickable.atYBeginning;
atEnd = flickable.atYEnd;
}
property bool atBeginning: false
property bool atEnd: false
function checkDismiss() {
let dismissFromTop = atBeginning && flickable.verticalOvershoot < -Kirigami.Units.gridUnit;
let dismissFromBottom = atEnd && flickable.verticalOvershoot > Kirigami.Units.gridUnit;
if (dismissFromTop || dismissFromBottom) {
flickable.dismiss();
}
}
function dismiss() {
notificationPopupManager.popupDrawerOpened = false;
notificationPopupManager.updateTouchArea();
resetContentY.running = true;
}
NumberAnimation on contentY {
id: resetContentY
running: false
to: 0
duration: Kirigami.Units.veryLongDuration * 1.5
easing.type: Easing.OutExpo
}
MouseArea {
// capture taps behind the notifications to close the drawer
id: item
anchors.left: parent.left
anchors.right: parent.right
width: notificationPopupManager.width
height: Math.max(notifications.fullHeight, Screen.height)
onReleased: flickable.dismiss();
Instantiator {
id: notifications
model: popupNotificationsModel
// get the height, drag offset, and idx of the current popup notifition and make it easily accessible by all popup notifications
property int currentPopupHeight: (count > 0 && currentPopupIndex < count && objectAt(currentPopupIndex)) ? objectAt(currentPopupIndex).popupHeight : 0;
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
property int currentDragOffset: 0
property int currentPopupIndex: 0
// calculate the full height of all the notifications combine for scrolling purposes
property int fullHeight: 0
onCountChanged: {
if (count == 0) {
ShellUtil.setInputTransparent(notificationPopupManager, true);
hideTimeout.restart();
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
notificationPopupManager.popupDrawerOpened = false;
fullHeight = 0;
return;
}
notificationPopupManager.visible = true;
notifications.recalculateHeight();
}
function recalculateHeight() {
let findHeight = 0
for (var i = 0; i < count; i++) {
findHeight += notifications.objectAt(i).popupHeight + Kirigami.Units.gridUnit;
}
fullHeight = findHeight;
}
delegate: NotificationPopup {
id: popup
anchors.horizontalCenter: parent.horizontalCenter
z: notifications.count - index
popupWidth: notificationPopupManager.popupWidth
openOffset: notificationPopupManager.openOffset
keyboardInteractivity: notificationPopupManager.keyboardInteractivity
popupNotifications: notifications
popupIndex: index
popupDrawerOpened: notificationPopupManager.popupDrawerOpened
popupModel: model
notificationsModel: popupNotificationsModel
notificationsModelType: notificationModelType
timeDataSource: clockSource
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
timeout: model.timeout
onUpdateTouchArea: notificationPopupManager.updateTouchArea()
onSetInputTransparent: ShellUtil.setInputTransparent(notificationPopupManager, true)
onOpenPopupDrawer: notificationPopupManager.popupDrawerOpened = true
onSetKeyboardFocus: notificationPopupManager.keyboardInteractivity = LayerShell.Window.KeyboardInteractivityOnDemand
onRemoveKeyboardFocus: notificationPopupManager.keyboardInteractivity = LayerShell.Window.KeyboardInteractivityNone
defaultTimeout: notificationSettings.popupTimeout + (model.urls && model.urls.length > 0 ? 5000 : 0)
dismissTimeout: !notificationSettings.permanentJobPopups
&& model.type === NotificationManager.Notifications.JobType
&& model.jobState !== NotificationManager.Notifications.JobStateStopped
? defaultTimeout : 0
onDismissClicked: model.dismissed = true
onExpired: {
if (model.resident) {
// When resident, only mark it as expired so the popup disappears
// but don't actually invalidate the notification
model.expired = true;
} else {
if (notificationModelType === NotificationsModelType.WatchedNotificationsModel) {
popupNotificationsModel.expire(model.notificationId);
} else if (notificationModelType === NotificationsModelType.NotificationsModel) {
popupNotificationsModel.expire(popupNotificationsModel.index(index, 0));
}
notifications: Implement popup notifications This merge request implements a more mobile optimized solution for popup notification. - The current controls are: - Swipe up to move the notification to the notification center. - Swipe left/right to dismiss the notification entirely. - If multiple popup notifications are grouped together, tap on the bottom area to view them in a expanded view. What still needs to be done: - ~~For notification without a default action, tapping on them should probably open up the associated app.~~ Note: I think I will add this in a separate merge request as it probably should be the case regardless if the notification is a popup - ~~Swiping down on a notification currently does nothing. Maybe we should map this to a notification action?~~ Note: I have some ideas I will try later, though for now, I will leave this action blank - ~~The expanded view of notifications should be able to be dismissed by swiping up/down on the top/bottom of the list.~~ Note: Added - Investigate further into how to remove the current desktop popup notifications. - ~~Code clean up.~~ Note: The code is at least a bit better Single popup notification: ![notification_1](/uploads/63d12be6da1dd2676de17940dcadbdfa/notification_1.gif) Multiple popup notifications: ![notification_2](/uploads/907a14b772f66f46040c28342f4dcf02/notification_2.gif) Multiple popup notifications in the expanded view: ![notification_3](/uploads/9a7cd09a6bb8a0f7ee70e5bcf7c29c6b/notification_3.gif) Any feedback would be greatly appreciated.
2024-11-07 16:13:06 +00:00
}
}
Component.onCompleted: {
if (model.type === NotificationManager.Notifications.NotificationType && model.desktopEntry) {
// Register apps that were seen spawning a popup so they can be configured later
// Apps with notifyrc can already be configured anyway
if (!model.notifyRcName) {
notificationSettings.registerKnownApplication(model.desktopEntry);
notificationSettings.save();
}
}
// Tell the model that we're handling the timeout now
popupNotificationsModel.stopTimeout(popupNotificationsModel.index(index, 0));
item.children.push(this);
}
}
}
}
}
}