Improve minor workboard drag behaviors

Summary:
Ref T5240.

  - Add proper class when dropping cards.
  - Add proper class when creating new cards.
  - Make X-drag explicit so that it works if there's only one column.
  - Stop tootips when dragging, resume them after dropping.
  - Move CSS rule for consistency.
  - Allow user to hit "Escape" to cancel an in-progress drag.

Test Plan:
  - Dropped cards.
  - Created new cards.
  - X-dragged on a workboard with one column and a dashboard.
  - Dragged over a tooltip (no tip), dropped, moused over tooltip (tip).
  - Hit escape during a drag.

Reviewers: chad

Reviewed By: chad

Subscribers: cspeckmim

Maniphest Tasks: T5240

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

Author: epriestley

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a01828d4',
-    'core.pkg.js' => 'c5178ede',
+    'core.pkg.css' => '764d4c80',
+    'core.pkg.js' => '5b832397',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
     'differential.pkg.js' => '5c2ba922',
@@ -142,7 +142,7 @@
     'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '407eaf5a',
-    'rsrc/css/phui/phui-object-item-list-view.css' => '56aab18d',
+    'rsrc/css/phui/phui-object-item-list-view.css' => 'fe594a65',
     'rsrc/css/phui/phui-pager.css' => 'bea33d23',
     'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
     'rsrc/css/phui/phui-profile-menu.css' => 'ab4fcf5f',
@@ -154,7 +154,7 @@
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524',
-    'rsrc/css/phui/workboards/phui-workcard.css' => '92178913',
+    'rsrc/css/phui/workboards/phui-workcard.css' => '42c703d7',
     'rsrc/css/phui/workboards/phui-workpanel.css' => 'b90970eb',
     'rsrc/css/sprite-login.css' => '60e8560e',
     'rsrc/css/sprite-menu.css' => '9dd65b92',
@@ -368,7 +368,7 @@
     'rsrc/js/application/countdown/timer.js' => 'e4cc26b3',
     'rsrc/js/application/daemon/behavior-bulk-job-reload.js' => 'edf8a145',
     'rsrc/js/application/dashboard/behavior-dashboard-async-panel.js' => '469c0d9e',
-    'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => '82439934',
+    'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => '019f36c4',
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63',
     'rsrc/js/application/differential/ChangesetViewManager.js' => 'a2828756',
@@ -413,7 +413,7 @@
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => '2290aeef',
     'rsrc/js/application/policy/behavior-policy-control.js' => 'ae45872f',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '5e9f347c',
-    'rsrc/js/application/projects/behavior-project-boards.js' => 'ba4fa35c',
+    'rsrc/js/application/projects/behavior-project-boards.js' => '16c76360',
     'rsrc/js/application/projects/behavior-project-create.js' => '065227cc',
     'rsrc/js/application/projects/behavior-reorder-columns.js' => 'e1d25dfb',
     'rsrc/js/application/releeph/releeph-preview-branch.js' => 'b2b4fbaf',
@@ -446,7 +446,7 @@
     'rsrc/js/application/uiexample/notification-example.js' => '8ce821c5',
     'rsrc/js/core/Busy.js' => '59a7976a',
     'rsrc/js/core/DragAndDropFileUpload.js' => 'ad10aeac',
-    'rsrc/js/core/DraggableList.js' => 'f1844746',
+    'rsrc/js/core/DraggableList.js' => '1fe26f18',
     'rsrc/js/core/FileUpload.js' => '477359c8',
     'rsrc/js/core/Hovercard.js' => 'c6f720ff',
     'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2',
@@ -457,7 +457,7 @@
     'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
     'rsrc/js/core/TextAreaUtils.js' => '9e54692d',
     'rsrc/js/core/Title.js' => 'df5e11d2',
-    'rsrc/js/core/ToolTip.js' => '1d298e3a',
+    'rsrc/js/core/ToolTip.js' => '6323f942',
     'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
     'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
     'rsrc/js/core/behavior-autofocus.js' => '7319e029',
@@ -579,7 +579,7 @@
     'javelin-behavior-countdown-timer' => 'e4cc26b3',
     'javelin-behavior-dark-console' => 'f411b6ae',
     'javelin-behavior-dashboard-async-panel' => '469c0d9e',
-    'javelin-behavior-dashboard-move-panels' => '82439934',
+    'javelin-behavior-dashboard-move-panels' => '019f36c4',
     'javelin-behavior-dashboard-query-panel-select' => '453c5375',
     'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
     'javelin-behavior-day-view' => '5c46cff2',
@@ -653,7 +653,7 @@
     'javelin-behavior-phui-profile-menu' => '12884df9',
     'javelin-behavior-policy-control' => 'ae45872f',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
-    'javelin-behavior-project-boards' => 'ba4fa35c',
+    'javelin-behavior-project-boards' => '16c76360',
     'javelin-behavior-project-create' => '065227cc',
     'javelin-behavior-quicksand-blacklist' => '7927a7d3',
     'javelin-behavior-recurring-edit' => '5f1c4d5f',
@@ -741,7 +741,7 @@
     'phabricator-countdown-css' => 'e7544472',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => 'ad10aeac',
-    'phabricator-draggable-list' => 'f1844746',
+    'phabricator-draggable-list' => '1fe26f18',
     'phabricator-fatal-config-template-css' => '8e6c6fcd',
     'phabricator-feed-css' => 'ecd4ec57',
     'phabricator-file-upload' => '477359c8',
@@ -768,7 +768,7 @@
     'phabricator-standard-page-view' => '7b0d68d8',
     'phabricator-textareautils' => '9e54692d',
     'phabricator-title' => 'df5e11d2',
-    'phabricator-tooltip' => '1d298e3a',
+    'phabricator-tooltip' => '6323f942',
     'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
     'phabricator-uiexample-reactor-button' => 'd19198c8',
@@ -818,7 +818,7 @@
     'phui-inline-comment-view-css' => '0fdb3667',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '407eaf5a',
-    'phui-object-item-list-view-css' => '56aab18d',
+    'phui-object-item-list-view-css' => 'fe594a65',
     'phui-pager-css' => 'bea33d23',
     'phui-pinboard-view-css' => '2495140e',
     'phui-profile-menu-css' => 'ab4fcf5f',
@@ -831,7 +831,7 @@
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
     'phui-workboard-view-css' => 'b07a5524',
-    'phui-workcard-view-css' => '92178913',
+    'phui-workcard-view-css' => '42c703d7',
     'phui-workpanel-view-css' => 'b90970eb',
     'phuix-action-list-view' => 'b5c256b8',
     'phuix-action-view' => '8cf6d262',
@@ -875,6 +875,14 @@
       'javelin-behavior-device',
       'javelin-vector',
     ),
+    '019f36c4' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+    ),
     '031cee25' => array(
       'javelin-behavior',
       'javelin-request',
@@ -945,6 +953,15 @@
       'javelin-dom',
       'javelin-history',
     ),
+    '16c76360' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+    ),
     '1ad0a787' => array(
       'javelin-install',
       'javelin-reactor',
@@ -962,12 +979,6 @@
       'javelin-dom',
       'javelin-typeahead-normalizer',
     ),
-    '1d298e3a' => array(
-      'javelin-install',
-      'javelin-util',
-      'javelin-dom',
-      'javelin-vector',
-    ),
     '1d45c74d' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -996,6 +1007,14 @@
       'phuix-icon-view',
       'javelin-behavior-phabricator-gesture',
     ),
+    '1fe26f18' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-magical-init',
+    ),
     '21ba5861' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1290,6 +1309,12 @@
       'javelin-install',
       'javelin-util',
     ),
+    '6323f942' => array(
+      'javelin-install',
+      'javelin-util',
+      'javelin-dom',
+      'javelin-vector',
+    ),
     '635de1ec' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1430,14 +1455,6 @@
       'javelin-vector',
       'javelin-stratcom',
     ),
-    82439934 => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-    ),
     '834a1173' => array(
       'javelin-behavior',
       'javelin-scrollbar',
@@ -1747,15 +1764,6 @@
     'b90970eb' => array(
       'phui-workcard-view-css',
     ),
-    'ba4fa35c' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-    ),
     'bd4c8dca' => array(
       'javelin-install',
       'javelin-util',
@@ -2011,14 +2019,6 @@
       'javelin-workflow',
       'javelin-json',
     ),
-    'f1844746' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-magical-init',
-    ),
     'f411b6ae' => array(
       'javelin-behavior',
       'javelin-stratcom',

src/applications/maniphest/editor/ManiphestEditEngine.php

@@ -338,6 +338,8 @@ private function buildCardResponse(ManiphestTask $task) {
       ->setCanEdit(true)
       ->getItem();
 
+    $tasks->addClass('phui-workcard');
+
     $payload = array(
       'tasks' => $tasks,
       'data' => $data,

src/applications/project/controller/PhabricatorProjectMoveController.php

@@ -160,6 +160,8 @@ public function handleRequest(AphrontRequest $request) {
       ->setProject($project)
       ->getItem();
 
+    $card->addClass('phui-workcard');
+
     return id(new AphrontAjaxResponse())->setContent(
       array('task' => $card));
  }

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -374,11 +374,6 @@ ul.phui-object-item-icons {
   attributes.
 */
 
-.phui-workcard.phui-object-item {
-  border-left-width: 4px;
-  box-sizing: border-box;
-}
-
 .phui-object-item {
   border-left-width: 0;
 }

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

@@ -6,6 +6,8 @@
   background-color: #fff;
   border-radius: 3px;
   margin-bottom: 8px;
+  border-left-width: 4px;
+  box-sizing: border-box;
 }
 
 .phui-workcard .phui-object-item-name {
@@ -87,7 +89,6 @@
 }
 
 
-
 /* - Draggable Colors --------------------------------------------------------*/
 
 .phui-workcard.phui-object-item.drag-clone {

webroot/rsrc/js/application/dashboard/behavior-dashboard-move-panels.js

@@ -85,7 +85,8 @@ JX.behavior('dashboard-move-panels', function(config) {
   for (ii = 0; ii < cols.length; ii++) {
     col = cols[ii];
     var list = new JX.DraggableList(itemSigil, col)
-      .setFindItemsHandler(JX.bind(null, finditems, col));
+      .setFindItemsHandler(JX.bind(null, finditems, col))
+      .setCanDragX(true);
 
     list.listen('didSend', JX.bind(list, onupdate, col));
     list.listen('didReceive', JX.bind(list, onupdate, col));

webroot/rsrc/js/application/projects/behavior-project-boards.js

@@ -231,7 +231,8 @@ JX.behavior('project-boards', function(config, statics) {
 
     for (ii = 0; ii < cols.length; ii++) {
       var list = new JX.DraggableList('project-card', cols[ii])
-        .setFindItemsHandler(JX.bind(null, finditems, cols[ii]));
+        .setFindItemsHandler(JX.bind(null, finditems, cols[ii]))
+        .setCanDragX(true);
 
       list.listen('didSend', JX.bind(list, onupdate, cols[ii]));
       list.listen('didReceive', JX.bind(list, onupdate, cols[ii]));