Jump to: navigation, search

UX/PatternsLibrary

< UX
Revision as of 17:02, 15 June 2015 by Piet Kruithof (talk | contribs) (Wizard Modal)

Horizon Visual Specification

The intent of this wiki is to provide overall guidelines for implementing patterns for Horizon.

Assumptions: - The patterns will assume that the dev is using angular.js. - The patterns are intended to provide some guidance, but will not be overly prescriptive. - Patterns should be vetted through the community before being included in this wiki. - Community members should feel comfortable adding patterns

Components

Patterns

Panel Guideline

Details Panel

The Details panel contains detailed information for an object in Horizon and is typically opened by clicking on the object name from a list in a panel. For example, you would typically click on an instance name from the Instance panel to view specific details for that instance.

Overall, you would need a Details panel if there is too much information to easily fit within a row in a table. For example, an Instance includes a source, flavors, quotas, and networks; way too much stuff to fit into a single row. In addition, the details panel should allow users to take an Action on a object based on the information displayed in the Details panel. For example, a user should be able to update the flavor for a specific instance within the Instance details panel.


Instance Details Panel.png


Wizard Modal

The wizard is a specific kind of modal that is intended to guide users though relatively complex actions such as launching an instance. They typically have steps that must be completed before the user can complete steps later in the workflow.

Wikipedia has a description of wizards here.

Wizard-redline.png

Simple Modal

Responsive Tables