The Actions Rack
The Actions rack is an extension of the Rack UI component and is used throughout Magnolia 5 to show a list of actions in addition to other info associated with the currently selected item.
The List of Actions unit
In order to provide quick, consistent access to actions, the first unit in the Actions Rack shall always show the list of actions. While it may scroll out of view, it must remain on top of all units and cannot be closed. However, the unit may be maximized as any other unit does.
The list of actions makes it immediately apparent which actions are available on an item or a set of items. The default view shows only the most common actions and leaves out less used, special ones. Examples of common actions are add, edit, move and delete (the usual CRUD operations). Examples of less used actions include those with a more tool-like character such as the import and export functions of a node.
The list of actions is visually divided into two sections. The upper section contains actions relevant to the selected item, while the lower section offers copy & paste and undo/redo.
Show all actions
In order to show all available actions (not just the common ones), you click on a link button located right above the section containing the clipboard. The new actions are then sliding in and are appended to the list of common actions. Making them visible thus moves down both copy&paste and undo/redo. The link button stays in place and now offers to reduce the list - a click slides-out the less common actions again.
Copy & Paste and Undo/Redo
Copy & Paste and Undo/Redo always appear in tuples (pairs, actually). They are thus shown on a single line in order to group them and to make more space available to the other actions.
These action pairs inform the user what exactly will be done should he choose to select a particular action. If the user moves the mouse over one of member of an action pair, it is visually emphasized and takes over most of the line to reveal more details on the action it will run - it provides an invitation on hover.
As an example, if a user selects a page and moves the mouse over the "copy" action, it gets highlighted and will read "copy page". The "paste" button is hidden as the "copy" action has taken over most of the line. If the user however moves the mouse to the right to where the "paste" action used to be, the "paste" button eventually will appear again reading "paste pages", assuming that the user has previously copied a set of pages. If the user moves the mouse away from the "copy" button instead and onto a different row with actions altogether, both buttons become visible again.
The ability to show more details is a valuable preview of what will be done and required to build trust into these functions. Only if you know what you're e.g. going to undo will you be ready to actually undo it.
Please note that this behavior does not replace the action preview on right mouse click and tap-and-hold as described on the pages on the clipboard and undo/redo, but presents an additional invitation provided by the Action Rack.
Collapsing the Actions Rack
The Actions Rack can be collapsed so it takes up less space. When collapsed, only icons for the common actions, copy&paste, undo/redo as well as an icon to show the preview in a popup window are visible. A collapsed Actions rack doesn't support the display of all available actions or those of added units.
The purpose here is to simply minimize the screen estate used by the rack in scenarios involving common actions only.
Please note that all icons of common actions shall stay in place to avoid confusion. Use animations to avoid a disorientation of the user.
Showing notifications in collapsed state
A collapsed Actions Rack will indicate a problem in a (always invisible) unit by showing a notification icon. Consequently, a click on the icon also takes the user to the first unit reporting a problem, thereby ending the collapsed appearance of the rack.
Use animations to smoothen transition
The rack can see quite some changes in shape and positioning of its elements. Every such transition must be accompanied by animations. New elements appearing move others away; elements being minimized do so by animating their size change.
In particular, changing from the expanded appearance to the collapsed one could be disorienting since the latter does not support all features of the expanded rack. To avoid disorientation, the Action Rack shall:
- first scroll the upper area to the top so that the list of actions becomes visible,
- then transition from showing all actions to just the common ones
- and finally use an animation to collapse the rack
- during which the side-by-side arranged copy&paste and undo/redo icons fade out and the vertically laid out icons fade in
Note that one important goal during the transition from expanded to collapsed appearance is that the icons of all common actions stay in place.