Jump to: navigation, search

Difference between revisions of "UX/PatternsLibrary"

< UX
(Details Panel)
Line 23: Line 23:
  
  
 +
[[File:Instance Details Panel.png]]
 +
 +
=== Wizard Modal===
 +
 +
 +
===Simple Modal===
  
[[File:Instance Details Panel.png]]
+
 
 +
===Responsive Tables===

Revision as of 04:02, 15 June 2015

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

Simple Modal

Responsive Tables