[gnome-shell/gbsneto/icon-grid-part3: 1/4] appIcon: Scale and fade itself when starting drag

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

commit 083b1532ade66661387bb740f1d996bab3667345
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/671

 js/ui/appDisplay.js | 20 ++++++++++++++++++++
 js/ui/dash.js       | 10 ----------
 2 files changed, 20 insertions(+), 10 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 079af4ff75..523dcaf391 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1776,6 +1776,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);
             });
@@ -1785,6 +1786,7 @@ var AppIcon = class AppIcon {
             });
             this._draggable.connect('drag-end', () => {
                 this._dragging = false;
+                this.undoScaleAndFade();
                 Main.overview.endItemDrag(this);
             });
         }
@@ -1980,6 +1982,24 @@ var AppIcon = class AppIcon {
     shouldShowTooltip() {
         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);
 
diff --git a/js/ui/dash.js b/js/ui/dash.js
index ca0257f543..b7ed5874c2 100644
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -453,16 +453,6 @@ var Dash = class Dash {
         let appIcon = new AppDisplay.AppIcon(app,
                                              { 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) => {