From be6ce3c5b488d4f1f8ea845c56b7186178427e4e Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Thu, 4 Jul 2019 18:39:13 -0300
Subject: [PATCH] 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 d028e4cdb..df608235d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1768,6 +1768,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);
             });
@@ -1777,6 +1778,7 @@ var AppIcon = class AppIcon {
             });
             this._draggable.connect('drag-end', () => {
                 this._dragging = false;
+                this.undoScaleAndFade();
                 Main.overview.endItemDrag(this);
             });
         }
@@ -1972,6 +1974,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 ca0257f54..b7ed5874c 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) => {