ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Platform-specific mods to limits

Browse Source 
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)
This commit is contained in:
Charles Hacskaylo 2015-10-27 11:40:35 -07:00
parent 74f289cb34
commit a8856c0612
3 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/generator/src/SinewaveLimitCapability.js
View File

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

5
platform/commonUI/general/res/sass/_constants.scss
View File

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

49
platform/commonUI/general/res/sass/_limits.scss
View File

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