[MGNLUI-3898] Reveal moved item in the "move" dialog Created: 31/May/16  Updated: 09/Feb/17  Resolved: 23/Sep/16

Status: Closed
Project: Magnolia UI
Component/s: dialogs
Affects Version/s: 5.4.6
Fix Version/s: 5.5

Type: Improvement Priority: Neutral
Reporter: Andreas Weder Assignee: Hieu Nguyen Duc
Resolution: Fixed Votes: 1
Labels: usability, ux, working-with-items
Remaining Estimate: 0d
Time Spent: 10.25d
Original Estimate: 6d

Attachments: PNG File 1 How to reveal item being moved.png     PNG File 2 Example of selected target.png    
Issue Links:
Relates
relates to MGNLUI-4006 Unnecessary thumbnail view in "move" ... Closed
causality
is causing MGNLUI-4026 Site app's move dialog doesn't work c... Closed
relation
is related to MGNLUI-3897 Open the move dialog where the move a... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: AX: "Move" dialog imprv
Sprint: Saigon 62
Story Points: 8

 Description   

We'd like to show the item you're currently moving in the "move" dialog in order to avoid having the user to re-orient herself when the dialog opens (see rationale below).

The item currently moved is shown like this (see attachment 1):

  • The item has the mouse hover highlighting (light gray). It's not selected, but has the keyboard focus.
  • The item actually can't be selected.
  • Its icon is replaced with a placeholder icon (the dotted rectangle in the wireframe)

Note that the wireframe actually shows an even more advanced state of the "move" dialog, which also reveals the root node, offers to duplicate instead of moving the item and features menu buttons to cover all way to move an item (inside, above or below another item). Those are handled in separate tasks (see linked issues).

Design rationale behind this decision

We show the "move" dialog when a user clicks on a "move item" action. This is a rupture in a user's flow, but one we accept as the "move" dialog is the one option that works across devices. We can mitigate the effect of such a rupture by aligning the view presented by the "move" dialog and the view the user had when clicking on the "move" action.

Update:
After discussions, the solution for this ticket meets these requirements:

  • Reveal moving items in move dialog
    + Expand tree to those nodes
  • Style moving items
    + Gray highlighting like other items
    + Blur them (add opacity)


 Comments   
Comment by Hieu Nguyen Duc [ 18/Aug/16 ]

Hi weder, could I confirm the behaviors of moved item? Please correct me if there's anything wrong.

  • Normal state (when move dialog opens):
    + White background like other items
    + Dotted rectangle icon
    + Move buttons are disabled
    + "No item selected" on status bar
    => Move buttons are disabled because moved item shouldn't be moved to itself (as a part of MGNLUI-3897)
  • Hover:
    + Light gray background like other items
  • Click / Double click:
    + Like normal state
    + Nothing happens
  • Use up/down arrow key to focus:
    + Like normal state
    + Still has index on itself. It means when we "up/down", it still goes through that disabled moved item

And please provide me the dotted rectangle icon.

Thanks.

Comment by Mikaël Geljić [ 05/Sep/16 ]
  • We keep current content views as they are, but we only apply the change to the Tree presenter.
    • We may drop list / thumbnail views from this move dialog in the future—e.g. they do not show hierarchy, nor all node-types (folders)
    • List might have to be kept anyways, because search view relies on it
  • Disabling row selection for the moved item is not really supported in Vaadin; proposal works but is a bit hackish (hiding the selection, rather than preventing it).
    • A potential solution would be to patch the client side, and prevent firing of itemClick/valueChange events
    • For now, we go ahead only with the specific row style
Comment by Sang Ngo Huu [ 26/Sep/16 ]

QA Failed on site app, tree view in move dialog did not display properly.

I think site app is special app, I can file new ticket to tackle this.

Generated at Mon Feb 12 09:11:13 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.