GUACAMOLE-724: Add per-tile visual indication of drag/drop.

guacamole/src/main/frontend/src/app/client/directives/guacClient.js

@@ -532,27 +532,63 @@ angular.module('client').directive('guacClient', [function guacClient() {
             if ($scope.client.clientProperties.focused)
                 client.sendKeyEvent(0, keysym);
         });
-        
+
         /**
-         * Ignores the given event.
+         * Whether a drag/drop operation is currently in progress (the user has
-         * 
+         * dragged a file over the Guacamole connection but has not yet
-         * @param {Event} e The event to ignore.
+         * dropped it).
+         *
+         * @type boolean
          */
-        function ignoreEvent(e) {
+        $scope.dropPending = false;
-           e.preventDefault();
+            
-           e.stopPropagation();
+        /**
-        }
+         * Displays a visual indication that dropping the file currently
-
+         * being dragged is possible. Further propogation and default behavior
-        // Handle and ignore dragenter/dragover
+         * of the given event is automatically prevented.
-        displayContainer.addEventListener("dragenter", ignoreEvent, false);
+         * 
-        displayContainer.addEventListener("dragover",  ignoreEvent, false);
+         * @param {Event} e
-
+         *     The event related to the in-progress drag/drop operation.
-        // File drop event handler
+         */
-        displayContainer.addEventListener("drop", function(e) {
+        var notifyDragStart = function notifyDragStart(e) {
 
             e.preventDefault();
             e.stopPropagation();
 
+            $scope.$apply(() => {
+                $scope.dropPending = true;
+            });
+
+        };
+
+        /**
+         * Removes the visual indication that dropping the file currently
+         * being dragged is possible. Further propogation and default behavior
+         * of the given event is automatically prevented.
+         * 
+         * @param {Event} e
+         *     The event related to the end of the former drag/drop operation.
+         */
+        var notifyDragEnd = function notifyDragEnd(e) {
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            $scope.$apply(() => {
+                $scope.dropPending = false;
+            });
+
+        };
+
+        main.addEventListener('dragenter', notifyDragStart, false);
+        main.addEventListener('dragover',  notifyDragStart, false);
+        main.addEventListener('dragleave', notifyDragEnd,   false);
+
+        // File drop event handler
+        main.addEventListener('drop', function(e) {
+
+            notifyDragEnd(e);
+
             // Ignore file drops if no attached client
             if (!$scope.client)
                 return;

guacamole/src/main/frontend/src/app/client/styles/client.css

@@ -127,3 +127,11 @@ body.client {
     padding-left: 2.5em;
     background-image: url('images/x.svg');
 }
+
+.client .drop-pending .display {
+    background: #3161a9;
+}
+
+.client .drop-pending .display > *{
+    opacity: 0.5;
+}

guacamole/src/main/frontend/src/app/client/templates/guacClient.html

@@ -1,5 +1,8 @@
-<div class="main" guac-resize="mainElementResized"
+<div class="main"
-     guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
+     ng-class="{ 'drop-pending': dropPending }"
+     guac-resize="mainElementResized"
+     guac-touch-drag="clientDrag"
+     guac-touch-pinch="clientPinch">
 
     <!-- Display -->
     <div class="displayOuter">