From be1e3b2cc0a8773531ad8565a2b0590d0ea75cca Mon Sep 17 00:00:00 2001 From: epriestley Date: Sat, 2 Mar 2019 07:45:51 -0800 Subject: [PATCH] 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 | 66 +++++++++---------- .../css/phui/workboards/phui-workpanel.css | 8 +++ .../js/application/projects/WorkboardBoard.js | 3 +- .../application/projects/WorkboardColumn.js | 5 ++ webroot/rsrc/js/core/DraggableList.js | 17 ++++- 5 files changed, 63 insertions(+), 36 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index bc81717e06..5118dc741d 100644 --- a/resources/celerity/map.php +++ b/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', ), diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css index 617ff5aa6d..fb7415ff20 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css +++ b/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}; +} diff --git a/webroot/rsrc/js/application/projects/WorkboardBoard.js b/webroot/rsrc/js/application/projects/WorkboardBoard.js index 422ee70418..b3f8e585d6 100644 --- a/webroot/rsrc/js/application/projects/WorkboardBoard.js +++ b/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)); diff --git a/webroot/rsrc/js/application/projects/WorkboardColumn.js b/webroot/rsrc/js/application/projects/WorkboardColumn.js index 28bff862da..a94604a470 100644 --- a/webroot/rsrc/js/application/projects/WorkboardColumn.js +++ b/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 = []; diff --git a/webroot/rsrc/js/core/DraggableList.js b/webroot/rsrc/js/core/DraggableList.js index a65489be41..598856581f 100644 --- a/webroot/rsrc/js/core/DraggableList.js +++ b/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(); }