Status Indication

Status classes allow any block or inline-block element to be decorated in order to articulate a status. Provided classes include color-only and color plus icon; custom icons can easily be employed by using a color-only status class in combination with an glyph.

• Color only
• s-status-warning-hi
• s-status-warning-lo
• s-status-diagnostic
• s-status-info
• s-status-ok
• Color and icon
• s-status-icon-warning-hi
• s-status-icon-warning-lo
• s-status-icon-diagnostic
• s-status-icon-info
• s-status-icon-ok

Limit classes are a specialized form of status, specifically meant to be applied to telemetry displays to indicate that a limit threshold has been violated. Open MCT provides both severity and direction classes; severity (yellow and red) can be used alone or in combination with direction (upper or lower). Direction classes cannot be used on their own.

Like Status classes, Limits can be used as color-only, or color plus icon. Custom icons can be applied in the same fashion as described above.

• Severity color alone
• s-limit-yellow: A yellow limit.
• s-limit-red: A red limit.
• Severity color and icon
• s-limit-icon-yellow: A yellow limit with icon.
• s-limit-icon-red: A red limit with icon.
• Direction indicators. MUST be used with a "color alone" limit class. See examples for more.
• s-limit-upr: Upper limit.
• s-limit-lwr: Lower limit.

Indicators are small iconic notification elements that appear in the Status Bar area of the application at the window's bottom. Indicators should be used to articulate the state of a system and optionally provide gestures related to that system. They use a combination of icon and color to identify themselves and articulate a state respectively.

Recommendations

• Keep the icon consistent. The icon is the principal identifier of the system and is a valuable recall aid for the user. Don't change the icon as a system's state changes, use color and text for that purpose.
• Don't use the same icon more than once. Select meaningful and distinct icons so the user will be able to quickly identify what they're looking for.

States

• Disabled: The system is not available to the user.
• Off / Available: The system is accessible to the user but is not currently "On" or has not been configured. If the Indicator directly provides gestures related to the system, such as opening a configuration dialog box, then use "Available"; if the user must act elsewhere or the system isn't user-controllable, use "Off".
• On: The system is enabled or configured; it is having an effect on the larger application.
• Alert / Error: There has been a problem with the system. Generally, "Alert" should be used to call attention to an issue that isn't critical, while "Error" should be used to call attention to a problem that the user should really be aware of or do something about.

Structure

Indicators consist of a .ls-indicator wrapper element with .icon-* classes for the type of thing they represent and .s-status-* classes to articulate the current state. Title attributes should be used to provide more verbose information about the thing and/or its status.

The wrapper encloses a .label element that is displayed on hover. This element should include a brief statement of the current status, and can also include clickable elements as <a> tags. An optional .count element can be included to display information such as a number of messages.

Icon classes are as defined on the Glyphs page. Status classes applicable to Indicators are as follows:

• s-status-disabled
• s-status-off
• s-status-available
• s-status-on
• s-status-alert
• s-status-error