Page MenuHomePhabricator

When a user drags a card over a column, highlight the column border

Authored by epriestley on Mar 2 2019, 3:49 PM.



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.

Diff Detail

rP Phabricator
Lint Not Applicable
Tests Not Applicable

Event Timeline

This is very tricky to take a screenshot of.

What, phone's broken?


Doesn't the new "ghost" task box have a dashed border?

This revision is now accepted and ready to land.Mar 7 2019, 6:43 PM

There are four separate UI feedback indicators right now:

  1. The card in the old position becomes partly transparent until you "let go" of it.
  2. A transparent copy of the card is put under the cursor. I think the code usually calls this the "ghost", although I may not be very consistent about it.
  3. A dashed purple "drop target" (which probably also gets called a "ghost" sometimes) is rendered into the target column if releasing your mouse would move the card somewhere else.
  4. If releasing your mouse would move the card to a column (possibly the same column), the whole column which the card would move to (or "stay in" but move to a different position in) now gets a relatively subtle solid border.

The first three are pre-existing, this just adds (4). I think it'll make the most sense to just try dragging something once this hits master. It also doesn't help that phui-box-grey is not actually grey much of the time.

This revision was automatically updated to reflect the committed changes.