From bf322cd51a887b6f3fe3dc8ead6a6a41641beca1 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/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 80a85674a..c6a8b27e9 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -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;
     }
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) => {