Page tree
Skip to end of metadata
Go to start of metadata

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 star) Green stars denote what we do for 5.1.
(star) 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)
  • 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
      • (warning) we need to cover the use case for reordering under the same parent
    • Keyboard shortcuts
      • Can we hijack Cmd+X,C,V shortcuts?
    • (green star) Implement as a basic clipboard (subapp-scoped)
    • (green star) we don't implement Cut
    • (green star) 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
    • (green star) We fix ordering and groups in the action bar once we have basic impl
    • (star) Move up/down actions
    • Paste + Paste after
  • 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)

 

2. UI - Drag and Drop

Problems

  • (error)

    Error rendering macro 'jira'

    Unable to locate Jira server for this macro. It may be due to Application Link configuration.


    • Automatic scrolling while dragging is unfortunately not supported in Vaadin Table
    • Manual scrolling while dragging seems to be supported, although requiring dexterity
  • (tick) Unable to locate Jira server for this macro. It may be due to Application Link configuration.
    • This is also the occasion to apply proper coloring there, instead of the default.
  • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  • 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

  • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
    • existing moving logic must be placed there, and must be invoked through action execution
  • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  • Categories cannot be dropped onto other categories
  • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
    • 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).
    • Unable to locate Jira server for this macro. It may be due to Application Link configuration.
  • 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.

 

 

  • No labels

1 Comment

  1. 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.

    • Having a move action that initializes a drag operation works fine on Desktop (Mikael has realized it already), but doesn't work reliably on the iPad (though, when it works, it works quite alright, but it's not easy to get it working).
    • We could add a move action, but there's also a need for copy/paste. Should we just go with copy/cut/paste then?