[gnome-shell/gbsneto/icon-grid-dnd-fixes: 1/11] appDisplay: Lighten folder dialog background when dragging out

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

commit 923b13ccb7f51eea11e5c6b1f7190df39191e3b1
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Thu Sep 24 10:17:53 2020 -0300

    appDisplay: Lighten folder dialog background when dragging out
    
    As per design feedback, make the app folder dialog background lighter when
    hovering it with an icon. This gives the visual feedback to show that that
    region is a target.
    
    Related: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3092

 js/ui/appDisplay.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3f2f605429..a60cf41f3d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -2361,6 +2361,18 @@ var AppFolderDialog = GObject.registerClass({
         return this.navigate_focus(null, direction, false);
     }
 
+    _setLighterBackground(lighter) {
+        const backgroundColor = lighter
+            ? Clutter.Color.from_pixel(0x00000055)
+            : Clutter.Color.from_pixel(0x000000cc);
+
+        this.ease({
+            backgroundColor,
+            duration: FOLDER_DIALOG_ANIMATION_TIME,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
     _withinDialog(x, y) {
         const childExtents = this.child.get_transformed_extents();
         return childExtents.contains_point(new Graphene.Point({ x, y }));
@@ -2372,7 +2384,12 @@ var AppFolderDialog = GObject.registerClass({
 
         this._dragMonitor = {
             dragMotion: dragEvent => {
-                if (this._withinDialog(dragEvent.x, dragEvent.y)) {
+                const withinDialog =
+                    this._withinDialog(dragEvent.x, dragEvent.y);
+
+                this._setLighterBackground(!withinDialog);
+
+                if (withinDialog) {
                     this._removePopdownTimeout();
                     this._removeDragMonitor();
                 }
@@ -2396,6 +2413,7 @@ var AppFolderDialog = GObject.registerClass({
 
     handleDragOver(source, actor, x, y) {
         if (this._withinDialog(x, y)) {
+            this._setLighterBackground(false);
             this._removePopdownTimeout();
             this._removeDragMonitor();
         } else {