notification animations: slide-in/out popups, staggered center fade, dismiss fade

This commit is contained in:
Damocles 2026-04-13 00:55:04 +02:00
parent b5b2276ff1
commit 608da78cea
2 changed files with 71 additions and 8 deletions

View file

@ -83,6 +83,19 @@ M.PopupPanel {
width: menuWindow.panelWidth width: menuWindow.panelWidth
height: notifContent.height + 12 height: notifContent.height + 12
opacity: 0
Component.onCompleted: fadeIn.start()
NumberAnimation {
id: fadeIn
target: notifItem
property: "opacity"
to: 1
duration: 150
easing.type: Easing.OutCubic
// Stagger by index
Component.onCompleted: fadeIn.from = 0
}
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
@ -225,10 +238,20 @@ M.PopupPanel {
anchors.margins: -4 anchors.margins: -4
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: M.NotifService.dismiss(notifItem.modelData.id) onClicked: _dismissAnim.start()
} }
} }
NumberAnimation {
id: _dismissAnim
target: notifItem
property: "opacity"
to: 0
duration: 150
easing.type: Easing.InCubic
onFinished: M.NotifService.dismiss(notifItem.modelData.id)
}
MouseArea { MouseArea {
id: notifArea id: notifArea
anchors.fill: parent anchors.fill: parent

View file

@ -40,13 +40,15 @@ PanelWindow {
required property int index required property int index
width: popupCol.width width: popupCol.width
height: contentCol.height + 16 height: _targetHeight * _heightScale
opacity: 0 opacity: 0
x: 50 x: 320
clip: true
Component.onCompleted: { readonly property real _targetHeight: contentCol.height + 16
slideIn.start(); property real _heightScale: 0
}
Component.onCompleted: slideIn.start()
ParallelAnimation { ParallelAnimation {
id: slideIn id: slideIn
@ -54,13 +56,21 @@ PanelWindow {
target: popupItem target: popupItem
property: "opacity" property: "opacity"
to: 1 to: 1
duration: 200 duration: 250
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
NumberAnimation { NumberAnimation {
target: popupItem target: popupItem
property: "x" property: "x"
to: 0 to: 0
duration: 350
easing.type: Easing.OutBack
easing.overshoot: 0.5
}
NumberAnimation {
target: popupItem
property: "_heightScale"
to: 1
duration: 250 duration: 250
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
@ -200,11 +210,41 @@ PanelWindow {
} }
} }
ParallelAnimation {
id: slideOut
NumberAnimation {
target: popupItem
property: "opacity"
to: 0
duration: 200
easing.type: Easing.InCubic
}
NumberAnimation {
target: popupItem
property: "x"
to: 320
duration: 250
easing.type: Easing.InCubic
}
NumberAnimation {
target: popupItem
property: "_heightScale"
to: 0
duration: 200
easing.type: Easing.InCubic
}
onFinished: M.NotifService.dismissPopup(popupItem.modelData.id)
}
function animateDismiss() {
slideOut.start();
}
// Click to dismiss // Click to dismiss
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
z: -1 z: -1
onClicked: M.NotifService.dismissPopup(popupItem.modelData.id) onClicked: popupItem.animateDismiss()
} }
} }
} }