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

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

commit 34dbd183c958a34bcde9f7f83506e77ecf72ee4d
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/664

 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 5e377df153..8731ba48d9 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 0f43e92088..c94f688743 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1377,11 +1377,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._canAccept(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);
     }
 
     _canAccept(source) {