[gnome-shell/gbsneto/icon-grid-dnd: 35/35] allView: Add visual feedback for dragging outside folders

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

commit 7b979ab19de1d6055715bd1db04ff3884ded33f0
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Tue Jul 2 11:17:02 2019 -0300

    allView: Add visual feedback for dragging outside folders
    
    We need to have a way to visually identify the outside of the
    folder popover as a valid drop target.
    
    Change the background of the AllView's icon grid when dragging
    from a folder.
    
    WIP: colors.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/603

 data/theme/gnome-shell-sass/_common.scss | 10 ++++++++++
 js/ui/appDisplay.js                      | 21 ++++++++++++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 188a9931d..f4c80c81c 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1439,6 +1439,9 @@ StScrollBar {
     .overview-icon { icon-size: 96px; }
   }
   //.app-display { spacing: 20px; }
+  .all-apps:drop .icon-grid:drop {
+    background-color: transparentize($selected_bg_color,.1);
+  }
 
   .system-action-icon {
     background-color: black;
@@ -1552,6 +1555,13 @@ StScrollBar {
     spacing-rows: 5px;
     spacing-columns: 5px;
   }
+  .all-apps:drop .app-folder-popup {
+    -arrow-background-color: black;
+  }
+  .all-apps:drop .app-folder-popup-bin {
+    border-radius: 8px;
+    background-color: black;
+  }
 
   .page-indicator {
     padding: 15px 20px;
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 4a729967f..3302272d0 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -705,16 +705,27 @@ var AllView = class AllView extends BaseAppView {
     _onDragMotion(dragEvent) {
         let appIcon = dragEvent.source;
 
-        // Handle the drag overshoot. When dragging to above the
-        // icon grid, move to the page above; when dragging below,
-        // move to the page below.
-        if (appIcon.parentView == this)
-            this._handleDragOvershoot(dragEvent);
+        if (appIcon.parentView) {
+            if (appIcon.parentView == this) {
+                // Handle the drag overshoot. When dragging to above the
+                // icon grid, move to the page above; when dragging below,
+                // move to the page below.
+                this._handleDragOvershoot(dragEvent);
+            } else {
+                // When dragging from a folder over the icon grid, show a
+                // visual indicator
+                this._scrollView.add_style_pseudo_class('drop');
+                this._grid.add_style_pseudo_class('drop');
+            }
+        }
 
         return DND.DragMotionResult.CONTINUE;
     }
 
     _onDragEnd() {
+        this._scrollView.remove_style_pseudo_class('drop');
+        this._grid.remove_style_pseudo_class('drop');
+
         if (this._dragMonitor) {
             DND.removeDragMonitor(this._dragMonitor);
             this._dragMonitor = null;