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

appIcon: Scale and fade itself when starting drag

Browse Source 
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/603
This commit is contained in:
Georges Basile Stavracas Neto 2019-07-04 18:39:13 -03:00
parent 6e3696baad
commit bf322cd51a
No known key found for this signature in database
GPG Key ID: 886C17EE170D1385
2 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
js/ui/appDisplay.js
View File

@ -894,6 +894,8 @@ var AllView = class AllView extends BaseAppView {
this._currentPopup.popdown();
}
source.undoScaleAndFade();
this.moveItem(source, index);
this.removeNudges();
return true;
@ -1358,8 +1360,11 @@ var FolderView = class FolderView extends BaseAppView {
acceptDrop(source, actor, x, y, time) {
let [index, dragLocation] = this.canDropAt(x, y);
let sourceIndex = this._allItems.indexOf(source);
let success = index != -1;
source.undoScaleAndFade();
if (success)
this.moveItem(source, index);
@ -1569,8 +1574,10 @@ var FolderIcon = class FolderIcon {
}
acceptDrop(source, actor, x, y, time) {
if (!this._canDropAt(source))
if (!this._canDropAt(source)) {
source.undoScaleAndFade();
return true;
}
let app = source.app;
let folderApps = this._folder.get_strv('apps');
@ -1848,6 +1855,7 @@ var AppIcon = class AppIcon {
this._view = view;
this.actor = new St.Button({ style_class: 'app-well-app',
pivot_point: new Clutter.Point({x: 0.5, y: 0.5}),
reactive: true,
button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO,
can_focus: true,
@ -1894,6 +1902,7 @@ var AppIcon = class AppIcon {
this._draggable = DND.makeDraggable(this.actor);
this._draggable.connect('drag-begin', () => {
this._dragging = true;
this.scaleAndFade();
this._removeMenuTimeout();
Main.overview.beginItemDrag(this);
});
@ -1903,6 +1912,7 @@ var AppIcon = class AppIcon {
});
this._draggable.connect('drag-end', () => {
this._dragging = false;
this.undoScaleAndFade();
Main.overview.endItemDrag(this);
});
}
@ -2126,6 +2136,24 @@ var AppIcon = class AppIcon {
return this.actor.hover && (!this._menu || !this._menu.isOpen);
}
scaleAndFade() {
this.actor.save_easing_state();
this.actor.reactive = false;
this.actor.scale_x = 0.75;
this.actor.scale_y = 0.75;
this.actor.opacity = 128;
this.actor.restore_easing_state();
}
undoScaleAndFade() {
this.actor.save_easing_state();
this.actor.reactive = true;
this.actor.scale_x = 1.0;
this.actor.scale_y = 1.0;
this.actor.opacity = 255;
this.actor.restore_easing_state();
}
get view() {
return this._view;
}

10
js/ui/dash.js
View File

@ -478,16 +478,6 @@ var Dash = class Dash {
let appIcon = new AppDisplay.AppIcon(app, null,
{ setSizeManually: true,
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, opened) => {