From a6c3d98dddef918a9929cbd2a345b4428b0e7ba6 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Aug 2017 11:27:35 -0700 Subject: [PATCH] [Frontend] Update Style Guide to add Status Indication Fixes #1677 --- example/styleguide/bundle.js | 3 + .../res/sass/_style-guide-base.scss | 6 ++ example/styleguide/res/templates/status.html | 86 +++++++++++++++++++ .../src/ExampleStyleGuideModelProvider.js | 1 + 4 files changed, 96 insertions(+) create mode 100644 example/styleguide/res/templates/status.html diff --git a/example/styleguide/bundle.js b/example/styleguide/bundle.js index 43fa475a24..aa8fda6d84 100644 --- a/example/styleguide/bundle.js +++ b/example/styleguide/bundle.js @@ -16,6 +16,7 @@ define([ { "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" }, { "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" }, { "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" }, + { "key": "styleguide.status", "name": "status", "cssClass": "icon-page", "description": "Limits, telemetry paused, etc." }, { "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" }, { "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" }, { "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" }, @@ -25,6 +26,7 @@ define([ { "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false }, { "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false }, { "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false }, + { "key": "styleguide.status", "type": "styleguide.status", "templateUrl": "templates/status.html", "editable": false }, { "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false }, { "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false }, { "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false }, @@ -47,6 +49,7 @@ define([ "intro", "standards", "colors", + "status", "glyphs", "styleguide:ui-elements" ] diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index 32b6a8bdf9..0c536243e6 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -54,6 +54,12 @@ position: relative; } + .w-mct-example { + div { + margin-bottom: $interiorMarginLg; + } + } + code, pre { font-size: 0.8rem; diff --git a/example/styleguide/res/templates/status.html b/example/styleguide/res/templates/status.html new file mode 100644 index 0000000000..4e3f760f95 --- /dev/null +++ b/example/styleguide/res/templates/status.html @@ -0,0 +1,86 @@ + + +
+

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
+ +
+
+ +
+

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
+ +
+
+
\ No newline at end of file diff --git a/example/styleguide/src/ExampleStyleGuideModelProvider.js b/example/styleguide/src/ExampleStyleGuideModelProvider.js index 87d7f020fa..98ee8ba6fe 100644 --- a/example/styleguide/src/ExampleStyleGuideModelProvider.js +++ b/example/styleguide/src/ExampleStyleGuideModelProvider.js @@ -34,6 +34,7 @@ define( pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" }; pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" }; pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" }; + pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" }; pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" }; pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" }; pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };