[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

@@ -21,6 +21,7 @@
 -->
 <style>
     .w-mct-example div[class*="s-limit"],
+    .w-mct-example div[class*="s-status"],
     .w-mct-example div[class*="s-unsynced"],
     .w-mct-example span[class*="s-limit"] {
         border-radius: 4px;
@@ -73,6 +74,28 @@
         </div>
     </div>
 
+    <div class="l-section">
+        <h2>Status</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Classes here can be applied to elements as needed.</p>
+                <ul>
+                    <li><code>s-status-warning-hi</code>: Nuke the entire site from orbit - it's the only way to be sure.</li>
+                    <li><code>s-status-warning-lo</code>: Pay attention to this.</li>
+                    <li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li>
+                    <li><code>s-status-info</code>: What?! What?! Oh, ok.</li>
+                    <li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</li>
+                </ul>
+            </div>
+<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div>
+<div class="s-status-warning-lo-icon">WARNING LOW</div>
+<div class="s-status-diagnostic-icon">DIAGNOSTIC</div>
+<div class="s-status-info-icon">INFO</div>
+<div class="s-status-ok-icon">OK</div>
+</mct-example>
+        </div>
+    </div>
+
     <div class="l-section">
         <h2>Synchronization</h2>
         <div class="cols cols1-1">

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";

platform/commonUI/general/res/sass/_status.scss

@@ -19,6 +19,16 @@
  * 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,
@@ -28,7 +38,14 @@
 .s-status-diagnostic,
 .s-status-command,
 .s-status-info,
-.s-status-ok {
+.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;
@@ -38,16 +55,14 @@
     }
 }
 
-.s-limit-yellow,
+
-.s-limit-yellow-icon {
+/*************************************************** LIMITS */
-    background: $colorLimitYellowBg !important;
+.s-limit-yellow, .s-limit-yellow-icon {
-    &:before { color: $colorLimitYellowIc !important; }
+    @include formulateStatusColors($colorWarningLo);
 }
 
-.s-limit-red,
+.s-limit-red, .s-limit-red-icon {
-.s-limit-red-icon {
+    @include formulateStatusColors($colorWarningHi);
-    background: $colorLimitRedBg !important;
-    &:before { color: $colorLimitRedIc !important; }
 }
 
 .s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
@@ -55,3 +70,17 @@
 .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; }
+
+

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:

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;
+$colorFormValid: $colorOk;
-$colorFormError: #990000;
+$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;
+$colorStatusInfo: $colorInfo;
-$colorStatusAlert: #ffa66d;
+$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);
+$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
-$colorLimitYellowIc: #ffaa00;
+$colorLimitYellowIc: $colorWarningLo;
-$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitRedBg: rgba($colorWarningHi, 0.3);
-$colorLimitRedIc: red;
+$colorLimitRedIc: $colorWarningHi;
 
 // Bubble colors
 $colorInfoBubbleBg: #ddd;

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

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;
+$colorFormValid: $colorOk;
-$colorFormError: #990000;
+$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;

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