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

[Florian Müllner <fmuellner src gnome org>]

commit cc3519332c38d56763c57a3fcdabb66a2e8a476f
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 {