brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

messageTray: Stop tweening custom opacity property

Browse Source 
Notifications use a transition that overshoots the target value, however
we can only really do that for the position and not the opacity where
some values would end up out of the valid range.

We currently address this by proxying the actual opacity property in a
javascript property, and clamp it to the valid range in an onUpdate()
callback.

This won't be an option if we want to use Clutter animations, so instead,
use separate tweens for opacity and position.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22
This commit is contained in:
Florian Müllner
2018-07-20 21:46:19 +02:00
parent 870dd84a50
commit fdf24ceecc
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
js/ui/messageTray.js
View File

@ -1249,10 +1249,6 @@ var MessageTray = class MessageTray {
this._notificationExpired = false;
}
_clampOpacity() {
this._bannerBin.opacity = Math.max(0, Math.min(this._bannerBin._opacity, 255));
}
_onIdleMonitorBecameActive() {
this._userActiveWhileNotificationShown = true;
this._updateNotificationTimeout(2000);
@ -1279,7 +1275,6 @@ var MessageTray = class MessageTray {
this._bannerBin.add_actor(this._banner.actor);
this._bannerBin._opacity = 0;
this._bannerBin.opacity = 0;
this._bannerBin.y = -this._banner.actor.height;
this.actor.show();
@ -1327,12 +1322,15 @@ var MessageTray = class MessageTray {
this._notificationState = State.SHOWING;
Tweener.removeTweens(this._bannerBin);
Tweener.addTween(this._bannerBin, {
opacity: 255,
time: ANIMATION_TIME / 1000,
transition: 'linear'
});
Tweener.addTween(this._bannerBin, {
y: 0,
_opacity: 255,
time: ANIMATION_TIME / 1000,
transition: 'easeOutBack',
onUpdate: () => this._clampOpacity,
onComplete: () => {
this._notificationState = State.SHOWN;
this._showNotificationCompleted();
@ -1400,12 +1398,15 @@ var MessageTray = class MessageTray {
if (animate) {
this._notificationState = State.HIDING;
Tweener.removeTweens(this._bannerBin);
Tweener.addTween(this._bannerBin, {
opacity: 0,
time: ANIMATION_TIME / 1000,
transition: 'linear'
});
Tweener.addTween(this._bannerBin, {
y: -this._bannerBin.height,
_opacity: 0,
time: ANIMATION_TIME / 1000,
transition: 'easeOutBack',
onUpdate: () => this._clampOpacity,
onComplete: () => {
this._notificationState = State.HIDDEN;
this._hideNotificationCompleted();