mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 16:36:13 +00:00
[Frontend] Tweaks to markup and CSS
WTD-1172 scrolling.html markup and CSS hooks; added comments to change points; CSS tweaking;
This commit is contained in:
Charles Hacskaylo
parent
c8d06cb32a
commit
f114f742c4
@ -25,8 +25,11 @@ $colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorLimitYellow: #cc9900;
|
||||
$colorLimitRed: #cc0000;
|
||||
$colorLimitYellow: #9d7500;
|
||||
$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%);
|
||||
|
||||
@ -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"); }
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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"
|
||||
ng-class="{ 's-limit': ngModel.value < 0, 's-limit-lwr': 1, 's-limit-red' : 1 }"
|
||||
class="l-value-bg s-value-bg"
|
||||
ng-class="{ 's-limit-lwr': ngModel.value < 0, 's-limit-red' : 1 }"
|
||||
>
|
||||
{{ngModel.value}}
|
||||
</span>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -13,8 +13,18 @@
|
||||
</div>
|
||||
|
||||
<div class="tr" ng-repeat="row in rows">
|
||||
<div class="td" ng-repeat="cell in row">
|
||||
{{cell}}
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user