@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
Provide better UI feedback about cards that can't be dragged or edited
Summary:
Depends on D20273. Fixes T10722. Currently, we don't make it very clear when a card can't be edited. Long ago, some code made a weak attempt to do this (by hiding the "grip" on the card), but later UI changes hid the "grip" unconditionally so that mooted things.
Instead:
- Replace the edit pencil with a red lock.
- Provide cursor hints for grabbable / not grabbable.
- Don't let users pick up cards they can't edit.
Test Plan: On a workboard with a mixture of editable and not-editable cards, hovered over the different cards and was able to figure out which ones I could drag or not drag pretty easily. Picked up cards I could pick up, wasn't able to drag cards I can't edit.
Reviewers: amckinley
Reviewed By: amckinley
Maniphest Tasks: T10722
Differential Revision: https://secure.phabricator.com/D20274
+76
-43
+26
-26
resources/celerity/map.php
+26
-26
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' => 'b96c872e',
13
+
'core.pkg.js' => '200a0a61',
14
14
'differential.pkg.css' => '8d8360fb',
15
15
'differential.pkg.js' => '67e02996',
16
16
'diffusion.pkg.css' => '42c75c37',
···
177
177
'rsrc/css/phui/phui-two-column-view.css' => '01e6991e',
178
178
'rsrc/css/phui/workboards/phui-workboard-color.css' => 'e86de308',
179
179
'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98',
180
-
'rsrc/css/phui/workboards/phui-workcard.css' => '8c536f90',
180
+
'rsrc/css/phui/workboards/phui-workcard.css' => '9e9eb0df',
181
181
'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc16cf33',
182
182
'rsrc/css/sprite-login.css' => '18b368a6',
183
183
'rsrc/css/sprite-tokens.css' => 'f1896dc5',
···
408
408
'rsrc/js/application/phortune/phortune-credit-card-form.js' => 'd12d214f',
409
409
'rsrc/js/application/policy/behavior-policy-control.js' => '0eaa33a9',
410
410
'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '9347f172',
411
-
'rsrc/js/application/projects/WorkboardBoard.js' => 'fc1664ff',
411
+
'rsrc/js/application/projects/WorkboardBoard.js' => 'eb55f7e8',
412
412
'rsrc/js/application/projects/WorkboardCard.js' => '0392a5d8',
413
413
'rsrc/js/application/projects/WorkboardCardTemplate.js' => '2a61f8d4',
414
414
'rsrc/js/application/projects/WorkboardColumn.js' => 'fd4c2069',
···
436
436
'rsrc/js/application/uiexample/notification-example.js' => '29819b75',
437
437
'rsrc/js/core/Busy.js' => '5202e831',
438
438
'rsrc/js/core/DragAndDropFileUpload.js' => '4370900d',
439
-
'rsrc/js/core/DraggableList.js' => '8437c663',
439
+
'rsrc/js/core/DraggableList.js' => '91f40fbf',
440
440
'rsrc/js/core/Favicon.js' => '7930776a',
441
441
'rsrc/js/core/FileUpload.js' => 'ab85e184',
442
442
'rsrc/js/core/Hovercard.js' => '074f0783',
···
728
728
'javelin-view-renderer' => '9aae2b66',
729
729
'javelin-view-visitor' => '308f9fe4',
730
730
'javelin-websocket' => 'fdc13e4e',
731
-
'javelin-workboard-board' => 'fc1664ff',
731
+
'javelin-workboard-board' => 'eb55f7e8',
732
732
'javelin-workboard-card' => '0392a5d8',
733
733
'javelin-workboard-card-template' => '2a61f8d4',
734
734
'javelin-workboard-column' => 'fd4c2069',
···
759
759
'phabricator-diff-changeset-list' => '04023d82',
760
760
'phabricator-diff-inline' => 'a4a14a94',
761
761
'phabricator-drag-and-drop-file-upload' => '4370900d',
762
-
'phabricator-draggable-list' => '8437c663',
762
+
'phabricator-draggable-list' => '91f40fbf',
763
763
'phabricator-fatal-config-template-css' => '20babf50',
764
764
'phabricator-favicon' => '7930776a',
765
765
'phabricator-feed-css' => 'd8b6e3f8',
···
857
857
'phui-two-column-view-css' => '01e6991e',
858
858
'phui-workboard-color-css' => 'e86de308',
859
859
'phui-workboard-view-css' => '74fc9d98',
860
-
'phui-workcard-view-css' => '8c536f90',
860
+
'phui-workcard-view-css' => '9e9eb0df',
861
861
'phui-workpanel-view-css' => 'bc16cf33',
862
862
'phuix-action-list-view' => 'c68f183f',
863
863
'phuix-action-view' => 'aaa08f3b',
···
1557
1557
'javelin-dom',
1558
1558
'javelin-vector',
1559
1559
),
1560
-
'8437c663' => array(
1561
-
'javelin-install',
1562
-
'javelin-dom',
1563
-
'javelin-stratcom',
1564
-
'javelin-util',
1565
-
'javelin-vector',
1566
-
'javelin-magical-init',
1567
-
),
1568
1560
'87428eb2' => array(
1569
1561
'javelin-behavior',
1570
1562
'javelin-diffusion-locate-file-source',
···
1643
1635
'javelin-workflow',
1644
1636
'javelin-stratcom',
1645
1637
),
1638
+
'91f40fbf' => array(
1639
+
'javelin-install',
1640
+
'javelin-dom',
1641
+
'javelin-stratcom',
1642
+
'javelin-util',
1643
+
'javelin-vector',
1644
+
'javelin-magical-init',
1645
+
),
1646
1646
'92388bae' => array(
1647
1647
'javelin-behavior',
1648
1648
'javelin-scrollbar',
···
2051
2051
'javelin-install',
2052
2052
'javelin-event',
2053
2053
),
2054
+
'eb55f7e8' => array(
2055
+
'javelin-install',
2056
+
'javelin-dom',
2057
+
'javelin-util',
2058
+
'javelin-stratcom',
2059
+
'javelin-workflow',
2060
+
'phabricator-draggable-list',
2061
+
'javelin-workboard-column',
2062
+
'javelin-workboard-header-template',
2063
+
'javelin-workboard-card-template',
2064
+
),
2054
2065
'ec4e31c0' => array(
2055
2066
'phui-timeline-view-css',
2056
2067
),
···
2117
2128
'javelin-quicksand',
2118
2129
'phabricator-keyboard-shortcut',
2119
2130
'conpherence-thread-manager',
2120
-
),
2121
-
'fc1664ff' => array(
2122
-
'javelin-install',
2123
-
'javelin-dom',
2124
-
'javelin-util',
2125
-
'javelin-stratcom',
2126
-
'javelin-workflow',
2127
-
'phabricator-draggable-list',
2128
-
'javelin-workboard-column',
2129
-
'javelin-workboard-header-template',
2130
-
'javelin-workboard-card-template',
2131
2131
),
2132
2132
'fce5d170' => array(
2133
2133
'javelin-magical-init',
+20
-8
src/applications/project/view/ProjectBoardTaskCard.php
+20
-8
src/applications/project/view/ProjectBoardTaskCard.php
···
82
82
$card = id(new PHUIObjectItemView())
83
83
->setObject($task)
84
84
->setUser($viewer)
85
-
->setObjectName('T'.$task->getID())
85
+
->setObjectName($task->getMonogram())
86
86
->setHeader($task->getTitle())
87
-
->setGrippable($can_edit)
88
-
->setHref('/T'.$task->getID())
87
+
->setHref($task->getURI())
89
88
->addSigil('project-card')
90
89
->setDisabled($task->isClosed())
91
-
->addAction(
92
-
id(new PHUIListItemView())
90
+
->setBarColor($bar_color);
91
+
92
+
if ($can_edit) {
93
+
$card
94
+
->addSigil('draggable-card')
95
+
->addClass('draggable-card');
96
+
$edit_icon = 'fa-pencil';
97
+
} else {
98
+
$card
99
+
->addClass('not-editable')
100
+
->addClass('undraggable-card');
101
+
$edit_icon = 'fa-lock red';
102
+
}
103
+
104
+
$card->addAction(
105
+
id(new PHUIListItemView())
93
106
->setName(pht('Edit'))
94
-
->setIcon('fa-pencil')
107
+
->setIcon($edit_icon)
95
108
->addSigil('edit-project-card')
96
-
->setHref('/maniphest/task/edit/'.$task->getID().'/'))
97
-
->setBarColor($bar_color);
109
+
->setHref('/maniphest/task/edit/'.$task->getID().'/'));
98
110
99
111
if ($owner) {
100
112
$card->addHandleIcon($owner, $owner->getName());
+27
-8
webroot/rsrc/css/phui/workboards/phui-workcard.css
+27
-8
webroot/rsrc/css/phui/workboards/phui-workcard.css
···
59
59
vertical-align: top;
60
60
}
61
61
62
-
.phui-workcard.phui-oi-grippable .phui-oi-frame {
63
-
padding-left: 0;
64
-
}
65
-
66
-
.phui-workcard .phui-oi-grip {
67
-
display: none;
68
-
}
69
-
70
62
.device-desktop .phui-workcard .phui-list-item-icon {
71
63
display: none;
72
64
}
···
86
78
.phui-list-item-href:hover {
87
79
background: {$sh-bluebackground};
88
80
opacity: 1;
81
+
}
82
+
83
+
.device-desktop .phui-workcard.draggable-card {
84
+
cursor: grab;
85
+
}
86
+
87
+
.jx-dragging .phui-workcard.draggable-card {
88
+
cursor: grabbing;
89
+
}
90
+
91
+
.device-desktop .phui-workcard.undraggable-card {
92
+
cursor: not-allowed;
93
+
}
94
+
95
+
.device-desktop .phui-workcard.phui-oi.not-editable:hover {
96
+
background: {$sh-redbackground};
97
+
}
98
+
99
+
.device-desktop .phui-workcard.phui-oi.not-editable:hover
100
+
.phui-list-item-href {
101
+
border-radius: 3px;
102
+
background: {$red};
103
+
}
104
+
105
+
.device-desktop .phui-workcard.phui-oi.not-editable:hover
106
+
.phui-list-item-href .phui-icon-view {
107
+
color: #fff;
89
108
}
90
109
91
110
.phui-workcard.phui-oi:hover .phui-list-item-icon {
+1
-1
webroot/rsrc/js/application/projects/WorkboardBoard.js
+1
-1
webroot/rsrc/js/application/projects/WorkboardBoard.js
···
138
138
for (var k in columns) {
139
139
var column = columns[k];
140
140
141
-
var list = new JX.DraggableList('project-card', column.getRoot())
141
+
var list = new JX.DraggableList('draggable-card', column.getRoot())
142
142
.setOuterContainer(this.getRoot())
143
143
.setFindItemsHandler(JX.bind(column, column.getDropTargetNodes))
144
144
.setCanDragX(true)
+2
webroot/rsrc/js/core/DraggableList.js
+2
webroot/rsrc/js/core/DraggableList.js
···
240
240
frame.appendChild(clone);
241
241
242
242
document.body.appendChild(frame);
243
+
JX.DOM.alterClass(document.body, 'jx-dragging', true);
243
244
244
245
this._dragging = drag;
245
246
this._clone = clone;
···
618
619
this._autoscroller = null;
619
620
620
621
JX.DOM.remove(this._frame);
622
+
JX.DOM.alterClass(document.body, 'jx-dragging', false);
621
623
this._frame = null;
622
624
this._clone = null;
623
625