[Frontend] Markup and SCSS mods continued

Fixes #1894 - Moved *indicator styles into their own SCSS file; - SCSS consolidation and cleanups; - Markup simplification continued; - Fixed configs to target correct vars in JS files;
[Frontend] Markup simplification
2018-01-26 18:05:38 -08:00 · 2018-01-26 15:23:10 -08:00 · 2018-01-26 15:21:48 -08:00
15 changed files with 203 additions and 149 deletions
--- a/example/notifications/res/dialog-launch.html
+++ b/example/notifications/res/dialog-launch.html
@@ -1,9 +1,9 @@
-<span class="status block" ng-controller="DialogLaunchController">
+<span class="l-indicator s-indicator icon-box-with-arrow" ng-controller="DialogLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="status-indicator icon-box-with-arrow"></span><span class="label">
+    <span class="label">
        <a ng-click="launchProgress(true)">Known</a> |
        <a ng-click="launchProgress(false)">Unknown</a> |
        <a ng-click="launchError()">Error</a> |
        <a ng-click="launchInfo()">Info</a>
-    </span><span class="count"></span>
+    </span>
 </span>
--- a/example/notifications/res/notification-launch.html
+++ b/example/notifications/res/notification-launch.html
@@ -1,9 +1,9 @@
-<span class="status block" ng-controller="NotificationLaunchController">
+<span class="l-indicator s-indicator icon-bell" ng-controller="NotificationLaunchController">
    <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-    <span class="status-indicator icon-bell"></span><span class="label">
+    <span class="label">
        <a ng-click="newInfo()">Success</a> |
        <a ng-click="newError()">Error</a> |
        <a ng-click="newAlert()">Alert</a> |
        <a ng-click="newProgress()">Progress</a>
-    </span><span class="count"></span>
+    </span>
 </span>
--- a/example/styleguide/res/templates/status.html
+++ b/example/styleguide/res/templates/status.html
@@ -129,6 +129,44 @@
        </div>
    </div>

+    <div class="l-section">
+        <h2>Status Bar Indicators</h2>
+        <div class="cols cols1-1">
+            <div class="col">
+                <p>Indicators content goes here.</p>
+            </div>
+<mct-example><div class="status-holder s-status-bar">
+<span class="status-block-holder">
+    <span class="l-indicator s-indicator">
+        <span class="status-indicator icon-bell"></span>
+        <span class="label">Collapsible Indicator</span>
+    </span>
+</span>
+<span class="status-block-holder no-collapse caution">
+    <span class="l-indicator s-indicator">
+        <span class="status-indicator icon-bell"></span>
+        <span class="label">No collapse</span>
+    </span>
+</span>
+</div>
+<div class="status-holder s-status-bar">
+<span class="status-block-holder">
+    <span class="l-indicator s-indicator">
+        <span class="status-indicator icon-bell"></span>
+        <span class="label">Collapsible Indicator</span>
+    </span>
+</span>
+    <span class="status-block-holder">
+    <span class="status block s-status-info icon-info">
+        <span class="label">No collapse</span>
+    </span>
+</span>
+</div>
+</mct-example>
+        </div>
+    </div>
+
+
    <div class="l-section">
        <h2>Synchronization</h2>
        <div class="cols cols1-1">
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -42,6 +42,7 @@
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
+@import "controls/indicators";
@import "mobile/controls/menus";

 /********************************* FORMS */
--- a/platform/commonUI/general/res/sass/_status.scss
+++ b/platform/commonUI/general/res/sass/_status.scss
@@ -20,13 +20,15 @@
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
 /*************************************************** MIXINS */
-@mixin formulateStatusColors($c) {
+@mixin elementStatusColors($c) {
    // Sets bg and icon colors for elements
    background: rgba($c, 0.4) !important;
    &:before { color: $c !important; }
 }

-
+@mixin indicatorStatusColors($c) {
+    &:before, .count { color: $c; }
+}

 /*************************************************** GENERAL */
 .s-limit-yellow,
@@ -54,14 +56,13 @@
    }
 }

-
 /*************************************************** LIMITS */
 .s-limit-yellow, .s-limit-yellow-icon {
-    @include formulateStatusColors($colorWarningLo);
+    @include elementStatusColors($colorWarningLo);
 }

 .s-limit-red, .s-limit-red-icon {
-    @include formulateStatusColors($colorWarningHi);
+    @include elementStatusColors($colorWarningHi);
 }

 .s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
@@ -70,11 +71,11 @@
 .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, .s-status-warning-hi-icon {  @include elementStatusColors($colorWarningHi); }
+.s-status-warning-lo, .s-status-warning-lo-icon {  @include elementStatusColors($colorWarningLo); }
+.s-status-diagnostic, .s-status-diagnostic-icon {  @include elementStatusColors($colorDiagnostic); }
+.s-status-info, .s-status-info-icon {  @include elementStatusColors($colorInfo); }
+.s-status-ok, .s-status-ok-icon {  @include elementStatusColors($colorOk); }

 .s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
 .s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
@@ -82,4 +83,25 @@
 .s-status-info-icon:before { content: $glyph-icon-info; }
 .s-status-ok-icon:before { content: $glyph-icon-check; }

+/*************************************************** INDICATORS */
+.s-indicator-status-info {
+    @include indicatorStatusColors($colorInfo);
+}
+.s-indicator-status-ok {
+    @include indicatorStatusColors($colorOk);
+}
+.s-indicator-status-caution, .s-indicator-status-warning, .s-indicator-status-alert {
+    @include indicatorStatusColors($colorStatusAlert);
+}
+.s-indicator-status-error, .s-indicator-status-err {
+    @include indicatorStatusColors($colorStatusError);
+}
+.s-indicator-status-available {
+    @include indicatorStatusColors($colorStatusAvailable);
+}
+.s-indicator-status-subdued {
+    opacity: 0.7;
+}
+
+

--- a/platform/commonUI/general/res/sass/controls/_indicators.scss
+++ b/platform/commonUI/general/res/sass/controls/_indicators.scss
@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
+
+.l-indicator {
+    $transDelayHover: 1.5s;
+    $transDelayWhileExpanded: 2.5s;
+    $transSpeed: .25s;
+    display: inline-block;
+    margin-right: $interiorMarginSm;
+
+    &:before {
+        // Icon
+        display: inline-block;
+        opacity: 0.85;
+    }
+
+    .label,
+    .count {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    &.float-right {
+        float: right;
+    }
+
+    &.no-icon {
+        &:before {
+            display: none;
+        }
+    }
+
+    &:not(.no-collapse) {
+        .label {
+            // Max-width silliness is necessary for width transition
+            @include trans-prop-nice((max-width, margin-right), $transSpeed, $transDelayWhileExpanded);
+            overflow: hidden;
+            margin-right: 0;
+            max-width: 0px;
+            white-space: nowrap;
+        }
+        &:hover {
+            &:before {
+                opacity: 1;
+            }
+
+            .label {
+                @include trans-prop-nice((max-width, margin-right), 0s);
+                margin-right: $interiorMargin;
+                max-width: 600px;
+                width: auto;
+            }
+
+            .count {
+                @include trans-prop-nice(max-width, 0s);
+                opacity: 0;
+            }
+        }
+    }
+
+    .count {
+        @include trans-prop-nice(opacity, $transSpeed, $transDelayWhileExpanded);
+        font-weight: bold;
+        opacity: 1;
+    }
+
+    .s-button {
+        background: $colorStatusBtnBg;
+        padding: 0 $interiorMargin;
+        height: auto;
+        line-height: inherit;
+    }
+}
+
+.s-indicator {
+    color: $colorStatusDefault;
+
+}
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -36,110 +36,6 @@
 	}
 }

-// Status coloring
-.ok, .info {
-    .status-indicator {
-        color: $colorInfo;
-    }
-}
-
-.alert, .caution, .warning {
-    .status-indicator, .count {
-        color: $colorStatusAlert;
-    }
-
-}
-
-.error, .err {
-    .status-indicator, .count {
-        color: $colorStatusError;
-    }
-}
-
-.available {
-    .status-indicator, .count {
-        color: $colorStatusAvailable;
-    }
-}
-
-.subdued {
-    .status-indicator {
-        color: pullForward($colorStatusBarBg, 40%);
-    }
-}
-
-.status-block-holder {
-    // Applied to mct-include element
-    // Contains status.block elements
-    $transDelay: 1.5s;
-    $transSpeed: .25s;
-    display: inline-block;
-    &.clickable { cursor: pointer; }
-    &:not(.clickable) { cursor: default; }
-    &.no-icon .status.block {
-        .status-indicator {
-            display: none;
-        }
-    }
-    &.float-right {
-        float: right;
-    }
-    &:not(.no-collapse) .status.block {
-        .label {
-            // Max-width silliness is necessary for width transition
-            @include trans-prop-nice(max-width, $transSpeed, $transDelay);
-            overflow: hidden;
-            max-width: 0px;
-        }
-        &:hover {
-            .label {
-                @include trans-prop-nice(max-width, $transSpeed, 0s);
-                max-width: 600px;
-                width: auto;
-            }
-            .count {
-                @include trans-prop-nice(max-width, $transSpeed, 0s);
-                opacity: 0;
-            }
-        }
-    }
-
-}
-
-.status.block {
-    $transDelay: 1.5s;
-    $transSpeed: .25s;
-	color: $colorStatusDefault;
-	display: inline-block;
-	margin-right: $interiorMargin;
-	.status-indicator,
-	.label,
-	.count {
-		display: inline-block;
-		vertical-align: top;
-	}
-
-	.status-indicator {
-        background: none !important;
-		margin-right: $interiorMarginSm;
-        &[class*='s-status']:before {
-            font-size: 1em;
-        }
-	}
-
-	.count {
-		@include trans-prop-nice(opacity, $transSpeed, $transDelay);
-		font-weight: bold;
-		opacity: 1;
-	}
-    .s-button {
-        background: $colorStatusBtnBg;
-        padding: 0 $interiorMargin;
-        height: auto;
-        line-height: inherit;
-    }
-}
-
 /******************************************************************* MESSAGE BANNERS */
 .message {
 	&.block {
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -81,16 +81,11 @@
        @include absPosDefault(0);// New status bar design
        top: auto;
        height: $ueFooterH;
-        line-height: $ueFooterH - ($interiorMargin * 2);
-        background: $colorStatusBarBg;
-        color: lighten($colorBodyBg, 30%);
-        font-size: .7rem;
-        .status-holder {
+        .indicator-holder {
            box-sizing: border-box;
            @include absPosDefault($interiorMargin);
            @include ellipsize();
            right: 120px;
-            text-transform: uppercase;
            z-index: 1;
        }
        .app-logo {
@@ -105,6 +100,14 @@
    }
 }

+.s-status-bar {
+    background: $colorStatusBarBg;
+    color: lighten($colorBodyBg, 30%);
+    font-size: .7rem;
+    line-height: $ueFooterH - ($interiorMargin * 2);
+    text-transform: uppercase;
+}
+
 .edit-mode {
    // Old edit mode
    .split-layout {
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,13 +19,11 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
-    <div id='status' class='status-holder'>
+<div class='abs bottom-bar ue-bottom-bar s-status-bar mobile-disable-select' ng-controller="BottomBarController as bar">
+    <div id='status' class='indicator-holder'>
        <mct-include ng-repeat="indicator in bar.getIndicators()"
                     ng-model="indicator.ngModel"
-                     key="indicator.template"
-                     class="status-block-holder"
-                     ng-class='indicator.ngModel.getGlyphClass()'>
+                     key="indicator.template">
        </mct-include>
    </div>
    <mct-include key="'message-banner'"></mct-include>
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -20,14 +20,13 @@
 at runtime from the About dialog for additional information.
 -->
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<div class='status block'
+<div class='l-indicator s-indicator s-indicator-status-{{ngModel.getGlyphClass()}}'
 	 title="{{ngModel.getDescription()}}"
 	 ng-click='ngModel.configure()'
-	 ng-show="ngModel.getText().length > 0">
-	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
-		  ng-class='ngModel.getTextClass()'>
+	 ng-show="ngModel.getText().length > 0"
+     ng-class="ngModel.getCssClass()">
+	<span class="label" ng-class='ngModel.getTextClass()'>
 		{{ngModel.getText()}}
        <a class="s-button icon-gear" ng-if="ngModel.configure"></a>
-	</span><span class="count">
 	</span>
 </div>
--- a/platform/commonUI/notification/res/notification-indicator.html
+++ b/platform/commonUI/notification/res/notification-indicator.html
@@ -1,9 +1,7 @@
 <!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
-<a ng-click="showNotificationsList()" ng-show="notifications.length > 0" class="status block"
-      ng-class="highest.severity"
+<a ng-click="showNotificationsList()" ng-show="notifications.length > 0" class="l-indicator s-indicator s-indicator-status-{{highest.severity}} icon-bell"
      ng-controller="NotificationIndicatorController">
-    <span class="status-indicator icon-bell"></span><span class="label">
-      {{notifications.length}} Notifications
+    <span class="label">
+        {{notifications.length}} Notification<span ng-show="notifications.length > 1">s</span>
    </span><span class="count">{{notifications.length}}</span>
-
 </a>
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -55,7 +55,7 @@ $colorTransLucBg: #666; // Used as a visual blocking element over variable backg

 // Foundation Colors
 $colorAlt1: #ffc700;
-$colorAlert: #ff3c00;
+$colorAlert: #ff6600;
 $colorWarningHi: #cc0000;
 $colorWarningLo: #ff9900;
 $colorDiagnostic: #a4b442;
@@ -114,10 +114,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);

 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
-$colorStatusDefault: #ccc;
+$colorStatusDefault: #999;
 $colorStatusInfo: $colorInfo;
 $colorStatusAlert: $colorAlert;
-$colorStatusError: #d4585c;
+$colorStatusError: #ff3300;
 $colorStatusAvailable: $colorKey;
 $colorStatusBtnBg: $colorBtnBg;
 $colorProgressBarOuter: rgba(#000, 0.1);
--- a/platform/features/clock/src/indicators/ClockIndicator.js
+++ b/platform/features/clock/src/indicators/ClockIndicator.js
@@ -45,11 +45,11 @@ define(
        }

        ClockIndicator.prototype.getGlyphClass = function () {
-            return "no-collapse float-right subdued";
+            return "subdued";
        };

        ClockIndicator.prototype.getCssClass = function () {
-            return "icon-clock";
+            return "icon-clock no-collapse float-right";
        };

        ClockIndicator.prototype.getText = function () {
--- a/platform/features/clock/src/indicators/FollowIndicator.js
+++ b/platform/features/clock/src/indicators/FollowIndicator.js
@@ -36,11 +36,11 @@ define(
        }

        FollowIndicator.prototype.getGlyphClass = function () {
-            return "";
+            return (this.timerService.getTimer()) ? "ok" : "none";
        };

        FollowIndicator.prototype.getCssClass = function () {
-            return (this.timerService.getTimer()) ? "icon-timer s-status-ok" : "icon-timer";
+            return "icon-timer";
        };

        FollowIndicator.prototype.getText = function () {
--- a/src/plugins/URLIndicatorPlugin/URLIndicator.js
+++ b/src/plugins/URLIndicatorPlugin/URLIndicator.js
@@ -40,7 +40,7 @@ define(
            };
        function URLIndicator($http, $interval) {
            var self = this;
-            this.cssClass = this.options.cssClass ? this.options.cssClass : "icon-database";
+            this.cssClass = this.options.cssClass ? this.options.cssClass : "icon-chain-links";
            this.URLpath = this.options.url;
            this.label = this.options.label ? this.options.label : this.options.url;
            this.interval = this.options.interval || 10000;