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

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

commit 5d71ea7d94c03a1c93a3fa70bd30f5102aada75d
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.
    
    Use the new DIALOG_SHADE_NORMAL variable in the other places where its color
    was hardcoded.
    
    Related: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3092
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1447

 js/ui/appDisplay.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3f2f605429..4e160f621e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -38,6 +38,9 @@ const OVERSHOOT_TIMEOUT = 1000;
 
 const DELAYED_MOVE_TIMEOUT = 200;
 
+const DIALOG_SHADE_NORMAL = Clutter.Color.from_pixel(0x000000cc);
+const DIALOG_SHADE_HIGHLIGHT = Clutter.Color.from_pixel(0x00000055);
+
 let discreteGpuAvailable = false;
 
 function _getCategories(info) {
@@ -2210,7 +2213,7 @@ var AppFolderDialog = GObject.registerClass({
         });
 
         this.ease({
-            background_color: Clutter.Color.from_pixel(0x000000cc),
+            background_color: DIALOG_SHADE_NORMAL,
             duration: FOLDER_DIALOG_ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
@@ -2361,6 +2364,18 @@ var AppFolderDialog = GObject.registerClass({
         return this.navigate_focus(null, direction, false);
     }
 
+    _setLighterBackground(lighter) {
+        const backgroundColor = lighter
+            ? DIALOG_SHADE_HIGHLIGHT
+            : DIALOG_SHADE_NORMAL;
+
+        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 +2387,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 +2416,7 @@ var AppFolderDialog = GObject.registerClass({
 
     handleDragOver(source, actor, x, y) {
         if (this._withinDialog(x, y)) {
+            this._setLighterBackground(false);
             this._removePopdownTimeout();
             this._removeDragMonitor();
         } else {