[gnome-shell/gbsneto/icon-grid-dnd: 110/117] appIcon: Scale and fade itself when starting drag

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit d56de3795baa4138a4ae831aea0923ee050cc9c6
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Jul 4 18:39:13 2019 -0300

    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/603

 js/ui/appDisplay.js | 30 +++++++++++++++++++++++++++++-
 js/ui/dash.js       | 10 ----------
 2 files changed, 29 insertions(+), 11 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 9af2a7916..9dff1d32d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -905,6 +905,8 @@ var AllView = class AllView extends BaseAppView {
                 this._currentPopup.popdown();
         }
 
+        source.undoScaleAndFade();
+
         this.moveItem(source, index);
         this.removeNudges();
         return true;
@@ -1372,8 +1374,11 @@ var FolderView = class FolderView extends BaseAppView {
         [x, y] = this._transformToGridCoordinates(x, y);
 
         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);
 
@@ -1583,8 +1588,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');
@@ -1862,6 +1869,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,
@@ -1908,6 +1916,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);
             });
@@ -1917,6 +1926,7 @@ var AppIcon = class AppIcon {
             });
             this._draggable.connect('drag-end', () => {
                 this._dragging = false;
+                this.undoScaleAndFade();
                 Main.overview.endItemDrag(this);
             });
         }
@@ -2140,6 +2150,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;
     }
diff --git a/js/ui/dash.js b/js/ui/dash.js
index a96b95401..c22cb3e8b 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -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) => {