[Frontend] Platform-specific mods to limits

vista#54
Refactor limits into multiple classes, separating
upr/lwr from red/yellow;
Modded SineWaveLimitCapability accordingly;
Normalized upr/lwr glyphs;
(cherry picked from commit a26d71b)

Author: charlesh88

example/generator/src/SinewaveLimitCapability.js

@@ -30,25 +30,25 @@ define(
             YELLOW = 0.5,
             LIMITS = {
                 rh: {
-                    cssClass: "s-limit-upr-red",
+                    cssClass: "s-limit-upr s-limit-red",
                     low: RED,
                     high: Number.POSITIVE_INFINITY,
                     name: "Red High"
                 },
                 rl: {
-                    cssClass: "s-limit-lwr-red",
+                    cssClass: "s-limit-lwr s-limit-red",
                     high: -RED,
                     low: Number.NEGATIVE_INFINITY,
                     name: "Red Low"
                 },
                 yh: {
-                    cssClass: "s-limit-upr-yellow",
+                    cssClass: "s-limit-upr s-limit-yellow",
                     low: YELLOW,
                     high: RED,
                     name: "Yellow High"
                 },
                 yl: {
-                    cssClass: "s-limit-lwr-yellow",
+                    cssClass: "s-limit-lwr s-limit-yellow",
                     low: -RED,
                     high: -YELLOW,
                     name: "Yellow Low"

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

@@ -106,3 +106,8 @@ $dirImgs: $dirCommonRes + 'images/';
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
+
+/************************** LIMITS */
+$glyphLimit: '\e603';
+$glyphLimitUpr: '\0000eb';
+$glyphLimitLwr: '\0000ee';

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

@@ -1,14 +1,15 @@
-@mixin limit($bg, $ic, $glyph) {
-	background: $bg !important;
-	//color: $fg !important;
-	&:before {
-		//@include pulse(1000ms);
-		color: $ic;
-		content: $glyph;
-	}
+@mixin limitGlyph($iconColor, $glyph: $glyphLimit) {
+    &:before {
+        color: $iconColor;
+        content: $glyph;
+        font-family: symbolsfont;
+        display: inline;
+        margin-right: $interiorMarginSm;
+    }
+
 }
 
-[class*="s-limit"] {
+/*[class*="s-limit"] {
 	//white-space: nowrap;
 	&:before {
 		display: inline-block;
@@ -18,9 +19,31 @@
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
+}*/
+
+.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:$glyphLimitUpr; }
+    &.s-limit-lwr td:first-child:before { content:$glyphLimitLwr; }
 }
 
-.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
-.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
-.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
-.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
+// Handle limit when applied directly to a non-tr element
+:not(tr)[class*="s-limit"] {
+    &.s-limit-red {
+        @include limitGlyph($colorLimitRedIc);
+    }
+    &.s-limit-yellow {
+        @include limitGlyph($colorLimitYellowIc);
+    }
+    &.s-limit-upr:before { content:$glyphLimitUpr; }
+    &.s-limit-lwr:before { content:$glyphLimitLwr; }
+}