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

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

commit 7cb9cce872a96f52db16aa0f7797ad620ed466f3
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
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1447

 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 {