| Uxstatus | revisit | revisit |
|---|
There's nothing to see here. plz move on. |
...
| ||||
Story
If I select an itema content element on a page I'm currently editing, Magnolia provides presents me with a preview of the item as well as the list of common actions applicable to itI can execute on it. With these, I can add new elements, edit the element, move or delete it, etc., if I have the necessary rights to do so. I can also retrieve a list of all actions defined on the currently selected item if I choose to do somy element, but it's the common actions which are visible by default.
Magnolia also offers me additional information on the item a selected content element if available and if this makes sense in the current context. I could get to see comments attached to a particular paragraph, a list of users working on a page in a interface showing me the status of work items. Or I could get access to a page's history to check out the changes applied to it in the last 24 hourschanges applied on the current page or understand whether all content has already been translated into all required languages since I checked the last time.
Description of desired behavior
The Actions sidebar is used in AdminCentral to show both the actions on and a preview of the currently selected item or items. It is usually shown on the right-hand border (left-hand border on RTL setups) and is divided into two main areas.
| Anchor | ||||
|---|---|---|---|---|
|
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
|
The sidebar is shown in a column on the right side of the screen (left side on RTL setups) and has three distinctive parts. The header at the top shows the Magnolia logo, but is mainly used to signal notifications for waiting or missed messages such as errors or warnings. Visually, it references the appearance of the header area in AdminCentral and thus seconds to flag the space dedicated to controls and settings.
The middle part right below the header starts contains both the switch to change between editing the page and its preview, as well as the list of actions. It
...
The upper part always contains the list of actions, but may also show additional information on the currently selected itemcontent element. It This is implemented using an Actions Rack, which uses a dedicated unit for presenting and handling the list of actions. Please thus refer to the corresponding page for A dedicated page contains detailed descriptions on behavior and available functionality of the upper part of the sidebar as well as on how notifications are shown.The lower part of the sidebar is entirely reserved to the preview of the selected item. The preview may be minimized to make more room available for the rest of the sidebar.
The Preview
The preview takes over the entire lower area of the sidebar, which is always bottom aligned. It may be collapsed to make more room available for the Actions Rack and thus for the list of actions possibly and other units currently visible.
...
A click on the preview image shows a larger version of it in an overlay dialog, which may also present additional details on the selected item such as its file size or modification date. If a single item has been selected and the view it was selected in is a list, a tree or a grid, the overlay dialog also offers forward and backward buttons to jump to the next (lower) or previous (upper) item in that view. If multiple items were selected, these forward and backward buttons are restrained to move to the next or previous item of the selection.
...
Collapsing the Actions sidebar
behave and work together.
Finally, the lower part of the sidebar just above the bottom edge consists solely of a batch showing a configurable name and color. The batch helps a user to quickly identify the Magnolia instance she's currently working on.
Collapsing the Actions Sidebar
The Actions Sidebar can be collapsed so it takes The sidebar can be collapsed so it uses up less space. When collapsed, only icons for the common actions , as well as for copy&paste , and undo/redo as well as an icon to show the preview in a popup window are visible. The preview of the sidebar actually collapses alongside the Action Rack and remains available: it shows the thumbnail on request in a popup window.are visible. This toolbar-like sidebar also contains a simplified header just large enough to contain a message notification icon. A simplified badge without the name but featuring the same configured background color is remains available as well.
| Mockup | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Mockup | ||||||||
|
Care must be taken to ensure that changing from the expanded view of the sidebar to the collapsed one does not disorient and confuse the user. Use the animations to smoothen the transitions as defined for the Actions Rack and slide the preview up and down instead of abruptly opening and closing it.
| Note | ||
|---|---|---|
| ||
The following paragraph on message notifications is not final yet, but already captures how notifications will work once multiple message services exist. |
Show message notifications
If incoming messages arrive or important system messages wait to be acknowledged, a notification icon lights up. Since the space available to the header is minimal in the collapsed state of the sidebar, only the last reporting service may show its icon; the icons of all other message services remain hidden. If nothing has to be signaled, the icon of the whats-changed service (represented by the "home" icon in the mockup below) is shown by default.
//mockup showing how the collapsed sidebar shows a notification
If the user visits the service currently showing its icon and thus checks the newly arrived messages, he resets the icon to unlit state. The next service requiring to signal new messages may then show its icon.
//mockup showing the example below
As an example, let's assume there is one error waiting in the system messages list and two items I'm watching for changes have actually changed. The system messages service goes first and shows its icon signaling the error. The user clicks on it and is [taken to the list of system messages|Edit a page using its preview#Notifications and messages
] where he acknowledges that he's seen the error message. The icon returns to unlit state, but as there are also changes that we want to know about, the whats-changed service shows its icon signaling the two changes it has detected. If the user also acknowledges these, no notifications remain. The header finally shows the unlit "home" icon.