ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 06:03:08 +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, YELLOW = 0.5,
LIMITS = { LIMITS = {
rh: { rh: {
cssClass: "s-limit-upr-red", cssClass: "s-limit-upr s-limit-red",
low: RED, low: RED,
high: Number.POSITIVE_INFINITY, high: Number.POSITIVE_INFINITY,
name: "Red High" name: "Red High"
}, },
rl: { rl: {
cssClass: "s-limit-lwr-red", cssClass: "s-limit-lwr s-limit-red",
high: -RED, high: -RED,
low: Number.NEGATIVE_INFINITY, low: Number.NEGATIVE_INFINITY,
name: "Red Low" name: "Red Low"
}, },
yh: { yh: {
cssClass: "s-limit-upr-yellow", cssClass: "s-limit-upr s-limit-yellow",
low: YELLOW, low: YELLOW,
high: RED, high: RED,
name: "Yellow High" name: "Yellow High"
}, },
yl: { yl: {
cssClass: "s-limit-lwr-yellow", cssClass: "s-limit-lwr s-limit-yellow",
low: -RED, low: -RED,
high: -YELLOW, high: -YELLOW,
name: "Yellow Low" name: "Yellow Low"

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

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