@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+63
-36
+33
-33
resources/celerity/map.php
+33
-33
resources/celerity/map.php
···
10
10
'conpherence.pkg.css' => '3c8a0668',
11
11
'conpherence.pkg.js' => '020aebcf',
12
12
'core.pkg.css' => '34ce1741',
13
-
'core.pkg.js' => '9eb1254b',
13
+
'core.pkg.js' => 'b96c872e',
14
14
'differential.pkg.css' => '1755a478',
15
15
'differential.pkg.js' => '67e02996',
16
16
'diffusion.pkg.css' => '42c75c37',
···
178
178
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'e86de308',
179
179
'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98',
180
180
'rsrc/css/phui/workboards/phui-workcard.css' => '8c536f90',
181
-
'rsrc/css/phui/workboards/phui-workpanel.css' => 'bd546a49',
181
+
'rsrc/css/phui/workboards/phui-workpanel.css' => '7e12d43c',
182
182
'rsrc/css/sprite-login.css' => '18b368a6',
183
183
'rsrc/css/sprite-tokens.css' => 'f1896dc5',
184
184
'rsrc/css/syntax/syntax-default.css' => '055fc231',
···
409
409
'rsrc/js/application/phortune/phortune-credit-card-form.js' => 'd12d214f',
410
410
'rsrc/js/application/policy/behavior-policy-control.js' => '0eaa33a9',
411
411
'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '9347f172',
412
-
'rsrc/js/application/projects/WorkboardBoard.js' => '3a8c42a3',
412
+
'rsrc/js/application/projects/WorkboardBoard.js' => 'fd96a6e8',
413
413
'rsrc/js/application/projects/WorkboardCard.js' => '9a513421',
414
-
'rsrc/js/application/projects/WorkboardColumn.js' => 'b451fd4c',
414
+
'rsrc/js/application/projects/WorkboardColumn.js' => '1f71e559',
415
415
'rsrc/js/application/projects/WorkboardController.js' => '42c7a5a7',
416
416
'rsrc/js/application/projects/behavior-project-boards.js' => '05c74d65',
417
417
'rsrc/js/application/projects/behavior-project-create.js' => '34c53422',
···
434
434
'rsrc/js/application/uiexample/notification-example.js' => '29819b75',
435
435
'rsrc/js/core/Busy.js' => '5202e831',
436
436
'rsrc/js/core/DragAndDropFileUpload.js' => '4370900d',
437
-
'rsrc/js/core/DraggableList.js' => 'd594c805',
437
+
'rsrc/js/core/DraggableList.js' => '8437c663',
438
438
'rsrc/js/core/Favicon.js' => '7930776a',
439
439
'rsrc/js/core/FileUpload.js' => 'ab85e184',
440
440
'rsrc/js/core/Hovercard.js' => '074f0783',
···
727
727
'javelin-view-renderer' => '9aae2b66',
728
728
'javelin-view-visitor' => '308f9fe4',
729
729
'javelin-websocket' => 'fdc13e4e',
730
-
'javelin-workboard-board' => '3a8c42a3',
730
+
'javelin-workboard-board' => 'fd96a6e8',
731
731
'javelin-workboard-card' => '9a513421',
732
-
'javelin-workboard-column' => 'b451fd4c',
732
+
'javelin-workboard-column' => '1f71e559',
733
733
'javelin-workboard-controller' => '42c7a5a7',
734
734
'javelin-workflow' => '958e9045',
735
735
'maniphest-report-css' => '3d53188b',
···
755
755
'phabricator-diff-changeset-list' => '04023d82',
756
756
'phabricator-diff-inline' => 'a4a14a94',
757
757
'phabricator-drag-and-drop-file-upload' => '4370900d',
758
-
'phabricator-draggable-list' => 'd594c805',
758
+
'phabricator-draggable-list' => '8437c663',
759
759
'phabricator-fatal-config-template-css' => '20babf50',
760
760
'phabricator-favicon' => '7930776a',
761
761
'phabricator-feed-css' => 'd8b6e3f8',
···
854
854
'phui-workboard-color-css' => 'e86de308',
855
855
'phui-workboard-view-css' => '74fc9d98',
856
856
'phui-workcard-view-css' => '8c536f90',
857
-
'phui-workpanel-view-css' => 'bd546a49',
857
+
'phui-workpanel-view-css' => '7e12d43c',
858
858
'phuix-action-list-view' => 'c68f183f',
859
859
'phuix-action-view' => 'aaa08f3b',
860
860
'phuix-autocomplete' => '8f139ef0',
···
1034
1034
'javelin-behavior',
1035
1035
'javelin-dom',
1036
1036
),
1037
+
'1f71e559' => array(
1038
+
'javelin-install',
1039
+
'javelin-workboard-card',
1040
+
),
1037
1041
'1ff278aa' => array(
1038
1042
'phui-button-css',
1039
1043
),
···
1187
1191
'38c1f3fb' => array(
1188
1192
'javelin-install',
1189
1193
'javelin-dom',
1190
-
),
1191
-
'3a8c42a3' => array(
1192
-
'javelin-install',
1193
-
'javelin-dom',
1194
-
'javelin-util',
1195
-
'javelin-stratcom',
1196
-
'javelin-workflow',
1197
-
'phabricator-draggable-list',
1198
-
'javelin-workboard-column',
1199
1194
),
1200
1195
'3b4899b0' => array(
1201
1196
'javelin-behavior',
···
1540
1535
'javelin-install',
1541
1536
'javelin-dom',
1542
1537
),
1538
+
'7e12d43c' => array(
1539
+
'phui-workcard-view-css',
1540
+
),
1543
1541
'80bff3af' => array(
1544
1542
'javelin-install',
1545
1543
'javelin-typeahead-source',
···
1556
1554
'javelin-stratcom',
1557
1555
'javelin-workflow',
1558
1556
'phabricator-draggable-list',
1557
+
),
1558
+
'8437c663' => array(
1559
+
'javelin-install',
1560
+
'javelin-dom',
1561
+
'javelin-stratcom',
1562
+
'javelin-util',
1563
+
'javelin-vector',
1564
+
'javelin-magical-init',
1559
1565
),
1560
1566
'87428eb2' => array(
1561
1567
'javelin-behavior',
···
1843
1849
'b347a301' => array(
1844
1850
'javelin-behavior',
1845
1851
),
1846
-
'b451fd4c' => array(
1847
-
'javelin-install',
1848
-
'javelin-workboard-card',
1849
-
),
1850
1852
'b517bfa0' => array(
1851
1853
'phui-oi-list-view-css',
1852
1854
),
···
1884
1886
'javelin-behavior',
1885
1887
'javelin-uri',
1886
1888
'phabricator-notification',
1887
-
),
1888
-
'bd546a49' => array(
1889
-
'phui-workcard-view-css',
1890
1889
),
1891
1890
'bdce4d78' => array(
1892
1891
'javelin-install',
···
1986
1985
'd3799cb4' => array(
1987
1986
'javelin-install',
1988
1987
),
1989
-
'd594c805' => array(
1990
-
'javelin-install',
1991
-
'javelin-dom',
1992
-
'javelin-stratcom',
1993
-
'javelin-util',
1994
-
'javelin-vector',
1995
-
'javelin-magical-init',
1996
-
),
1997
1988
'd8a86cfb' => array(
1998
1989
'javelin-behavior',
1999
1990
'javelin-dom',
···
2128
2119
'fce5d170' => array(
2129
2120
'javelin-magical-init',
2130
2121
'javelin-util',
2122
+
),
2123
+
'fd96a6e8' => array(
2124
+
'javelin-install',
2125
+
'javelin-dom',
2126
+
'javelin-util',
2127
+
'javelin-stratcom',
2128
+
'javelin-workflow',
2129
+
'phabricator-draggable-list',
2130
+
'javelin-workboard-column',
2131
2131
),
2132
2132
'fdc13e4e' => array(
2133
2133
'javelin-install',
+8
webroot/rsrc/css/phui/workboards/phui-workpanel.css
+8
webroot/rsrc/css/phui/workboards/phui-workpanel.css
···
137
137
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
138
138
border-color: {$red};
139
139
}
140
+
141
+
.phui-workpanel-view .phui-box-grey {
142
+
border: 1px solid transparent;
143
+
}
144
+
145
+
.phui-workpanel-view.workboard-column-drop-target .phui-box-grey {
146
+
border-color: {$lightblueborder};
147
+
}
+2
-1
webroot/rsrc/js/application/projects/WorkboardBoard.js
+2
-1
webroot/rsrc/js/application/projects/WorkboardBoard.js
···
116
116
.setOuterContainer(this.getRoot())
117
117
.setFindItemsHandler(JX.bind(column, column.getCardNodes))
118
118
.setCanDragX(true)
119
-
.setHasInfiniteHeight(true);
119
+
.setHasInfiniteHeight(true)
120
+
.setIsDropTargetHandler(JX.bind(column, column.setIsDropTarget));
120
121
121
122
if (this.getOrder() !== 'natural') {
122
123
list.setCompareHandler(JX.bind(column, column.compareHandler));
+5
webroot/rsrc/js/application/projects/WorkboardColumn.js
+5
webroot/rsrc/js/application/projects/WorkboardColumn.js
···
188
188
return this._compareVectors(u_vec, v_vec);
189
189
},
190
190
191
+
setIsDropTarget: function(is_target) {
192
+
var node = this.getWorkpanelNode();
193
+
JX.DOM.alterClass(node, 'workboard-column-drop-target', is_target);
194
+
},
195
+
191
196
_getCardsSortedNaturally: function() {
192
197
var list = [];
193
198
+15
-2
webroot/rsrc/js/core/DraggableList.js
+15
-2
webroot/rsrc/js/core/DraggableList.js
···
40
40
properties : {
41
41
findItemsHandler: null,
42
42
compareHandler: null,
43
+
isDropTargetHandler: null,
43
44
canDragX: false,
44
45
outerContainer: null,
45
46
hasInfiniteHeight: false
···
318
319
}
319
320
}
320
321
321
-
JX.DOM.alterClass(root, 'drag-target-list', is_target);
322
+
group[ii]._setIsDropTarget(is_target);
322
323
}
323
324
} else {
324
325
target_list = this;
···
368
369
return this;
369
370
},
370
371
372
+
_setIsDropTarget: function(is_target) {
373
+
var root = this.getRootNode();
374
+
JX.DOM.alterClass(root, 'drag-target-list', is_target);
375
+
376
+
var handler = this.getIsDropTargetHandler();
377
+
if (handler) {
378
+
handler(is_target);
379
+
}
380
+
381
+
return this;
382
+
},
383
+
371
384
_getOrderedTarget: function(src_list, src_node) {
372
385
var targets = this._getTargets();
373
386
···
633
646
634
647
var group = this._group;
635
648
for (var ii = 0; ii < group.length; ii++) {
636
-
JX.DOM.alterClass(group[ii].getRootNode(), 'drag-target-list', false);
649
+
group[ii]._setIsDropTarget(false);
637
650
group[ii]._clearTarget();
638
651
}
639
652