Dim the action drop preview element when the cursor approaches

Summary:
Depends on D20308. Ref T5474. The element which previews what will happen when you drop a task somewhere can cover the bottom part of the rightmost column on a workboard.

To fix this, I'm trying to just fade it out if you put your cursor over it. I tried to do this in a simple way previously (":hover" + "opacity: 0.25") but it doesn't actually work because "pointer-events: none" stops ":hover" from working.

Instead, do this in Javascript. This is a little more complicated but: it works; and we can do the fade when you get //near// the element instead of actually over it, which feels a little better.

Test Plan:
  - Shrank window to fairly small size so that the preview could cover up stuff on the workboard.
  - Dragged a card toward the rightmost column.
  - Before: drop action preview covered some workboard stuff.
  - After: preview faded out as my cursor approached.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T5474

Differential Revision: https://secure.phabricator.com/D20320

resources/celerity/map.php

@@ -179,7 +179,7 @@ return array(
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'e86de308',
     'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98',
     'rsrc/css/phui/workboards/phui-workcard.css' => '9e9eb0df',
-    'rsrc/css/phui/workboards/phui-workpanel.css' => '4e4ec9f0',
+    'rsrc/css/phui/workboards/phui-workpanel.css' => 'f43b8c7f',
     'rsrc/css/sprite-login.css' => '18b368a6',
     'rsrc/css/sprite-tokens.css' => 'f1896dc5',
     'rsrc/css/syntax/syntax-default.css' => '055fc231',
@@ -409,7 +409,7 @@ return array(
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => 'd12d214f',
     'rsrc/js/application/policy/behavior-policy-control.js' => '0eaa33a9',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '9347f172',
-    'rsrc/js/application/projects/WorkboardBoard.js' => '3ba8e6ad',
+    'rsrc/js/application/projects/WorkboardBoard.js' => '223af34e',
     'rsrc/js/application/projects/WorkboardCard.js' => '0392a5d8',
     'rsrc/js/application/projects/WorkboardCardTemplate.js' => '2a61f8d4',
     'rsrc/js/application/projects/WorkboardColumn.js' => 'c3d24e63',
@@ -737,7 +737,7 @@ return array(
     'javelin-view-renderer' => '9aae2b66',
     'javelin-view-visitor' => '308f9fe4',
     'javelin-websocket' => 'fdc13e4e',
-    'javelin-workboard-board' => '3ba8e6ad',
+    'javelin-workboard-board' => '223af34e',
     'javelin-workboard-card' => '0392a5d8',
     'javelin-workboard-card-template' => '2a61f8d4',
     'javelin-workboard-column' => 'c3d24e63',
@@ -869,7 +869,7 @@ return array(
     'phui-workboard-color-css' => 'e86de308',
     'phui-workboard-view-css' => '74fc9d98',
     'phui-workcard-view-css' => '9e9eb0df',
-    'phui-workpanel-view-css' => '4e4ec9f0',
+    'phui-workpanel-view-css' => 'f43b8c7f',
     'phuix-action-list-view' => 'c68f183f',
     'phuix-action-view' => 'aaa08f3b',
     'phuix-autocomplete' => '8f139ef0',
@@ -1073,6 +1073,18 @@ return array(
       'javelin-behavior',
       'javelin-request',
     ),
+    '223af34e' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'javelin-workboard-column',
+      'javelin-workboard-header-template',
+      'javelin-workboard-card-template',
+      'javelin-workboard-order-template',
+    ),
     '225bbb98' => array(
       'javelin-install',
       'javelin-reactor',
@@ -1227,18 +1239,6 @@ return array(
       'javelin-behavior',
       'phabricator-prefab',
     ),
-    '3ba8e6ad' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'javelin-workboard-column',
-      'javelin-workboard-header-template',
-      'javelin-workboard-card-template',
-      'javelin-workboard-order-template',
-    ),
     '3dc5ad43' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1351,9 +1351,6 @@ return array(
       'phuix-icon-view',
       'javelin-behavior-phabricator-gesture',
     ),
-    '4e4ec9f0' => array(
-      'phui-workcard-view-css',
-    ),
     '4e61fa88' => array(
       'javelin-behavior',
       'javelin-aphlict',
@@ -2144,6 +2141,9 @@ return array(
       'phabricator-darklog',
       'phabricator-darkmessage',
     ),
+    'f43b8c7f' => array(
+      'phui-workcard-view-css',
+    ),
     'f51e9c17' => array(
       'javelin-behavior',
       'javelin-stratcom',

webroot/rsrc/css/phui/workboards/phui-workpanel.css

@@ -189,10 +189,7 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
   border: 1px solid {$lightblueborder};
   padding: 4px 0;
-}
+  background: #fff;
-
-.workboard-drop-preview:hover {
-  opacity: 0.25;
 }
 
 .workboard-drop-preview li {
@@ -225,3 +222,18 @@
   background: {$blue};
   color: #fff;
 }
+
+.workboard-drop-preview-fade {
+  animation: 0.1s workboard-drop-preview-fade-out;
+  opacity: 0.25;
+}
+
+@keyframes workboard-drop-preview-fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}

webroot/rsrc/js/application/projects/WorkboardBoard.js

@@ -43,6 +43,8 @@ JX.install('WorkboardBoard', {
     _dropPreviewListNode: null,
     _previewPHID: null,
     _hidePreivew: false,
+    _previewPositionVector: null,
+    _previewDimState: false,
 
     getRoot: function() {
       return this._root;
@@ -148,6 +150,39 @@ JX.install('WorkboardBoard', {
       var on_out = JX.bind(this, this._hideTriggerPreview);
       JX.Stratcom.listen('mouseover', 'trigger-preview', on_over);
       JX.Stratcom.listen('mouseout', 'trigger-preview', on_out);
+
+      var on_move = JX.bind(this, this._dimPreview);
+      JX.Stratcom.listen('mousemove', null, on_move);
+    },
+
+    _dimPreview: function(e) {
+      var p = this._previewPositionVector;
+      if (!p) {
+        return;
+      }
+
+      // When the mouse cursor gets near the drop preview element, fade it
+      // out so you can see through it. We can't do this with ":hover" because
+      // we disable cursor events.
+
+      var cursor = JX.$V(e);
+      var margin = 64;
+
+      var near_x = (cursor.x > (p.x - margin));
+      var near_y = (cursor.y > (p.y - margin));
+      var should_dim = (near_x && near_y);
+
+      this._setPreviewDimState(should_dim);
+    },
+
+    _setPreviewDimState: function(is_dim) {
+      if (is_dim === this._previewDimState) {
+        return;
+      }
+
+      this._previewDimState = is_dim;
+      var node = this._getDropPreviewNode();
+      JX.DOM.alterClass(node, 'workboard-drop-preview-fade', is_dim);
     },
 
     _showTriggerPreview: function(e) {
@@ -325,6 +360,7 @@ JX.install('WorkboardBoard', {
 
       if (!effects.length) {
         JX.DOM.remove(node);
+        this._previewPositionVector = null;
         return;
       }
 
@@ -336,6 +372,10 @@ JX.install('WorkboardBoard', {
 
       JX.DOM.setContent(this._getDropPreviewListNode(), items);
       document.body.appendChild(node);
+
+      // Undim the drop preview element if it was previously dimmed.
+      this._setPreviewDimState(false);
+      this._previewPositionVector = JX.$V(node);
     },
 
     _getDropPreviewNode: function() {