[gnome-shell/gbsneto/icon-grid-part2: 27/29] folderIcon: Add visual drag-over feedback

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

commit c229fdd15000cf6980b9328f3afc8d9dc8560c6a
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Mon Jul 1 21:37:35 2019 -0300

    folderIcon: Add visual drag-over feedback
    
    WIP: This is not exactly what was discussed on IRC, but
    it's looking alright as a first iteration. Design feedback
    welcomed.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/603

 data/theme/gnome-shell-sass/_common.scss |  3 +++
 js/ui/appDisplay.js                      | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 5e377df15..8731ba48d 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1514,6 +1514,9 @@ StScrollBar {
       border-image: none;
       background-image: none;
     }
+    &:drop .overview-icon {
+      background-color: transparentize($selected_bg_color,.15);
+    }
     &:active .overview-icon,
     &:checked .overview-icon {
       background-color: transparentize(darken($osd_bg_color,10%), 0.5);
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3f2387bfc..2248560d9 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1358,11 +1358,29 @@ var FolderIcon = class FolderIcon {
     }
 
     _onDragBegin() {
+        this._dragMonitor = {
+            dragMotion: this._onDragMotion.bind(this),
+        };
+        DND.addDragMonitor(this._dragMonitor);
+
         this._parentView.inhibitEventBlocker();
     }
 
+    _onDragMotion(dragEvent) {
+        let target = dragEvent.targetActor;
+
+        if (!this.actor.contains(target) || !this._canDropAt(dragEvent.source))
+            this.actor.remove_style_pseudo_class('drop');
+        else
+            this.actor.add_style_pseudo_class('drop');
+
+        return DND.DragMotionResult.CONTINUE;
+    }
+
     _onDragEnd() {
+        this.actor.remove_style_pseudo_class('drop');
         this._parentView.uninhibitEventBlocker();
+        DND.removeDragMonitor(this._dragMonitor);
     }
 
     _canDropAt(source) {