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:
parent
21966afbc6
commit
be6ce3c5b4
@ -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);
|
||||||
|
|
||||||
|
@ -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) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user