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..5c6cbd56c4 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -28,8 +28,8 @@ color: $colorKey; } - h1, h2 { - color: pullForward($colorBodyFg, 20%); + h1, h2, strong, b { + color: pullForward($colorBodyFg, 50%); } h2 { @@ -45,6 +45,10 @@ text-transform: uppercase; } + strong, b { + font-weight: normal; + } + .w-markup { //Wrap markup example "pre" element background-color: $colorCode; @@ -54,6 +58,12 @@ position: relative; } + .w-mct-example { + div { + margin-bottom: $interiorMarginLg; + } + } + code, pre { font-size: 0.8rem; 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

-    

+    

 
diff --git a/example/styleguide/res/templates/status.html b/example/styleguide/res/templates/status.html
new file mode 100644
index 0000000000..52ce7e7f5a
--- /dev/null
+++ b/example/styleguide/res/templates/status.html
@@ -0,0 +1,142 @@
+
+
+

+    
Open MCT Style Guide

+    
Status Indication

+
+    

+        
Overview

+        
Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:

+        
+    

+
+    

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

+                
    
+                    
  • Color only
    • 
+                    
      
+                        
    • s-limit-yellow: A yellow limit.
      • 
+                        
    • s-limit-red: A red limit.
      • 
+                    
    
+                    
  • Color and icon
    • 
+                    
      
+                        
    • s-limit-yellow-icon: A yellow limit with icon.
      • 
+                        
    • s-limit-red-icon: A red limit with icon.
      • 
+                    
    
+                    
  • Upper and lower limit indicators. Must be used with a color limit class to be visible.
    • 
+                    
      
+                        
    • s-limit-upr: Upper limit.
+                        
      • 
+                        
    • s-limit-lwr: Lower limit.
+                        
      • 
+                    
    
+                

+            

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

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

+            

+
WARNING HI

+
WARNING LOW

+
DIAGNOSTIC

+
INFO

+
OK

+
WARNING HI with icon

+
WARNING LOW with icon

+
DIAGNOSTIC with icon

+
INFO with icon

+
OK with icon

+
WARNING HI with custom icon

+
+        

+    

+
+    

+        
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" };
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
deleted file mode 100644
index dac2fb0ff2..0000000000
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
-    &:before {
-        color: $iconColor;
-        content: $glyph;
-        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; }
-}
-
-// 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; }
-}
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 0260524e86..e16ae03455 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -27,7 +27,7 @@
 @import "about";
 @import "text";
 @import "icons";
-@import "limits";
+@import "status";
 @import "data-status";
 @import "helpers/bubbles";
 @import "helpers/splitter";
diff --git a/platform/commonUI/general/res/sass/_status.scss b/platform/commonUI/general/res/sass/_status.scss
new file mode 100644
index 0000000000..a07e9a3247
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_status.scss
@@ -0,0 +1,86 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*************************************************** MIXINS */
+@mixin formulateStatusColors($c) {
+    // Sets bg and icon colors for elements
+    background: rgba($c, 0.4) !important;
+    &:before { color: $c !important; }
+}
+
+
+
+/*************************************************** GENERAL */
+.s-limit-yellow,
+.s-limit-red,
+.s-limit-yellow-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,
+.s-status-warning-lo-icon,
+.s-status-warning-hi-icon,
+.s-status-diagnostic-icon,
+.s-status-command-icon,
+.s-status-info-icon,
+.s-status-ok-icon {
+    @include trans-prop-nice($props: background, $dur: 500ms);
+    &:before {
+        content:'';
+        font-family: symbolsfont;
+        font-size: 0.8em;
+        display: inline;
+        margin-right: $interiorMarginSm;
+    }
+}
+
+
+/*************************************************** LIMITS */
+.s-limit-yellow, .s-limit-yellow-icon {
+    @include formulateStatusColors($colorWarningLo);
+}
+
+.s-limit-red, .s-limit-red-icon {
+    @include formulateStatusColors($colorWarningHi);
+}
+
+.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; }
+
+/*************************************************** STATUS */
+.s-status-warning-hi, .s-status-warning-hi-icon {  @include formulateStatusColors($colorWarningHi); }
+.s-status-warning-lo, .s-status-warning-lo-icon {  @include formulateStatusColors($colorWarningLo); }
+.s-status-diagnostic, .s-status-diagnostic-icon {  @include formulateStatusColors($colorDiagnostic); }
+.s-status-info, .s-status-info-icon {  @include formulateStatusColors($colorInfo); }
+.s-status-ok, .s-status-ok-icon {  @include formulateStatusColors($colorOk); }
+
+.s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
+.s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
+.s-status-diagnostic-icon:before { content: $glyph-icon-eye-open; }
+.s-status-info-icon:before { content: $glyph-icon-info; }
+.s-status-ok-icon:before { content: $glyph-icon-check; }
+
+
diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss
index 82bb43c008..fcc0df7665 100644
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -39,7 +39,7 @@
 // Status coloring
 .ok, .info {
     .status-indicator {
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
 }
 
@@ -224,15 +224,15 @@
 	}
 	&.ok,
     &.info {
-		@include statusBannerColors($colorStatusInfo);
+		@include statusBannerColors($colorInfo);
 	}
 	&.caution,
     &.warning,
     &.alert {
-		@include statusBannerColors($colorStatusAlert);
+		@include statusBannerColors($colorWarningLo);
 	}
     &.error {
-        @include statusBannerColors($colorStatusError);
+        @include statusBannerColors($colorWarningHi);
     }
 }
 
@@ -248,15 +248,15 @@
 
     .message-severity-info .type-icon.message-type {
         @extend .icon-info;
-        color: $colorStatusInfo;
+        color: $colorInfo;
     }
     .message-severity-alert .type-icon.message-type {
         @extend .icon-bell;
-        color: $colorStatusAlert;
+        color: $colorWarningLo;
     }
     .message-severity-error .type-icon.message-type {
         @extend .icon-alert-rect;
-        color: $colorStatusError;
+        color: $colorWarningHi;
     }
 }
 /* Paths:
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 9d1886c13a..e89ff67ac4 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -53,9 +53,15 @@ $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
-// General Colors
+// Foundation Colors
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
+$colorWarningHi: #cc0000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
@@ -84,8 +90,8 @@ $colorCreateMenuText: $colorMenuFg;
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
-$colorFormValid: #33cc33;
-$colorFormError: #990000;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff3300;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
@@ -109,8 +115,8 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;
-$colorStatusInfo: #62ba72;
-$colorStatusAlert: #ffa66d;
+$colorStatusInfo: $colorInfo;
+$colorStatusAlert: $colorAlert;
 $colorStatusError: #d4585c;
 $colorStatusAvailable: $colorKey;
 $colorStatusBtnBg: $colorBtnBg;
@@ -125,14 +131,14 @@ $animPausedPulseDur: 500ms;
 $colorSelectBg: $colorBtnBg;
 $colorSelectFg: $colorBtnFg;
 
-// Limits and staleness colors
+// Limits, status and staleness colors
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
-$colorLimitYellowIc: #ffaa00;
-$colorLimitRedBg: rgba(red, 0.3);
-$colorLimitRedIc: red;
+$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
+$colorLimitYellowIc: $colorWarningLo;
+$colorLimitRedBg: rgba($colorWarningHi, 0.3);
+$colorLimitRedIc: $colorWarningHi;
 
 // Bubble colors
 $colorInfoBubbleBg: #ddd;
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
index e7f0898220..43ee6718ab 100644
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -13,3 +13,10 @@
     // For dark interfaces, darker things move back - opposite for light interfaces
     @return darken($c, $p);
 }
+
+@function bgFg($c) {
+    // Given a single color, return valid background and foreground versions of that color
+    $bg: darken($c, 20%);
+    $fg: lighten($c, 20%);
+    @return $bg, $fg;
+}
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 4501228e08..d6c0195555 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -53,9 +53,15 @@ $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 $colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
-// General Colors
+// Foundation Colors
 $colorAlt1: #776ba2;
 $colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 $colorIconLink: #49dedb;
 $colorPausedBg: #ff9900;
 $colorPausedFg: #fff;
@@ -84,8 +90,8 @@ $colorCreateMenuText: $colorBodyFg;
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
-$colorFormValid: #33cc33;
-$colorFormError: #990000;
+$colorFormValid: $colorOk;
+$colorFormError: $colorWarningHi;
 $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
@@ -107,7 +113,7 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #fff;
+$colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusAlert: #ffb66c;
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index 829823d7e9..03ad93685f 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -12,3 +12,11 @@
     // For dark interfaces, darker things move back - opposite for light interfaces
     @return lighten($c, $p);
 }
+
+@function bgFg($c) {
+    // Given a single color, return valid background and foreground versions of that color
+    $bg: darken($c, 20%);
+    $fg: lighten($c, 20%);
+    @return $bg, $fg;
+}
+