revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-10 00:42:41 +01:00
Code Issues Releases Wiki Activity

Improve minor workboard drag behaviors

Browse source 
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
This commit is contained in:
epriestley 2016-02-02 06:26:42 -08:00
parent a019f16518
commit 61318a8119
9 changed files with 115 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
resources/celerity/map.php
View file

@ -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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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 @@ return array(
'javelin-install',
'javelin-util',
),
'6323f942' => array(
'javelin-install',
'javelin-util',
'javelin-dom',
'javelin-vector',
),
'635de1ec' => array(
'javelin-behavior',
'javelin-stratcom',
@ -1430,14 +1455,6 @@ return array(
'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 @@ return array(
'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 @@ return array(
'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',

2
src/applications/maniphest/editor/ManiphestEditEngine.php
View file

@ -338,6 +338,8 @@ final class ManiphestEditEngine
->setCanEdit(true)
->getItem();
$tasks->addClass('phui-workcard');
$payload = array(
'tasks' => $tasks,
'data' => $data,

2
src/applications/project/controller/PhabricatorProjectMoveController.php
View file

@ -160,6 +160,8 @@ final class PhabricatorProjectMoveController
->setProject($project)
->getItem();
$card->addClass('phui-workcard');
return id(new AphrontAjaxResponse())->setContent(
array('task' => $card));
}

5
webroot/rsrc/css/phui/phui-object-item-list-view.css
View file

@ -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;
}

3
webroot/rsrc/css/phui/workboards/phui-workcard.css
View file

@ -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 {

3
webroot/rsrc/js/application/dashboard/behavior-dashboard-move-panels.js
View file

@ -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));

3
webroot/rsrc/js/application/projects/behavior-project-boards.js
View file

@ -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]));

51
webroot/rsrc/js/core/DraggableList.js
View file

@ -23,6 +23,7 @@ JX.install('DraggableList', {
JX.Stratcom.listen('mousemove', null, JX.bind(this, this._onmove));
JX.Stratcom.listen('scroll', null, JX.bind(this, this._onmove));
JX.Stratcom.listen('mouseup', null, JX.bind(this, this._ondrop));
JX.Stratcom.listen('keypress', null, JX.bind(this, this._onkey));
},
events : [
@ -37,7 +38,8 @@ JX.install('DraggableList', {
'didReceive'],
properties : {
findItemsHandler : null
findItemsHandler: null,
canDragX: false
},
members : {
@ -97,10 +99,6 @@ JX.install('DraggableList', {
return this;
},
_canDragX : function() {
return this._hasGroup();
},
_hasGroup : function() {
return (this._group.length > 1);
},
@ -237,6 +235,8 @@ JX.install('DraggableList', {
var cursor = JX.$V(e);
this._offset = new JX.Vector(pos.x - cursor.x, pos.y - cursor.y);
JX.Tooltip.lock();
this.invoke('didBeginDrag', this._dragging);
},
@ -446,7 +446,7 @@ JX.install('DraggableList', {
p.y += this._offset.y;
this._clone.style.top = p.y + 'px';
if (this._canDragX()) {
if (this.getCanDragX()) {
p.x += this._offset.x;
this._clone.style.left = p.x + 'px';
}
@ -454,13 +454,25 @@ JX.install('DraggableList', {
e.kill();
},
_onkey: function(e) {
// Cancel any current drag if the user presses escape.
if (this._dragging && (e.getSpecialKey() == 'esc')) {
e.kill();
this._drop(null);
return;
}
},
_ondrop : function(e) {
var p = JX.$V(e);
this._drop(p);
},
_drop: function(cursor) {
if (!this._dragging) {
return;
}
var p = JX.$V(e);
var dragging = this._dragging;
this._dragging = null;
@ -471,22 +483,24 @@ JX.install('DraggableList', {
var target = false;
var ghost = false;
var target_list = this._getTargetList(p);
if (target_list) {
target = target_list._target;
ghost = target_list.getGhostNode();
if (cursor) {
var target_list = this._getTargetList(cursor);
if (target_list) {
target = target_list._target;
ghost = target_list.getGhostNode();
}
}
JX.$V(0, 0).setPos(dragging);
if (target !== false) {
if (target === false) {
this.invoke('didCancelDrag', dragging);
} else {
JX.DOM.remove(dragging);
JX.DOM.replace(ghost, dragging);
this.invoke('didSend', dragging, target_list);
target_list.invoke('didReceive', dragging, this);
target_list.invoke('didDrop', dragging, target, this);
} else {
this.invoke('didCancelDrag', dragging);
}
var group = this._group;
@ -495,11 +509,12 @@ JX.install('DraggableList', {
group[ii]._clearTarget();
}
if (!this.invoke('didEndDrag', dragging).getPrevented()) {
JX.DOM.alterClass(dragging, 'drag-dragging', false);
}
JX.DOM.alterClass(dragging, 'drag-dragging', false);
JX.Tooltip.unlock();
e.kill();
this.invoke('didEndDrag', dragging);
},
lock : function() {

35
webroot/rsrc/js/core/ToolTip.js
View file

@ -9,10 +9,17 @@
JX.install('Tooltip', {
statics : {
_node : null,
statics: {
_node: null,
_lock: 0,
show : function(root, scale, align, content) {
var self = JX.Tooltip;
if (self._lock) {
return;
}
if (__DEV__) {
switch (align) {
case 'N':
@ -45,27 +52,28 @@ JX.install('Tooltip', {
node.style.maxWidth = scale + 'px';
JX.Tooltip.hide();
this._node = node;
self._node = node;
// Append the tip to the document, but offscreen, so we can measure it.
node.style.left = '-10000px';
document.body.appendChild(node);
// Jump through some hoops trying to auto-position the tooltip
var pos = this._getSmartPosition(align, root, node);
var pos = self._getSmartPosition(align, root, node);
pos.setPos(node);
},
_getSmartPosition: function (align, root, node) {
var pos = JX.Tooltip._proposePosition(align, root, node);
var self = JX.Tooltip;
var pos = self._proposePosition(align, root, node);
// If toolip is offscreen, try to be clever
if (!JX.Tooltip.isOnScreen(pos, node)) {
align = JX.Tooltip._getImprovedOrientation(pos, node);
pos = JX.Tooltip._proposePosition(align, root, node);
align = self._getImprovedOrientation(pos, node);
pos = self._proposePosition(align, root, node);
}
JX.Tooltip._setAnchor(align);
self._setAnchor(align);
return pos;
},
@ -167,6 +175,17 @@ JX.install('Tooltip', {
JX.DOM.remove(this._node);
this._node = null;
}
},
lock: function() {
var self = JX.Tooltip;
self.hide();
self._lock++;
},
unlock: function() {
var self = JX.Tooltip;
self._lock--;
}
}
});