notifications: better destroy animation

This commit is contained in:
end-4 2025-04-19 23:46:47 +02:00
parent 6ae0e5f84d
commit 9a82d40ddc
2 changed files with 77 additions and 15 deletions

View file

@ -24,8 +24,8 @@ Item {
Behavior on implicitHeight {
enabled: enableAnimation
NumberAnimation {
duration: Appearance.animation.elementDecelFast.duration
easing.type: Appearance.animation.elementDecelFast.type
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
@ -33,16 +33,33 @@ Item {
root.ready = true
}
function fancyDestroy() {
implicitHeight = 0
notificationRowWrapper.anchors.top = undefined
notificationRowWrapper.anchors.bottom = root.bottom
destroyTimer.start()
function destroyWithAnimation() {
notificationRowWrapper.anchors.left = undefined
notificationRowWrapper.anchors.right = undefined
notificationRowWrapper.anchors.fill = undefined
notificationBackground.anchors.left = undefined
notificationBackground.anchors.right = undefined
notificationBackground.anchors.fill = undefined
notificationRowWrapper.x = width
notificationBackground.x = width
destroyTimer1.start()
}
Timer {
id: destroyTimer
interval: Appearance.animation.elementDecelFast.duration
id: destroyTimer1
interval: Appearance.animation.elementDecel.duration / 2
repeat: false
onTriggered: {
notificationRowWrapper.anchors.top = undefined
notificationRowWrapper.anchors.bottom = root.bottom
implicitHeight = 0
destroyTimer2.start()
}
}
Timer {
id: destroyTimer2
interval: Appearance.animation.elementDecel.duration
repeat: false
onTriggered: {
root.destroy()
@ -61,12 +78,30 @@ Item {
}
// Background
Rectangle {
Item {
id: notificationBackgroundWrapper
anchors.fill: parent
implicitHeight: notificationColumnLayout.implicitHeight
anchors.topMargin: notificationListSpacing
color: (notificationObject.urgency == NotificationUrgency.Critical) ?
Appearance.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
radius: Appearance.rounding.normal
Rectangle {
id: notificationBackground
anchors.fill: parent
anchors.bottom: parent.bottom
color: (notificationObject.urgency == NotificationUrgency.Critical) ?
Appearance.mix(Appearance.m3colors.m3secondaryContainer, Appearance.colors.colLayer2, 0.35) : Appearance.colors.colLayer2
radius: Appearance.rounding.normal
Behavior on x {
enabled: enableAnimation
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
}
}
@ -76,6 +111,15 @@ Item {
anchors.right: parent.right
anchors.top: parent.top
implicitHeight: notificationColumnLayout.implicitHeight + notificationListSpacing
Behavior on x {
enabled: enableAnimation
NumberAnimation {
duration: Appearance.animation.elementDecel.duration
easing.type: Appearance.animation.elementDecel.type
}
}
ColumnLayout {
id: notificationColumnLayout
anchors.left: parent.left

View file

@ -44,7 +44,7 @@ Item {
for (let i = notificationWidgetList.length - 1; i >= 0; i--) {
const widget = notificationWidgetList[i];
if (widget && widget.notificationObject && widget.notificationObject.id === id) {
widget.fancyDestroy();
widget.destroyWithAnimation();
notificationWidgetList.splice(i, 1);
}
}
@ -53,7 +53,10 @@ Item {
Flickable { // Scrollable window
id: flickable
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: statusRow.top
contentHeight: columnLayout.height
clip: true
@ -66,4 +69,19 @@ Item {
// Notifications are added by the above signal handlers
}
}
RowLayout {
id: statusRow
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
StyledText {
Layout.margins: 10
Layout.bottomMargin: 5
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: `${notificationWidgetList.length} Notifications`
}
}
}