ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Significant enhancements to limits (#2352)

Browse Source 
- Icons added for red and yellow limits without upr/lwr classes;
- When is-limit--upr and is-limit--lwr present, those icons trump the
red/yellow icons;
- Styles for table tr's, and everything else;
- Unit tested in telem tables, LAD tables and plot legend;
This commit is contained in:
Charles Hacskaylo 2019-04-05 17:22:49 -07:00 committed by Deep Tailor
parent c6053e234a
commit 3cf78f509d
1 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/styles-new/_status.scss
View File

@ -20,19 +20,38 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*************************************************** MIXINS */
@mixin statusStyle($bg, $fg, $ic) {
background: $bg !important;
background-color: $bg !important;
color: $fg !important;
@mixin statusStyle($bg, $fg, $imp: false) {
$impStr: null;
@if $imp {
$impStr: !important;
}
background: $bg $impStr;
background-color: $bg $impStr;
color: $fg $impStr;
}
@mixin statusIcon($ic, $glyph: null, $imp: false) {
$impStr: null;
@if $imp {
$impStr: !important;
}
&:before {
color: $ic;
display: inline-block;
font-family: symbolsfont;
font-size: 0.7em;
font-size: 0.8em;
margin-right: $interiorMargin;
@if $glyph != null {
content: $glyph $impStr;
}
}
}
@mixin statusStyleCombined($bg, $fg, $ic) {
@include statusStyle($bg, $fg, $imp: true);
@include statusIcon($ic);
}
@mixin elementStatusColors($c) {
// Sets bg and icon colors for elements
background: rgba($c, 0.5) !important;
@ -47,16 +66,45 @@
}
}
.is-limit--yellow {
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, $colorLimitYellowIc);
&.is-limit--upr:before { content: $glyph-icon-arrow-up; }
&.is-limit--lwr:before { content: $glyph-icon-arrow-down; }
@mixin andUprLwr {
&.is-limit--upr:before { content: $glyph-icon-arrow-up !important; }
&.is-limit--lwr:before { content: $glyph-icon-arrow-down !important; }
}
.is-limit--red {
@include statusStyle($colorLimitRedBg, $colorLimitRedFg, $colorLimitRedIc);
&.is-limit--upr:before { content: $glyph-icon-arrow-double-up; }
&.is-limit--lwr:before { content: $glyph-icon-arrow-double-down; }
/*************************************************** STYLES */
*:not(tr) {
&.is-limit--yellow {
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, true);
@include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
@include andUprLwr();
}
&.is-limit--red {
@include statusStyle($colorLimitRedBg, $colorLimitRedFg, true);
@include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
@include andUprLwr();
}
}
tr {
&.is-limit--yellow {
@include statusStyle($colorLimitYellowBg, $colorLimitYellowFg);
td:first-child {
@include statusIcon($colorLimitYellowIc, $glyph-icon-alert-rect);
}
td { color: $colorLimitYellowFg; }
}
&.is-limit--red {
@include statusStyle($colorLimitRedBg, $colorLimitRedFg);
td:first-child {
@include statusIcon($colorLimitRedIc, $glyph-icon-alert-triangle);
}
td { color: $colorLimitRedFg; }
}
&.is-limit--upr { td:first-child:before { content: $glyph-icon-arrow-up !important; } }
&.is-limit--lwr { td:first-child:before { content: $glyph-icon-arrow-down !important; } }
}
/*************************************************** STATUS */