Improve drag and drop experience

[raimund-schluessler]

With #418 and the included update to Sortable.js 1.9.0 (specifically SortableJS/Sortable#1487), we don't need to force the subtasks container to be visible in order to drop a task as the only subtask of a parent task.

Hence, there is no empty slot below a hovered task anymore, which makes the drag-and-drop experience less "janky" (@skjnldsv #236 (comment)) 😉

[skjnldsv]

Awesome!! Works nicely!

Another note though, I feel like moving to a subtask (is it the proper word) is hard to discover. I though it was a ui glitch (shifted like 30px to the right), but it was actually the nesting feature. Any idea how we could do that? :)

[raimund-schluessler]

Another note though, I feel like moving to a subtask (is it the proper word) is hard to discover. I though it was a ui glitch (shifted like 30px to the right), but it was actually the nesting feature. Any idea how we could do that? :)

@skjnldsv No, not really. But to me, this feels natural anyway and I think showing it the same way as it will be shown once it's dropped should be fine. We could maybe highlight the parent-task-to-be as well, but I am not sure as this might lead to different confusion. Also, I am not aware of a different app supporting subtasks like this, so I can't look how others do it. Anyway, let's hear what @jancborchardt thinks 😄

[raimund-schluessler]

Also @nextcloud/vue (and @nextcloud/designers)for opinions

[jancborchardt]

Difficult question – it’s always good to look at how different established apps do this.

Also, I am not aware of a different app supporting subtasks like this, so I can't look how others do it.

If they don’t do it exactly like this, maybe it’s good to look at how they do it, and if there would be a better way or if there’s maybe one established pattern that mgiht be better? :)

[raimund-schluessler]

Difficult question – it’s always good to look at how different established apps do this.

Also, I am not aware of a different app supporting subtasks like this, so I can't look how others do it.

If they don’t do it exactly like this, maybe it’s good to look at how they do it, and if there would be a better way or if there’s maybe one established pattern that mgiht be better? :)

I had a look around and only found one App that does support nested tasks as we do, Todoist. With that I mean, that you can add every property you can add to a task to a subtask, i.e. subtasks are just tasks as well. Many other implementations of subtasks are simply lists of checkpoints in the details field of the task, but not full featured tasks itself.

Regarding drag-and-drop Todoist does it very similar as we do it here, they simply show the subtask-to-be at the new position (see https://get.todoist.help/hc/de/articles/206432369-Teilaufgaben):

I still think, that this is the way to go. In case you don't agree or have an idea how to improve it further, I would propose to open a new issue for this. This PR is still an improvement over the current situation and worth merging 😉 Follow-up PRs are always welcome, though.

[jancborchardt]

Sounds good! :) Probably then it’s good for you to keep an eye on how Todoist does things, as their designers will have faced and hopefully solved similar challenges. :)