Page History

h2. Story

Magnolia should let me navigate and browse lists (see [Definition of terms#list]) easily by using either a mouse, a keyboard and using touch gestures.


h2. Description of desired behaviour

A list can be navigated by using the *keyboard's arrow keys* (UP, RIGHT, LEFT and DOWN). The list shall load additional, previously invisible items on demand to ensure good performance even with large tree structures. A visual indicator shows if data is being loaded dynamically.

Likewise, a list may be navigated by using the *mouse and the scrollbar*. As is the case with keyboard navigation, a clear visual indicator appears if previously hidden items are being loaded and disappears once they become visible.

For touch input, scrolling the tree is supported using the common gesture by swiping a single finger up or down. 

Note that all scrolling operations should be smooth and not jumpy to avoid loosing sense of where in the list you currently are. Note that *list shall only scroll up and down*. We don't plan to support left and right scrolling for lists, since this is a feature often not noticed by users.


h3. Open and close folder items

{note:title=Opening folder items in lists}
The difficulty with folder items in lists in Magnolia is that they are actual items, which can also be edited. Since the two primary gestures of mouse and touch are already used to select an item (see [Focussing and selecting items#Select a single item]) and to open it for editing or inspection (see [Focussing and selecting items#Open an item for editing or further inspection]), opening a folder item requires using a modifier key for all input methods.
{note}

*Folder items in lists may be opened or closed* by double-clicking or double-tapping its icon or thumbnail image while holding down a modifier key (Command key on Mac, Alt on Windows and Linux). The content of the list view is then replaced by the list of items contained in the folder item. If data about items has to be loaded first, the list view is replaced by a visual indicator asking the user for patience. To return to the parent item of a currently shown sub list of items, the list view provides an "up" button - clicking or touching it returns you to the list view containing the parent folder item.

When using a keyboard, first focus the folder item you intend to open, then press the ENTER key together with a modifier key (Command on Mac, Alt on Windows and Linux). To return to a parent list from a sub list of items, press the UP arrow together with the same modifier key (Command on Mac, Alt on Windows and Linux) with the keyboard focus on any item in the list.

A list is not a very convenient way to quickly navigate a hierarchical set of items, but has the advantage of visualising the type of a file or even showing thumbnail previews of an item's content.


h3. Open an item for editing or further inspection

By double-clicking or touble-tapping an item or hitting the Enter key on a focused or selected item (see also [Focussing and selecting items]), a separate window opens, which shows an *edit or inspection view* of the item depending on the permissions of the logged in user.

h3. Optional behaviour

Magnolia should offer an index next to the scrollbar for large, _sorted_ lists similar to what can be seen on touch devices to allow to quickly jump to a certain position of the list.

Magnolia could offer inertial scrolling as seen of today's touch devices to allow users to quickly navigate large data sets without loosing track of where they are. This would be especially useful on said touch devices, but may actually be a function required to be offered by the browser.


h2. Mockups

{mockup}