Page MenuHomePhabricator

Dragging items (cards, panels) could be better in Workboards
Closed, ResolvedPublic

Description

Scrolling behaviour on Phabricator could use some polish with all the new UI we have.

  • Dragging tasks in Maniphest should scroll the page when it reaches the bottom of the screen
  • Dragging tasks in Workboards to the right off the page should scroll the page
  • Using a scrollwheel to move the page should keep the object under the cursor

Original Ticket
When moving task in a workboard between a very long and a very short column, it can be necessary to scroll to drop the task into the short column. Right now, this very buggy, because the dragged item does not reposition on scroll, and so it becomes impossible to move it up the screen.

To reproduce: have a very long column (eg: Backlog) and a very short column. Scroll to bottom of workboard, grab a task, scroll up while holding the task.

Expected result: task stays under the cursor.

Actual result: task stays at original cursor Y coordinate before scrolling.

Bug in action: http://quick.as/jQBjhyq6

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
qgil added a subscriber: qgil.Jun 2 2014, 5:04 PM

Yes, I confirm this problem (that I was too busy and lazy to file in the past days). This is a relatively recent regression, probably caused by the redesign of workboards with fixed width and "own" scrolling.

You can also reproduce it trying to move a task at the end of the "Details" column at https://secure.phabricator.com/project/board/404/

timor added a subscriber: timor.Jun 2 2014, 6:32 PM
chad added a subscriber: chad.Jun 2 2014, 9:46 PM

Workboards don't have their own scrolling (see T5002 for that implementation), at least not "JS" powered. It's just CSS styling of the browser - so not a regression.

We've just always been bad at scrolling. I'll file an uber task of all scrolling issues and attach this (likely all scrolling issues should be resolved in the same dif).

chad added a comment.Jun 2 2014, 9:48 PM

Or we can make this the uber task. :)

chad renamed this task from Moving tasks in project workboard is buggy with scrolling to Dragging items (cards, panels) to the edge of browser window does not work as expected.Jun 2 2014, 9:51 PM
chad updated the task description. (Show Details)Jun 2 2014, 9:54 PM

Chad covered a big chunk of this, but I think there are several separate but related issues here:

  • In every drag-and-drop UI, dragging near the edge of the screen should scroll scrollable panels. This is fairly easy in the general case but less easy in the lots-of-nested-scrollable-things case.
  • The actual original issue here is buggy, too, but probably will be resolved when screen-edge-scroll gets fixed.
  • We plan to make columns scroll internally (T5002) like Trello. (I'm not totally 100% sold on this just yet, but it works for Trello, and is definitely worth at least trying.) This would prevent the long-column-next-to-short-column case from occurring, effectively.
  • T4476 discusses making the drop area infinitely tall and/or making a "whole column" target which is distinct from dropping into a specific slot (these interact with T4807).
  • We'll probably also add some kind of "Move to column..." action eventually, since you, e.g., can't reasonably drag and drop at all on mobile, or if you're blind, or if you have limited manual dexterity.
qgil edited this Maniphest Task.Jun 5 2014, 2:25 PM
chad triaged this task as High priority.Jun 5 2014, 6:33 PM

For workboards.. could you just have column titles stick at the top of the page when you scroll down? Then we could use that a drop target when move tasks between columns

chad added a comment.Jun 12 2014, 11:42 PM

Do you mean T5002?

@chad I do.. sorry missed that being added.. I'll comment there

chad added a subscriber: talshiri.Jul 15 2014, 4:31 AM

◀ Merged tasks: T5624.

◀ Merged tasks: T5676.

◀ Merged tasks: T5789.

epriestley lowered the priority of this task from High to Low.
epriestley moved this task from Backlog to Workboards v1 on the Workboards board.

man, default priority sort seemed so promising in theory and is so terrible in practice

epriestley raised the priority of this task from Low to Normal.Aug 7 2014, 11:06 PM

I presume per column scrolling would change this behavior, but right now if there is a single long list I end up with double vertical scrollbars and can't use pagedown/down-arrow etc until I click somewhere.

qgil added a comment.Feb 19 2015, 1:46 PM

Is it just me, or the new workboards have brought a regression?

Before, in workboards with long columns, I could could drag a card anywhere by grabbing it and then scrolling with the arrow keys. Now I can't find a way to scroll the board while grabbing a card.

qgil added a comment.Feb 19 2015, 4:40 PM

Hm, never mind. Now it works. I'm not sure what happened earlier today. Will pay more attention if I have problems again.

rbalik added a subscriber: rbalik.Apr 3 2015, 4:27 PM
Yomi added a subscriber: Yomi.Jun 1 2015, 3:03 AM
epriestley moved this task from Backlog to Projects v3 on the Projects board.Sep 9 2015, 11:19 PM
saper added a subscriber: saper.Oct 28 2015, 7:51 PM

What about making drop zones ultra long down i.e. to show only names at the top and allow users to drop anywhere, not necessarily at current small "drop zone" at the top?

Also H J K L keyboard shortcuts would greatly speed up organizing tasks on a board. Maybe also have "space" as a pick up or drop key. Would be fun! Joystick support optional.

chad renamed this task from Dragging items (cards, panels) to the edge of browser window does not work as expected to Dragging items (cards, panels) could be better in Workboards.Dec 1 2015, 10:09 PM
chad added a subscriber: dstrine.
ftdysa added a subscriber: ftdysa.Dec 23 2015, 7:44 PM

In a semi-related topic, I find myself constantly expecting Trello-style behavior where a user can click + drag outside of cards to scroll vertically/horizontally.

chad added a comment.Jan 28 2016, 9:20 PM

We're probably going to do per column scrolling, or at least see how it feels in testing. Will have to see where we end up.

I think we can do the background drag thing too, that shouldn't interact poorly with anything else (I think? Probably?).

qgil removed a subscriber: qgil.Feb 1 2016, 9:33 PM
chad moved this task from Projects v3 to v3 on the Projects board.Feb 5 2016, 7:40 PM
chad edited projects, added Projects (v3); removed Projects.
chad moved this task from Backlog to Evan on the Projects (v3) board.
epriestley closed this task as Resolved.Feb 8 2016, 7:38 PM

This probably still isn't perfect, but:

  • Dragging near the left and right edges of the screen should now scroll left/right.
  • Dragging near the top and bottom edges of the screen should now scroll up/down, or scroll the contextual target up/down for nested elements like columns.
  • Drag "ghosts" now track the cursor across mousewheel scrolling properly.
  • Columns should no longer be taller than the screen, and instead scroll internally. There's a possibility we might revisit this since D14866 presents an alternate approach that also fixes the drag-and-drop problems while preserving "sense of scale", but I think I'm the only champion for this and probably don't care enough to write the Javascript for it. See D15209 for more discussion. In any case, both approaches solve drag issues.
  • The board can now be panned horizontally by dragging the background.

Minor errata:

  • One non-workboard issue with drag scrolling that only affects Firefox is tracked in T10266.
  • @chad hit one "bouncy column" issue in Chrome that we'll fix if we can isolate it and it is vulnerable to earthly weapons.
  • CSS may get some touchups.

Otherwise, I believe everything that was merged here is substantially resolved.

If you run into new issues, feel free to file new tasks.

talshiri removed a subscriber: talshiri.Feb 8 2016, 7:39 PM