Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 75
Noteuxstatus
titleIn revision

The content in this section is currently being revised.

 

 

ready
ready


Table of Contents

Story

Magnolia allows me select a single item or multiple items easily by using the mouse, the keyboard or touch gestures. All input methods are interchangeable.

...

Please refer to the more detailed explanations and the matrix in the paragraphs below.

 


Focus and selection

Focus an item

...

When using the mouse or a touch device, you may only move the focus by also simultaneously selecting an item. 


Select a single item

A single item may be selected by clicking on it, touching it or by hitting the SPACE bar when it has the focus (object selection). If an interface supports selecting multiple items, it shows a checkbox next to an item. Thus, alternatively, this checkbox may be checked to select the item (toggle selection). In both cases, a strong visual marker around the item signals its selection. In addition, any visible and enabled view for item details will refresh immediately and show additional information on the just selected item.

For the keyboard, you may also move the selection to a different item by simply hitting an arrow key. This deselects the currently selected item and selects the one the focus has moved to. Care must be taken that this doesn't cause a flood of events, if a key is hit repeatedly or pressed for a longer period of time. Instead, any implementation should filter events sent to the backend and only eventually deliver the last of the selection events. 


Select multiple items

To select multiple items, you repeatedly select single items using their checkboxes until all your items are selected (toggle selection). If you use the checkboxes, all already selected items remain selected and the newly selected items are merely added to the set of selected items.

...

Any view supporting the selection of multiple items shall indicate the total number of currently selected items.

 


Deselect a single item

You may deselect a single item by unchecking its checkbox or clicking on it while holding down the Ctrl/Command modifier key. When using the keyboard, move the keyboard focus on the item, then hit SPACE - hitting SPACE thus toggles a selection. On a touch device, you may only uncheck an item's checkbox to deselect it.

...

If you click on a grid or tree view offering item selection and you do not click on a selectable item, all previously selected items remain selected. You may only deselect all currently selected items if you toggle the "select all items" checkbox to first select all, then deselect all items (see #Select and deselect all items).

 


Hybrid selection solves conflicts

...

Note
titleHybrid selection in Magnolia works like this:
  • when only selecting a single item, ticking its checkbox or simply selecting it using a click, a tap or hitting SPACE on the keyboard doesn't make a difference
  • if one or multiple items are currently selected, you may add an item to this set by checking its checkbox or by selecting it while holding down the Ctrl/Cmd modifier key
  • if one or multiple items are currently selected, you may remove an item from this set by unticking its checkbox or by selecting it again while holding down the Ctrl/Cmd modifier key
  • when multiple items are selected, starting a drag or executing an action on them first ticks the checkboxes of all currently selected items (no matter how they were selected), then starts the drag or executes the actions on them. This is to visually clarify, which items are affected by the action.
  • a preview is always shown on all selected items, whether they have been selected by ticking their checkbox or not.

 


Open

Open an item for editing or further inspection

...

It is highly desirable that an operation is executed atomically on multiple items as this is expected semantically and allows properly supporting the undo functionality we plan to introduce with 5.0. 


Drag and drop

Drag and drop an item

...

Tree view supporting selection of a single item only

Mockup
Select single item - tree
Select single item - tree
Version3
NameSelect single item - tree

Tree view supporting selection of multiple items

Mockup
Select multiple items - tree
Select multiple items - tree
Version1
NameSelect multiple items - tree

Grid view supporting selection of a single item only

Mockup
Select single item - list
Select single item - list
Version6
NameSelect single item - list

Grid view supporting selection of multiple items

Mockup
Select multiple items - list
Select multiple items - list
Version3
NameSelect multiple items - list