From 603e990755b45ce1167389e424cabdbd138020fa Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Aug 2017 09:08:12 -0700 Subject: [PATCH 1/9] [Frontend] Refactoring of limits CSS Fixes #1677 Removed `` support; modded existing styles to allow color-only application for red and yellow limits; added `*-icon` classes for red and yellow limits; --- .../commonUI/general/res/sass/_glyphs.scss | 21 ++++++ .../commonUI/general/res/sass/_limits.scss | 68 +++++++++++-------- 2 files changed, 61 insertions(+), 28 deletions(-) diff --git a/platform/commonUI/general/res/sass/_glyphs.scss b/platform/commonUI/general/res/sass/_glyphs.scss index d50eb5701b..db45d52884 100644 --- a/platform/commonUI/general/res/sass/_glyphs.scss +++ b/platform/commonUI/general/res/sass/_glyphs.scss @@ -1,3 +1,24 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2017, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ @mixin glyphBefore($unicode, $family: 'symbolsfont') { &:before { content: $unicode; diff --git a/platform/commonUI/general/res/sass/_limits.scss b/platform/commonUI/general/res/sass/_limits.scss index dac2fb0ff2..aeeac289e9 100644 --- a/platform/commonUI/general/res/sass/_limits.scss +++ b/platform/commonUI/general/res/sass/_limits.scss @@ -1,39 +1,51 @@ -@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) { +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2017, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +.s-limit-yellow, +.s-limit-red, +.s-limit-yellow-icon, +.s-limit-red-icon { &:before { - color: $iconColor; - content: $glyph; + content:''; font-family: symbolsfont; font-size: 0.8em; display: inline; margin-right: $interiorMarginSm; } - } -.s-limit-red { background: $colorLimitRedBg !important; } -.s-limit-yellow { background: $colorLimitYellowBg !important; } - -// Handle limit when applied to a tr -tr[class*="s-limit"] { - &.s-limit-red td:first-child { - @include limitGlyph($colorLimitRedIc); - } - &.s-limit-yellow td:first-child { - @include limitGlyph($colorLimitYellowIc); - } - &.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; } - &.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; } +.s-limit-yellow, +.s-limit-yellow-icon { + background: $colorLimitYellowBg !important; + &:before { color: $colorLimitYellowIc !important; } } -// Handle limit when applied directly to a non-tr element -// Assume this is applied to the element that displays the limit value -:not(tr)[class*="s-limit"] { - &.s-limit-red { - @include limitGlyph($colorLimitRedIc); - } - &.s-limit-yellow { - @include limitGlyph($colorLimitYellowIc); - } - &.s-limit-upr:before { content: $glyph-icon-arrow-double-up; } - &.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; } +.s-limit-red, +.s-limit-red-icon { + background: $colorLimitRedBg !important; + &:before { color: $colorLimitRedIc !important; } } + + +.s-limit-upr:before { content: $glyph-icon-arrow-double-up; } +.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; } +.s-limit-yellow-icon:before, +.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; } \ No newline at end of file From a6c3d98dddef918a9929cbd2a345b4428b0e7ba6 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Aug 2017 11:27:35 -0700 Subject: [PATCH 2/9] [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" }; From c2ff81bad1006b5ef7ebba4f1656ccbd032fba85 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Aug 2017 11:28:14 -0700 Subject: [PATCH 3/9] [Frontend] Add .w-mct-example to mct-example.html Fixes #1677 --- example/styleguide/res/templates/mct-example.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/styleguide/res/templates/mct-example.html b/example/styleguide/res/templates/mct-example.html index 2c87e6329b..a7fb0b5d0b 100644 --- a/example/styleguide/res/templates/mct-example.html +++ b/example/styleguide/res/templates/mct-example.html @@ -4,5 +4,5 @@ 

     
     
Example

-    

+    

 

From 6ed76708ec356ee34538d4ab049bf5d9b50a835a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo 
Date: Thu, 17 Aug 2017 11:30:00 -0700
Subject: [PATCH 4/9] [Frontend] WIP adding status classes

Fixes #1677
---
 platform/commonUI/general/res/sass/_limits.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_limits.scss b/platform/commonUI/general/res/sass/_limits.scss
index aeeac289e9..df31b6e420 100644
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@@ -22,7 +22,13 @@
 .s-limit-yellow,
 .s-limit-red,
 .s-limit-yellow-icon,
-.s-limit-red-icon {
+.s-limit-red-icon,
+.s-status-warning-lo,
+.s-status-warning-hi,
+.s-status-diagnostic,
+.s-status-command,
+.s-status-info,
+.s-status-ok {
     &:before {
         content:'';
         font-family: symbolsfont;
@@ -44,8 +50,8 @@
     &:before { color: $colorLimitRedIc !important; }
 }
 
-
 .s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
 .s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
 .s-limit-yellow-icon:before,
-.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
\ No newline at end of file
+.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
+

From 747afa6200ec947073dc12db3388bd693fd3fdf3 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo 
Date: Thu, 17 Aug 2017 16:32:25 -0700
Subject: [PATCH 5/9] [Frontend] WIP

Fixes #1677
Refactor and re-organize alert and status colors;
Rename _limits.scss to _status.scss;
Style Guide additions in progress;
VERY WIP, NEEDS UNIT TESTING FOR REGRESSION.
---
 example/styleguide/res/templates/status.html  | 23 +++++++++
 platform/commonUI/general/res/sass/_main.scss |  2 +-
 .../res/sass/{_limits.scss => _status.scss}   | 47 +++++++++++++++----
 .../general/res/sass/controls/_messages.scss  | 14 +++---
 .../themes/espresso/res/sass/_constants.scss  | 26 ++++++----
 .../themes/espresso/res/sass/_mixins.scss     |  7 +++
 .../themes/snow/res/sass/_constants.scss      | 14 ++++--
 .../themes/snow/res/sass/_mixins.scss         |  8 ++++
 8 files changed, 110 insertions(+), 31 deletions(-)
 rename platform/commonUI/general/res/sass/{_limits.scss => _status.scss} (52%)

diff --git a/example/styleguide/res/templates/status.html b/example/styleguide/res/templates/status.html
index 4e3f760f95..e70dbb97a9 100644
--- a/example/styleguide/res/templates/status.html
+++ b/example/styleguide/res/templates/status.html
@@ -21,6 +21,7 @@
 -->