appIcon: Scale and fade itself when starting drag

As per design direction, scale and fade the app icon
when starting dragging it, and show it again if the
drop is accepted. Clutter takes care of animating the
rest of icon positions through implicit animations.

Scale and fade the dragged icon while it's being dragged.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/671
This commit is contained in:
Georges Basile Stavracas Neto 2019-07-04 18:39:13 -03:00
parent 21966afbc6
commit be6ce3c5b4
No known key found for this signature in database
GPG Key ID: 886C17EE170D1385
2 changed files with 20 additions and 10 deletions

View File

@ -1768,6 +1768,7 @@ var AppIcon = class AppIcon {
this._draggable = DND.makeDraggable(this.actor); this._draggable = DND.makeDraggable(this.actor);
this._draggable.connect('drag-begin', () => { this._draggable.connect('drag-begin', () => {
this._dragging = true; this._dragging = true;
this.scaleAndFade();
this._removeMenuTimeout(); this._removeMenuTimeout();
Main.overview.beginItemDrag(this); Main.overview.beginItemDrag(this);
}); });
@ -1777,6 +1778,7 @@ var AppIcon = class AppIcon {
}); });
this._draggable.connect('drag-end', () => { this._draggable.connect('drag-end', () => {
this._dragging = false; this._dragging = false;
this.undoScaleAndFade();
Main.overview.endItemDrag(this); Main.overview.endItemDrag(this);
}); });
} }
@ -1972,6 +1974,24 @@ var AppIcon = class AppIcon {
shouldShowTooltip() { shouldShowTooltip() {
return this.actor.hover && (!this._menu || !this._menu.isOpen); return this.actor.hover && (!this._menu || !this._menu.isOpen);
} }
scaleAndFade() {
this.actor.reactive = false;
this.actor.ease({
scale_x: 0.75,
scale_y: 0.75,
opacity: 128
});
}
undoScaleAndFade() {
this.actor.reactive = true;
this.actor.ease({
scale_x: 1.0,
scale_y: 1.0,
opacity: 255
});
}
}; };
Signals.addSignalMethods(AppIcon.prototype); Signals.addSignalMethods(AppIcon.prototype);

View File

@ -453,16 +453,6 @@ var Dash = class Dash {
let appIcon = new AppDisplay.AppIcon(app, let appIcon = new AppDisplay.AppIcon(app,
{ setSizeManually: true, { setSizeManually: true,
showLabel: false }); showLabel: false });
if (appIcon._draggable) {
appIcon._draggable.connect('drag-begin',
() => {
appIcon.actor.opacity = 50;
});
appIcon._draggable.connect('drag-end',
() => {
appIcon.actor.opacity = 255;
});
}
appIcon.connect('menu-state-changed', appIcon.connect('menu-state-changed',
(appIcon, opened) => { (appIcon, opened) => {