[Frontend] Tweaks to markup and CSS

WTD-1172
scrolling.html markup and CSS hooks;
added comments to change points;
CSS tweaking;

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

@@ -25,8 +25,11 @@ $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff9900;
 $colorGridLines: rgba(#fff, 0.05);
-$colorLimitYellow: #cc9900;
+$colorLimitYellow: #9d7500;
-$colorLimitRed: #cc0000;
+$colorLimitRed: #aa0000;
+$colorTelemFresh: #fff;
+$colorTelemStale: #aaa;
+$styleTelemState: italic;
 
 // Ratios
 $ltGamma: 20%;
@@ -57,6 +60,7 @@ $ueBrowseGridItemBottomBarH: 40px;
 $colorItemBase: lighten($colorBodyBg, 5%);
 $colorItemFg: lighten($colorItemBase, 20%);
 $colorItemSelected: $colorKey;
+$itemPadLR: 5px;
 
 // Tree
 $treeVCW: 10px;
@@ -68,7 +72,7 @@ $colorItemTreeVCHover: $colorAlt1;
 
 //Tabular
 $tabularHeaderH: 20px;
-$tabularTdPadLR: 5px;
+$tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 2px;
 $tabularColorBorder: rgba(white, 0.1);
 $tabularColorBodyBg: darken($colorBodyBg, 10%);

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

@@ -1,4 +1,13 @@
-.s-limit {
+@mixin limit($c, $glyph) {
+	background: $c;
+	&:before {
+		color: lighten($c, 30%);
+		content: $glyph;
+	}
+}
+
+.s-limit-upr,
+.s-limit-lwr {
 	$a: 0.5;
 	$l: 30%;
 	white-space: nowrap;
@@ -6,40 +15,17 @@
 		display: inline-block;
 		font-family: symbolsfont;
 		font-size: 0.8em;
-		//line-height: 1.1em;
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
-	&.s-limit-upr {
-		&.s-limit-yellow {
-			background: rgba($colorLimitYellow, $a);
-			&:before {
-				color: lighten($colorLimitYellow, $l);
-				content: "\0000ed";
-			}
-		}
-		&.s-limit-red {
-			background: rgba($colorLimitRed, $a);
-			&:before {
-				color: lighten($colorLimitRed, $l);
-				content: "\0000eb";
-			}
-		}
-	}
-	&.s-limit-lwr {
-		&.s-limit-yellow {
-			background: rgba($colorLimitYellow, $a);
-			&:before {
-				color: lighten($colorLimitYellow, $l);
-				content: "\0000ec";
-			}
-		}
-		&.s-limit-red {
-			background: rgba($colorLimitRed, $a);
-			&:before {
-				color: lighten($colorLimitRed, $l);
-				content: "\0000ee";
-			}
 }
+
+.s-limit-upr {
+	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
+	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
 }
+
+.s-limit-lwr {
+	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
+	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
 }

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -71,10 +71,19 @@
 		}
 		.td {
 			border-top: 1px solid $tabularColorBorder;
+			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;
 			&.numeric {
 				text-align: right;
 			}
+			&.s-cell-type-value {
+				text-align: right;
+				.l-cell-contents {
+					@include border-radius($smallCr);
+					padding-left: $itemPadLR;
+					padding-right: $itemPadLR;
+				}
+			}
 		}
 	}
 }

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -224,7 +224,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		@include border-radius($smallCr);
 		color: #fff;
 		line-height: 1.5em;
-		padding: 0px 5px;
+		padding: 0px $itemPadLR;
 		.plot-color-swatch {
 			border: 1px solid $colorBodyBg;
 			height: $swatchD + 1;

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

@@ -9,12 +9,13 @@
 		{{ngModel.name}}
 	</div>
 	<div
-		class="l-elem l-value"
+		class="l-elem l-value s-value"
 		ng-class="{ 'telem-only': !ngModel.element.titled }"
 		>
+		<!-- ng-class is temporarily hard-coded in next element -->
 	    <span
-		    class="l-value-bg"
+		    class="l-value-bg s-value-bg"
-		    ng-class="{ 's-limit': ngModel.value < 0, 's-limit-lwr': 1, 's-limit-red' : 1 }"
+		    ng-class="{ 's-limit-lwr': ngModel.value < 0, 's-limit-red' : 1 }"
 		    >
 			{{ngModel.value}}
 		</span>

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

@@ -5,10 +5,11 @@
          ng-style="{ height: 100 / plot.getSubPlots().length + '%'}"
          ng-repeat="subplot in plot.getSubPlots()">
         <div class="gl-plot-legend">
+	        <!-- ng-class is temporarily hard-coded in next element -->
             <span
 	            class='plot-legend-item'
                 ng-repeat="telemetryObject in subplot.getTelemetryObjects()"
-                ng-class="{ 's-limit': $index < 1, 's-limit-lwr': 1, 's-limit-yellow' : 1 }"
+                ng-class="{ 's-limit-lwr': $index < 1, 's-limit-yellow' : 1 }"
 	            >
                 <span class='plot-color-swatch'
                       ng-style="{ 'background-color': plot.getColor($index) }">
@@ -54,6 +55,7 @@
              ng-mouseleave="subplot.isHovering(false)">
 
 	        <!-- Out-of-bounds data indicators -->
+	        <!-- ng-show is temporarily hard-coded in next element -->
             <div ng-show="1" class="l-oob-data l-oob-data-up"></div>
             <div ng-show="1" class="l-oob-data l-oob-data-dwn"></div>
 

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

@@ -13,8 +13,18 @@
             </div>
 
             <div class="tr" ng-repeat="row in rows">
-                <div class="td" ng-repeat="cell in row">
+                <div
+	                class="td"
+	                ng-class="{ 's-cell-type-value': $index > 1 }"
+	                ng-repeat="cell in row"
+	                >
+	                <!-- 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 }"
+		                >
 						{{cell}}
+					</span>
                 </div>
             </div>