alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Plot limits and out-of-bounds indicators

Browse Source 
WTD-1172
Markup and CSS for plots;
Example ng-class added to plot.html for legend items;
Markup added to plot.html for OOB indicators;
This commit is contained in:
Charles Hacskaylo
2015-05-06 10:21:29 -07:00
parent d75c873831
commit 39c8f0ab00
12 changed files with 869 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,8 @@ $colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
$colorGridLines: rgba(#fff, 0.05);
$colorLimitYellow: #cc9900;
$colorLimitRed: #cc0000;
// Ratios
$ltGamma: 20%;

2
platform/commonUI/general/res/sass/_icons.scss
View File

@@ -55,7 +55,7 @@
}
.object-header .type-icon {
color: $colorAlt1;
color: $colorKey;
margin-right: $interiorMargin;
}

43
platform/commonUI/general/res/sass/_limits.scss Normal file
View File

@@ -0,0 +1,43 @@
.s-limit {
$a: 0.7;
$l: 30%;
&:before {
display: inline-block;
font-family: symbolsfont;
line-height: 1.1em;
margin-right: $interiorMarginSm;
vertical-align: bottom;
}
&.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";
}
}
}
}

2
platform/commonUI/general/res/sass/_main.scss
View File

@@ -1,6 +1,7 @@
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import "compass/css3/animation";
@import "compass/css3/user-interface";
@import "compass/utilities";
@@ -14,6 +15,7 @@
@import "text";
@import "badges";
@import "icons";
@import "limits";
@import "lists/tabular";
@import "controls/buttons";
@import "controls/color-palette";

6
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -46,7 +46,7 @@
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 0
transparent 100%
));
background-repeat: repeat;
background-size: $d $d;
@@ -161,6 +161,10 @@
@include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
}
@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
}
@mixin txtShdwSubtle($sVal: 0.1) {
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
}

133
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@@ -1,5 +1,5 @@
$yBarW: 60px;
$yLabelW: auto; //10px;
$yLabelW: auto;
$xBarH: 32px;
$legendH: 24px;
$colorHash: rgba(white, 0.3);
@@ -38,7 +38,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-coords {
@include box-sizing(border-box);
@include border-radius($controlCr);
background: rgba($colorAlt1, 0.5);
background: black; //rgba($colorKey, 0.5);
color: lighten($colorBodyFg, 30%);
padding: 2px 5px;
position: absolute;
@@ -80,7 +80,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
}
&.gl-plot-y-label,
&.l-plot-y-label {
&.l-plot-y-label {
$x: -50%;
$r: -90deg;
@include transform-origin(50%, 0);
@@ -129,55 +129,69 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
height: $legendH;
overflow-x: hidden;
overflow-y: auto;
// .plot-legend-item {
// display: inline-block;
// margin-right: $interiorMarginLg;
// span {
// vertical-align: middle;
// }
// .plot-color-swatch {
// @include border-radius(2px);
// display: inline-block;
// height: $swatchD;
// width: $swatchD;
// margin-right: $interiorMarginSm;
// }
// }
}
.l-limit {
// @include linearGlow(0,#66cc66);
// @include test();
$cLimit0: #cc9900;
$cLimit1: #cc0000;
$h: 30px;
position: absolute;
top: auto; left: 0; right: 0;
height: $h; width: auto;
&.s-limit-upr {
// border-top: 1px solid;
&.s-limit-0 {
// border-color: $cLimit0;
@include linearGlow(0deg,$cLimit0);
}
&.s-limit-1 {
// border-color: $cLimit1;
@include linearGlow(0deg,$cLimit1);
}
}
&.s-limit-lwr {
// border-bottom: 1px solid;
&.s-limit-0 {
// border-color: $cLimit0;
@include linearGlow(180deg,$cLimit0);
}
&.s-limit-1 {
// border-color: $cLimit1;
@include linearGlow(180deg,$cLimit1);
}
}
}
/****************************** Limits */
//.l-limit,
.l-oob-data {
position: absolute;
left: 0;
right: 0;
width: auto;
}
/*.l-limit {
// Limits in plot display area
$h: 10px;
$a0: 0.1;
$a1: 0.2;
//top: auto;
height: auto;
z-index: 0;
&.s-limit-upr {
//$dir: 0deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
&.s-limit-lwr {
//$dir: 180deg;
&.s-limit-yellow {
@include limitBg($colorLimitYellow);
}
&.s-limit-red {
@include limitBg($colorLimitRed);
}
}
}*/
.l-oob-data {
$c: #7748d6;
$a: 0.5;
$h: 10px;
@include animation(pulse 2s infinite);
@include absPosDefault();
pointer-events: none;
height: $h;
z-index: 1;
&.l-oob-data-up {
top: 0;
bottom: auto;
@include linearGlow(0deg, $c, $a);
}
&.l-oob-data-dwn {
bottom: 0;
top: auto;
@include linearGlow(180deg, $c, $a);
}
}
}
.gl-plot-legend,
.legend {
.plot-legend-item,
@@ -193,8 +207,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
display: inline-block;
height: $swatchD;
width: $swatchD;
margin-right: $interiorMarginSm;
//margin-right: $interiorMarginSm;
}
.title-label {
@@ -202,6 +215,21 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
}
}
.gl-plot-legend {
.plot-legend-item {
//@include test();
@include border-radius($controlCr);
color: #fff;
line-height: 1.5em;
padding: 0px 5px;
.plot-color-swatch {
border: 1px solid $colorBodyBg;
height: $swatchD + 1;
width: $swatchD + 1;
}
}
}
.tick {
position: absolute;
border: 0 $colorHash solid;
@@ -211,7 +239,6 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
}
}
.gl-plot-tick,
.tick-label {
// @include test(red);