Skip to content

feat: enhance notification animations and visual effects #1337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2025
Merged

feat: enhance notification animations and visual effects #1337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 3 additions & 31 deletions panels/notification/center/NormalNotify.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,6 @@ NotifyItem {
implicitWidth: impl.implicitWidth
implicitHeight: impl.implicitHeight

property var removedCallback

states: [
State {
name: "removing"
PropertyChanges { target: root; x: root.width; opacity: 0}
}
]

transitions: Transition {
to: "removing"
ParallelAnimation {
NumberAnimation { properties: "x"; duration: 300; easing.type: Easing.Linear }
NumberAnimation { properties: "opacity"; duration: 300; easing.type: Easing.Linear }
}
onRunningChanged: {
if (!running && root.removedCallback) {
root.removedCallback()
root.removedCallback = undefined
}
}
}

Control {
id: impl
anchors.fill: parent
Expand All @@ -54,18 +31,13 @@ NotifyItem {
strongInteractive: root.strongInteractive
contentIcon: root.contentIcon
contentRowCount: root.contentRowCount
indexInGroup: root.indexInGroup

onRemove: function () {
root.removedCallback = function () {
root.remove()
}
root.state = "removing"
root.remove()
}
onDismiss: function () {
root.removedCallback = function () {
root.dismiss()
}
root.state = "removing"
root.dismiss()
}
onActionInvoked: function (actionId) {
root.actionInvoked(actionId)
Expand Down
1 change: 1 addition & 0 deletions panels/notification/center/NotifyCenter.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ FocusScope {
palette: DTK.palette

property alias model: notifyModel
property alias viewPanelShown: view.viewPanelShown
property int maxViewHeight: 400
property int stagingViewCount: 0

Expand Down
129 changes: 109 additions & 20 deletions panels/notification/center/NotifyView.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import org.deepin.dtk 1.0
import org.deepin.ds
import org.deepin.ds.notificationcenter

Control {
id: root
focus: true

required property NotifyModel notifyModel
property alias viewPanelShown: view.panelShown
readonly property real viewHeight: view.contentHeight
readonly property int viewCount: view.count

Expand All @@ -28,6 +30,7 @@ Control {
// activeFocusOnTab: true
ScrollBar.vertical: ScrollBar { }
property int nextIndex: -1
property bool panelShown: false

onNextIndexChanged: {
if (nextIndex >= 0 && count > 0) {
Expand All @@ -52,26 +55,112 @@ Control {
notifySetting.toggle();
}
}
// remove: Transition {
// ParallelAnimation {
// NumberAnimation { properties: "y"; duration: 300 }
// }
// }
// add: Transition {
// ParallelAnimation {
// NumberAnimation { properties: "y"; duration: 300 }
// }
// }
// addDisplaced: Transition {
// ParallelAnimation {
// NumberAnimation { properties: "y"; duration: 300 }
// }
// }
// moveDisplaced: Transition {
// ParallelAnimation {
// NumberAnimation { properties: "y"; duration: 300 }
// }
// }
add: Transition {
id: addTrans
enabled: view.panelShown

NumberAnimation {
properties: "y"
from: {
if (addTrans.ViewTransition.item.objectName.startsWith("overlap-")) {
// 24: group notify overlap height
return addTrans.ViewTransition.destination.y + view.spacing + 24
} else if (addTrans.ViewTransition.item.indexInGroup === 0) {
return addTrans.ViewTransition.destination.y - view.spacing - 24
} else {
return addTrans.ViewTransition.destination.y
}
}
duration: 400
easing.type: Easing.OutQuart
}

NumberAnimation {
property: "opacity";
from: {
if (addTrans.ViewTransition.item.objectName.startsWith("overlap-")) {
return 0
} else if (addTrans.ViewTransition.item.indexInGroup === 0) {
return 1
} else {
return 0
}
}
to: 1
duration: {
if (addTrans.ViewTransition.item.objectName.startsWith("overlap-")) {
return 0
} else if (addTrans.ViewTransition.item.indexInGroup === 0) {
return 100
} else {
return 600
}
}
easing.type: Easing.OutExpo
}
}

remove: Transition {
id: removeTrans
NumberAnimation {
properties: "y"
to: {
if (removeTrans.ViewTransition.item.objectName.startsWith("overlap-")) {
return removeTrans.ViewTransition.destination.y + view.spacing + 24
} else if (removeTrans.ViewTransition.item.indexInGroup === 1) {
return removeTrans.ViewTransition.destination.y - view.spacing - 24
} else if (removeTrans.ViewTransition.item.indexInGroup === 2) {
return removeTrans.ViewTransition.destination.y - view.spacing - 24
} else {
return removeTrans.ViewTransition.destination.y
}
}
duration: 400
easing.type: Easing.OutQuart
}

NumberAnimation {
property: "scale";
from: 1
to: {
if (removeTrans.ViewTransition.item.indexInGroup === 1) {
return 0.9
} else if (removeTrans.ViewTransition.item.indexInGroup === 2) {
return 0.9
} else {
return 1
}
}
duration: 600
easing.type: Easing.OutExpo
}

NumberAnimation {
property: "opacity";
to: 0
duration: {
if (removeTrans.ViewTransition.item.indexInGroup === 0) {
return 100
} else if (removeTrans.ViewTransition.item.objectName.startsWith("overlap-")) {
return 100
} else {
return 600
}
}
easing.type: Easing.OutExpo
}
}

addDisplaced: Transition {
id: addDisplacedTrans
NumberAnimation { property: "y"; duration: 400; easing.type: Easing.OutQuart}
NumberAnimation { property: "opacity"; to: 1.0; duration: 600; easing.type: Easing.OutExpo}
}

removeDisplaced: Transition {
id: removeDisplacedTrans
NumberAnimation { properties: "y"; duration: 400; easing.type: Easing.OutQuart}
}
}

background: BoundingRectangle {}
Expand Down
4 changes: 4 additions & 0 deletions panels/notification/center/NotifyViewDelegate.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ DelegateChooser {
width: NotifyStyle.contentItem.width
appName: model.appName
activeFocusOnTab: true
z: index

Loader {
anchors.fill: parent
Expand Down Expand Up @@ -63,6 +64,7 @@ DelegateChooser {
objectName: "normal-" + model.appName
width: NotifyStyle.contentItem.width
activeFocusOnTab: true
z: index

appName: model.appName
iconName: model.iconName
Expand All @@ -74,6 +76,7 @@ DelegateChooser {
contentIcon: model.contentIcon
contentRowCount: model.contentRowCount
defaultAction: model.defaultAction
indexInGroup: model.indexInGroup

Loader {
anchors.fill: parent
Expand Down Expand Up @@ -126,6 +129,7 @@ DelegateChooser {
objectName: "overlap-" + model.appName
width: NotifyStyle.contentItem.width
activeFocusOnTab: true
z: index

count: model.overlapCount
appName: model.appName
Expand Down
12 changes: 4 additions & 8 deletions panels/notification/center/OverlapNotify.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,12 @@ NotifyItem {
contentIcon: root.contentIcon
contentRowCount: root.contentRowCount
enableDismissed: root.enableDismissed
indexInGroup: root.indexInGroup
onRemove: function () {
root.removedCallback = function () {
root.remove()
}
root.state = "removing"
root.remove()
}
onDismiss: function () {
root.removedCallback = function () {
root.dismiss()
}
root.state = "removing"
root.dismiss()
}
onActionInvoked: function (actionId) {
root.actionInvoked(actionId)
Expand All @@ -84,6 +79,7 @@ NotifyItem {

OverlapIndicator {
id: indicator
enableAnimation: root.ListView.view.panelShown
anchors {
bottom: parent.bottom
left: parent.left
Expand Down
4 changes: 4 additions & 0 deletions panels/notification/center/notifyitem.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ class AppNotifyItem : public QObject
void updateActions();
void updateStrongInteractive();

int indexInGroup() const { return m_indexInGroup; }
void setIndexInGroup(int index) { m_indexInGroup = index; }

void refresh();

bool pinned() const;
Expand All @@ -54,6 +57,7 @@ class AppNotifyItem : public QObject
NotifyEntity m_entity;
bool m_pinned = false;
bool m_strongInteractive = false;
int m_indexInGroup = -1;
};

class BubbleNotifyItem : public AppNotifyItem
Expand Down
6 changes: 5 additions & 1 deletion panels/notification/center/notifymodel.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ void NotifyModel::expandApp(int row)
for (int i = 0; i < notifies.size(); i++) {
auto item = notifies[i];
m_appNotifies.insert(start + i, item);
item->setIndexInGroup(i);
}
endInsertRows();
}
Expand Down Expand Up @@ -724,6 +725,8 @@ QVariant NotifyModel::data(const QModelIndex &index, int role) const
}
} else if (role == NotifyRole::NotifyContentRowCount) {
return NotifySetting::instance()->contentRowCount();
} else if (role == NotifyRole::NotifyIndexInGroup) {
return notify->indexInGroup();
}
return QVariant::fromValue(notify);
}
Expand Down Expand Up @@ -778,7 +781,8 @@ QHash<int, QByteArray> NotifyModel::roleNames() const
{NotifyStrongInteractive, "strongInteractive"},
{NotifyContentIcon, "contentIcon"},
{NotifyOverlapCount, "overlapCount"},
{NotifyContentRowCount, "contentRowCount"}};
{NotifyContentRowCount, "contentRowCount"},
{NotifyIndexInGroup, "indexInGroup"}};
return roles;
}

Expand Down
3 changes: 2 additions & 1 deletion panels/notification/center/notifymodel.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ class NotifyModel : public QAbstractListModel
NotifyStrongInteractive,
NotifyContentIcon,
NotifyOverlapCount,
NotifyContentRowCount
NotifyContentRowCount,
NotifyIndexInGroup
};
NotifyModel(QObject *parent = nullptr);

Expand Down
8 changes: 8 additions & 0 deletions panels/notification/center/package/main.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,12 @@ Window {
function onVisibleChanged() {
if (Panel.visible) {
notifyStaging.model.open()
DS.singleShot(100, function() {
notifyCenter.viewPanelShown = true
})
} else {
notifyStaging.model.close()
notifyCenter.viewPanelShown = false
}
}
}
Expand All @@ -127,8 +131,12 @@ Window {
function onVisibleChanged() {
if (Panel.visible) {
notifyCenter.model.open()
DS.singleShot(100, function() {
notifyCenter.viewPanelShown = true
})
} else {
notifyCenter.model.close()
notifyCenter.viewPanelShown = false
}
}
}
Expand Down
1 change: 1 addition & 0 deletions panels/notification/plugin/NotifyItem.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ FocusScope {
property bool strongInteractive: false
property string contentIcon: "deepin-editor"
property int contentRowCount: 6
property int indexInGroup: -1

signal remove()
signal dismiss()
Expand Down
Loading