Open MCT Style Guide

Status Indication

Overview

Many elements in Open MCT need to articulate a dynamic status.

Limits

Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. "Level" limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.

  • s-limit-yellow: A yellow limit.
  • s-limit-red: A red limit.
  • s-limit-yellow-icon: A yellow limit with icon.
  • s-limit-red-icon: A red limit with icon.
  • s-limit-upr: Upper limit. Use this class in concert with a yellow or red limit class.
  • s-limit-lwr: Lower limit. Use this class in concert with a yellow or red limit class.
Yellow limit
Red limit
Yellow limit with icon
Red limit with icon
Lower yellow limit
Upper red limit
Red Limit with a custom icon
Some text with an inline element showing a yellow limit.
NameValue 1Value 2
ENG_PWR 49917.02370.23
ENG_PWR 499249.784-121.22
ENG_PWR 49930.4511.007

Status

Classes here can be applied to elements as needed.

  • s-status-warning-hi: Nuke the entire site from orbit - it's the only way to be sure.
  • s-status-warning-lo: Pay attention to this.
  • s-status-diagnostic: Something in the code wants to talk to you.
  • s-status-info: What?! What?! Oh, ok.
  • s-status-ok: Whew! Hand me a beer would'ya?
WARNING HI
WARNING LOW
DIAGNOSTIC
INFO
OK

Synchronization

When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class s-unsynced should be applied to that view.

This element is unsynced