1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-10-24 01:28:52 +02:00
phorge-phorge/webroot/rsrc/js/application/projects/WorkboardDropEffect.js
epriestley 5dca1569b5 Preview the effects of a drag-and-drop operation on workboards
Summary:
Ref T10335. Ref T5474. When you drag-and-drop a card on a workboard, show a UI hint which lists all the things that the operation will do.

This shows: column moves; changes because of dragging a card to a different header; and changes which will be caused by triggers.

Not implemented here:

  - Actions are currently shown even if they have no effect. For example, if you drag a "Normal" task to a different column, it says "Change priority to Normal.". I plan to hide actions which have no effect, but figuring this out is a little bit tricky.
  - I'd like to make "trigger effects" vs "non-trigger effects" a little more clear in the future, probably.

Test Plan:
Dragged stuff between columns and headers, and into columns with triggers. Got appropriate preview text hints previewing what the action would do in the UI.

(This is tricky to take a screenshot of since it only shows up while the mouse cursor is down.)

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T10335, T5474

Differential Revision: https://secure.phabricator.com/D20299
2019-03-25 13:22:56 -07:00

35 lines
670 B
JavaScript

/**
* @provides javelin-workboard-drop-effect
* @requires javelin-install
* javelin-dom
* @javelin
*/
JX.install('WorkboardDropEffect', {
properties: {
icon: null,
color: null,
content: null
},
statics: {
newFromDictionary: function(map) {
return new JX.WorkboardDropEffect()
.setIcon(map.icon)
.setColor(map.color)
.setContent(JX.$H(map.content));
}
},
members: {
newNode: function() {
var icon = new JX.PHUIXIconView()
.setIcon(this.getIcon())
.setColor(this.getColor())
.getNode();
return JX.$N('li', {}, [icon, this.getContent()]);
}
}
});