Page MenuHomePhabricator

Make whole workboard column a drop target
Closed, DuplicatePublic


I haven't been using Phabricator very long (a month or two), but have found taking tasks out of a large backlog to be quite frustrating.

I hope you'll forgive me for opening what is in large part a duplicate of T4476: Optimize the UX for moving a task between columns in the Workboard and so perhaps due to be addressed by or re-evaluated after T5240: Dragging items (cards, panels) could be better in Workboards lands.

However, I am opening this as:

  • Using a trackpad primarily, I cannot drag and scroll simultaneously, therefore a number of the T4476 suggestions would not help me.
  • I regularly find window-edge scrolling to be devastatingly slow if it is responsive at all, or too fast if it isn't, so suspect the solution of T5240 will be suboptimal.
  • I found a way to do what I want through CSS alone which may provide a starting point for an easy fix.

Event Timeline

isfs raised the priority of this task from to Needs Triage.
isfs updated the task description. (Show Details)
isfs added projects: Projects, Workboards.
isfs added a subscriber: isfs.

Here is my patch. I can arc diff this if needed (though it will take me a little while, since, as you can probably see, I checked out Phabricator using hg-git rather than git itself, so I will have to do some trickery to use arc diff or clone again). It does not include the changes from running ./bin/celerity map.

# HG changeset patch
# User Ben Schmidt
# Date 1438818117 -36000
#      Thu Aug 06 09:41:57 2015 +1000
# Node ID ec3f3b3fa877ad2a708676cd85c621dfd511fe26
# Parent  50395876f5ef04891327beac6627caa8d9dd3cab
[mq]: tall_workboard.patch

diff --git a/webroot/rsrc/css/aphront/multi-column.css b/webroot/rsrc/css/aphront/multi-column.css
--- a/webroot/rsrc/css/aphront/multi-column.css
+++ b/webroot/rsrc/css/aphront/multi-column.css
@@ -106,6 +106,7 @@
 .aphront-multi-column-inner {
   display: table;
   width: 100%;
+  height: 1px;
 .device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
@@ -128,6 +129,10 @@
   vertical-align: top;
+.aphront-multi-column-column {
+  height: 100%;
 .phui-box-border .aphront-multi-column-column-outer {
   border-right: 1px solid {$lightblueborder};
   padding-left: 8px;
diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css
--- a/webroot/rsrc/css/phui/phui-workpanel-view.css
+++ b/webroot/rsrc/css/phui/phui-workpanel-view.css
@@ -2,6 +2,14 @@
  * @provides phui-workpanel-view-css
+.phui-workpanel-view {
+  height: 100%;
+.phui-workpanel-view-inner {
+  height: 100%;
 .phui-workpanel-view .phui-action-header {
   border: 1px solid #b3b5b6;
   border-top-left-radius: 3px;
@@ -80,12 +88,17 @@
   display: inline-block;
+.phui-workpanel-body {
+  height: 100%;
 .aphront-multi-column-fixed .phui-workpanel-body {
   width: 300px;
 .phui-workpanel-body .phui-object-item-list-view {
   min-height: 49px;
+  height: 100%;
 .device .aphront-multi-column-outer
@@ -97,13 +110,6 @@
   opacity: 0.75;
-.project-panel-empty .phui-object-item-list-view {
-  background: rgba(255,255,255,.4);
-  border-radius: 3px;
-  margin-bottom: 4px;
-  border: 1px dashed #fff;
 .project-panel-empty .phui-object-item-list-view .drag-ghost {
   display: none;

I'd be happy to check it out with a diff. One concern is indicating to the user the drop area is larger or at least that a blank area is a valid drop target. JS should be added to detect you're over a valid area to drop, and apply a new CSS class to that column we can toggle on/off.

I'll work on updating the patch to improve the visual feedback and then arc diff it. Thanks for your willingness to consider it.

saper removed a subscriber: saper.
cpmagin moved this task from Workboards v1 to Backlog on the Workboards board.