This page aims at giving a short status regarding moving operations in Magnolia 5; it should features bugs, improvements as well as proposals for further enhancements.
Green stars denote what we do for 5.1.
Yellow stars indicate what we still need to specify for 5.1.
1. UX - Moving interaction
Problems
- Drag and drop alone is not enough
- lacks affordance
- must not conflict with other interactions, e.g. selection, scroll gestures
- does not feel fluid for long distances (esp. on touch devices)
- Drag and drop is error prone
- especially on sensitive areas like configuration, you don't want to mess things up so easily
- Missing spec for moving nodes through an action (e.g. in the action bar)
- potentially using keyboard only
- also thought for touch
- Related: The Duplicate action hardly solves copying use cases
- more targeted at content (e.g. news page) than e.g. configuration
Options
- Programmatic "start-drag" from the server-side
- doesn't solve anything on touch devices
- sticky row with touch move, seriously?
- the sticky row could be available somewhere to grab it again with drag and drop
- maybe having scrolled to the proper position beforehand
- dropping is still approximate
- not supported by Vaadin out of the box
- client-side code is there and accessible (can be done easily with rpc invocation, and without patch)
- doesn't solve anything on touch devices
- Cut (Copy) & Paste
- Steps
- Select row
- Press "Cut" or "Copy", visually marks currently selected row(s)
- Select target item
- Press "Paste"
- More options? (Drop above, inside, below)
- Related: Action bar progressive disclosure
- Well established
- Our trees are ordered
we need to cover the use case for reordering under the same parent
- Keyboard shortcuts
- Can we hijack Cmd+X,C,V shortcuts?
Implement as a basic clipboard (subapp-scoped)
we don't implement Cut
we implement Paste as Paste IN, as most people expect
- goes to the end (of its same content-type siblings)
- makes sure pasted item is selected + visible
- fix duplicate as well
We fix ordering and groups in the action bar once we have basic impl
Move up/down actions
- Paste + Paste after
- Steps
- Same move actions as in page editor
- Hybrid Move & Drop variant
- Steps
- Select row
- Press "Move", visually marks currently selected row(s)
- Right click/Hold target, displays an action popup with dropping options
- Press "Drop above", "Drop within" or "Drop below"
- Less intuitive than cut & paste
- technically challenging (specific mouse and touch handlers on the client-side)
- Steps
2. UI - Drag and Drop
Problems
- Automatic scrolling while dragging is unfortunately not supported in Vaadin Table
- Manual scrolling while dragging seems to be supported, although requiring dexterity
- This is also the occasion to apply proper coloring there, instead of the default.
- Drag and drop doesn't work as good with touch
- already uses a timer, might be too short though
- lacks visual indication
- conflicts with table scroll / sometimes even page scroll
Options
- Do not invest in automatic scrolling until new Tables from Vaadin are there
- Vaadin 7.2?
3. IMPL - Moving logic
Problems
- existing moving logic must be placed there, and must be invoked through action execution
- Categories cannot be dropped onto other categories
- TODO: create issues in various content-app projects
References
- The following page-editor story has a rather similar interaction pattern for moving components, either through drag and drop or the move action (disclaimer: in component bar, not from action bar).
- DataTables is a nice jQuery-based table component, highly flexible and configurable, and easy to populate in various ways.
- Although we cannot use it easily in our setup, it might be a useful example for keeping feature-rich components (like tables) dry, open and easy to use.
Overview
Content Tools
1 Comment
Andreas Weder
Reviewed the concept. I'll have a look at how we could realize the move operation using actions (or other means).
Here's my understanding on where we are currently:
Drag and drop doesn't allow to scroll beyond fold. Automatic opening of folders is not easy either. Drag and drop is also somewhat finicky and a error-prone, in particular on touch devices.
We could add a move action, but there's also a need for copy/paste. Should we just go with copy/cut/paste then?