[Frontend] CSS hooks for staleness

WTD-1172
New .scss file for staleness
Added CSS hooks in templates for staleness

platform/commonUI/general/res/css/theme-espresso.css

@@ -752,6 +752,11 @@ span {
     color: #ff4444;
     content: "î"; }
 
+/* line 1, ../sass/_data-status.scss */
+.s-stale {
+  opacity: 0.5 !important;
+  font-style: italic !important; }
+
 /* line 1, ../sass/lists/_tabular.scss */
 .w1 {
   background: #4d4d4d;

platform/commonUI/general/res/sass/_data-status.scss

@@ -0,0 +1,5 @@
+.s-stale {
+	//color: $colorTelemStale !important;
+	opacity: 0.5 !important;
+	font-style: italic !important;
+}

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

@@ -16,6 +16,7 @@
 @import "badges";
 @import "icons";
 @import "limits";
+@import "data-status";
 @import "lists/tabular";
 @import "controls/buttons";
 @import "controls/color-palette";

platform/features/layout/res/templates/elements/telemetry.html

@@ -1,5 +1,6 @@
 <div
 	class="l-fixed-position-text l-telemetry"
+	ng-class="{ 's-stale': 1 }"
 	ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
 	>
 	<div
@@ -15,7 +16,7 @@
 		<!-- ng-class is temporarily hard-coded in next element -->
 	    <span
 		    class="l-value-bg s-value-bg"
-		    ng-class="{ 's-limit-lwr': ngModel.value < 0, 's-limit-red' : 1 }"
+		    ng-class="{ 's-limit-lwr': ngModel.value < 0, 's-limit-red' : ngModel.value < 0 }"
 		    >
 			{{ngModel.value}}
 		</span>

platform/features/plot/res/templates/plot.html

@@ -9,7 +9,7 @@
             <span
 	            class='plot-legend-item'
                 ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
-                ng-class="{ 's-limit-lwr': $index < 1, 's-limit-yellow' : 1 }"
+                ng-class="{ 's-limit-upr s-limit-red': $index < 1, 's-stale': $index%2==0 }"
 	            >
                 <span class='plot-color-swatch'
                       ng-style="{ 'background-color': plot.getColor($index) }">

platform/features/scrolling/res/templates/scrolling.html

@@ -12,7 +12,13 @@
                 </div>
             </div>
 
-            <div class="tr" ng-repeat="row in rows">
+	        <!-- ng-class is temporarily hard-coded in next element -->
+            <div
+	            class="tr"
+	            ng-repeat="row in rows"
+                ng-class="{ 's-stale': $index%3==0 }"
+	            >
+	            <!-- ng-class is temporarily hard-coded in next element -->
                 <div
 	                class="td"
 	                ng-class="{ 's-cell-type-value': $index > 1 }"
@@ -21,7 +27,7 @@
 	                <!-- ng-class is temporarily hard-coded in next element -->
 	                <span
 		                class="l-cell-contents"
-		                ng-class="{ 's-limit-upr': cell > 0, 's-limit-yellow':1 }"
+		                ng-class="{ 's-limit-upr': cell > 0, 's-limit-yellow': cell > 0 }"
 		                >
 						{{cell}}
 					</span>