When a user drags a card over a column, highlight the column border

Summary:
Ref T10334. Partly, this just improves visual feedback for all drag operations. After D20242, we can have cases where you (for example) drag a low-priority node to a very tall column on a priority-ordered workboard. In this case, the actual dashed-border-drop-target may not be on screen.

We might make the column scroll or put some kind of hint in the UI in this case, but an easy starting point is just to make the "yes, you're targeting this column" state a bit more clear.

Test Plan: Dragged tasks between columns, saw the border higlight on the target columns. This is very tricky to take a screenshot of.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T10334

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'conpherence.pkg.css' => '3c8a0668',
     'conpherence.pkg.js' => '020aebcf',
     'core.pkg.css' => '34ce1741',
-    'core.pkg.js' => '9eb1254b',
+    'core.pkg.js' => 'b96c872e',
     'differential.pkg.css' => '1755a478',
     'differential.pkg.js' => '67e02996',
     'diffusion.pkg.css' => '42c75c37',
@@ -178,7 +178,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' => '8c536f90',
-    'rsrc/css/phui/workboards/phui-workpanel.css' => 'bd546a49',
+    'rsrc/css/phui/workboards/phui-workpanel.css' => '7e12d43c',
     'rsrc/css/sprite-login.css' => '18b368a6',
     'rsrc/css/sprite-tokens.css' => 'f1896dc5',
     'rsrc/css/syntax/syntax-default.css' => '055fc231',
@@ -409,9 +409,9 @@ 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' => '3a8c42a3',
+    'rsrc/js/application/projects/WorkboardBoard.js' => 'fd96a6e8',
     'rsrc/js/application/projects/WorkboardCard.js' => '9a513421',
-    'rsrc/js/application/projects/WorkboardColumn.js' => 'b451fd4c',
+    'rsrc/js/application/projects/WorkboardColumn.js' => '1f71e559',
     'rsrc/js/application/projects/WorkboardController.js' => '42c7a5a7',
     'rsrc/js/application/projects/behavior-project-boards.js' => '05c74d65',
     'rsrc/js/application/projects/behavior-project-create.js' => '34c53422',
@@ -434,7 +434,7 @@ return array(
     'rsrc/js/application/uiexample/notification-example.js' => '29819b75',
     'rsrc/js/core/Busy.js' => '5202e831',
     'rsrc/js/core/DragAndDropFileUpload.js' => '4370900d',
-    'rsrc/js/core/DraggableList.js' => 'd594c805',
+    'rsrc/js/core/DraggableList.js' => '8437c663',
     'rsrc/js/core/Favicon.js' => '7930776a',
     'rsrc/js/core/FileUpload.js' => 'ab85e184',
     'rsrc/js/core/Hovercard.js' => '074f0783',
@@ -727,9 +727,9 @@ return array(
     'javelin-view-renderer' => '9aae2b66',
     'javelin-view-visitor' => '308f9fe4',
     'javelin-websocket' => 'fdc13e4e',
-    'javelin-workboard-board' => '3a8c42a3',
+    'javelin-workboard-board' => 'fd96a6e8',
     'javelin-workboard-card' => '9a513421',
-    'javelin-workboard-column' => 'b451fd4c',
+    'javelin-workboard-column' => '1f71e559',
     'javelin-workboard-controller' => '42c7a5a7',
     'javelin-workflow' => '958e9045',
     'maniphest-report-css' => '3d53188b',
@@ -755,7 +755,7 @@ return array(
     'phabricator-diff-changeset-list' => '04023d82',
     'phabricator-diff-inline' => 'a4a14a94',
     'phabricator-drag-and-drop-file-upload' => '4370900d',
-    'phabricator-draggable-list' => 'd594c805',
+    'phabricator-draggable-list' => '8437c663',
     'phabricator-fatal-config-template-css' => '20babf50',
     'phabricator-favicon' => '7930776a',
     'phabricator-feed-css' => 'd8b6e3f8',
@@ -854,7 +854,7 @@ return array(
     'phui-workboard-color-css' => 'e86de308',
     'phui-workboard-view-css' => '74fc9d98',
     'phui-workcard-view-css' => '8c536f90',
-    'phui-workpanel-view-css' => 'bd546a49',
+    'phui-workpanel-view-css' => '7e12d43c',
     'phuix-action-list-view' => 'c68f183f',
     'phuix-action-view' => 'aaa08f3b',
     'phuix-autocomplete' => '8f139ef0',
@@ -1034,6 +1034,10 @@ return array(
       'javelin-behavior',
       'javelin-dom',
     ),
+    '1f71e559' => array(
+      'javelin-install',
+      'javelin-workboard-card',
+    ),
     '1ff278aa' => array(
       'phui-button-css',
     ),
@@ -1188,15 +1192,6 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
-    '3a8c42a3' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'javelin-workboard-column',
-    ),
     '3b4899b0' => array(
       'javelin-behavior',
       'phabricator-prefab',
@@ -1540,6 +1535,9 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
+    '7e12d43c' => array(
+      'phui-workcard-view-css',
+    ),
     '80bff3af' => array(
       'javelin-install',
       'javelin-typeahead-source',
@@ -1557,6 +1555,14 @@ return array(
       'javelin-workflow',
       'phabricator-draggable-list',
     ),
+    '8437c663' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-magical-init',
+    ),
     '87428eb2' => array(
       'javelin-behavior',
       'javelin-diffusion-locate-file-source',
@@ -1843,10 +1849,6 @@ return array(
     'b347a301' => array(
       'javelin-behavior',
     ),
-    'b451fd4c' => array(
-      'javelin-install',
-      'javelin-workboard-card',
-    ),
     'b517bfa0' => array(
       'phui-oi-list-view-css',
     ),
@@ -1885,9 +1887,6 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
-    'bd546a49' => array(
-      'phui-workcard-view-css',
-    ),
     'bdce4d78' => array(
       'javelin-install',
       'javelin-util',
@@ -1986,14 +1985,6 @@ return array(
     'd3799cb4' => array(
       'javelin-install',
     ),
-    'd594c805' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-magical-init',
-    ),
     'd8a86cfb' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2129,6 +2120,15 @@ return array(
       'javelin-magical-init',
       'javelin-util',
     ),
+    'fd96a6e8' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'javelin-workboard-column',
+    ),
     'fdc13e4e' => array(
       'javelin-install',
     ),

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

@@ -137,3 +137,11 @@
 .phui-workpanel-view.project-panel-over-limit .phui-header-shell {
   border-color: {$red};
 }
+
+.phui-workpanel-view .phui-box-grey {
+  border: 1px solid transparent;
+}
+
+.phui-workpanel-view.workboard-column-drop-target .phui-box-grey {
+  border-color: {$lightblueborder};
+}

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

@@ -116,7 +116,8 @@ JX.install('WorkboardBoard', {
           .setOuterContainer(this.getRoot())
           .setFindItemsHandler(JX.bind(column, column.getCardNodes))
           .setCanDragX(true)
-          .setHasInfiniteHeight(true);
+          .setHasInfiniteHeight(true)
+          .setIsDropTargetHandler(JX.bind(column, column.setIsDropTarget));
 
         if (this.getOrder() !== 'natural') {
           list.setCompareHandler(JX.bind(column, column.compareHandler));

webroot/rsrc/js/application/projects/WorkboardColumn.js

@@ -188,6 +188,11 @@ JX.install('WorkboardColumn', {
       return this._compareVectors(u_vec, v_vec);
     },
 
+    setIsDropTarget: function(is_target) {
+      var node = this.getWorkpanelNode();
+      JX.DOM.alterClass(node, 'workboard-column-drop-target', is_target);
+    },
+
     _getCardsSortedNaturally: function() {
       var list = [];
 

webroot/rsrc/js/core/DraggableList.js

@@ -40,6 +40,7 @@ JX.install('DraggableList', {
   properties : {
     findItemsHandler: null,
     compareHandler: null,
+    isDropTargetHandler: null,
     canDragX: false,
     outerContainer: null,
     hasInfiniteHeight: false
@@ -318,7 +319,7 @@ JX.install('DraggableList', {
             }
           }
 
-          JX.DOM.alterClass(root, 'drag-target-list', is_target);
+          group[ii]._setIsDropTarget(is_target);
         }
       } else {
         target_list = this;
@@ -368,6 +369,18 @@ JX.install('DraggableList', {
       return this;
     },
 
+    _setIsDropTarget: function(is_target) {
+      var root = this.getRootNode();
+      JX.DOM.alterClass(root, 'drag-target-list', is_target);
+
+      var handler = this.getIsDropTargetHandler();
+      if (handler) {
+        handler(is_target);
+      }
+
+      return this;
+    },
+
     _getOrderedTarget: function(src_list, src_node) {
       var targets = this._getTargets();
 
@@ -633,7 +646,7 @@ JX.install('DraggableList', {
 
       var group = this._group;
       for (var ii = 0; ii < group.length; ii++) {
-        JX.DOM.alterClass(group[ii].getRootNode(), 'drag-target-list', false);
+        group[ii]._setIsDropTarget(false);
         group[ii]._clearTarget();
       }