mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 19:27:07 +00:00
[Frontend] Clean up
WTD-1172 Moved HTML limits markup out of plot.html and into temp-limits/.../examples.html
This commit is contained in:
Charles Hacskaylo
parent
39c8f0ab00
commit
4b774f7b12
@ -5,35 +5,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/****************************** Limits */
|
||||
/*.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);
|
||||
}
|
||||
}
|
||||
}*/ }
|
||||
/****************************** Limits */ }
|
||||
/* line 17, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .gl-plot-axis-area {
|
||||
position: absolute; }
|
||||
@ -147,13 +119,30 @@
|
||||
height: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
/* line 137, ../sass/plots/_plots-main.scss */
|
||||
/* line 136, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit,
|
||||
.gl-plot .l-oob-data {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto; }
|
||||
/* line 173, ../sass/plots/_plots-main.scss */
|
||||
/* line 144, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit {
|
||||
height: auto;
|
||||
z-index: 0; }
|
||||
/* line 158, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-upr.s-limit-yellow {
|
||||
background: rgba(204, 153, 0, 0.2); }
|
||||
/* line 161, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-upr.s-limit-red {
|
||||
background: rgba(204, 0, 0, 0.2); }
|
||||
/* line 167, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-lwr.s-limit-yellow {
|
||||
background: rgba(204, 153, 0, 0.2); }
|
||||
/* line 170, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-lwr.s-limit-red {
|
||||
background: rgba(204, 0, 0, 0.2); }
|
||||
/* line 176, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data {
|
||||
-moz-animation: pulse 2s infinite;
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
@ -169,7 +158,7 @@
|
||||
pointer-events: none;
|
||||
height: 10px;
|
||||
z-index: 1; }
|
||||
/* line 182, ../sass/plots/_plots-main.scss */
|
||||
/* line 185, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data.l-oob-data-up {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
@ -178,7 +167,7 @@
|
||||
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
|
||||
/* line 187, ../sass/plots/_plots-main.scss */
|
||||
/* line 190, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data.l-oob-data-dwn {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
@ -188,20 +177,20 @@
|
||||
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
|
||||
|
||||
/* line 197, ../sass/plots/_plots-main.scss */
|
||||
/* line 200, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item,
|
||||
.gl-plot-legend .legend-item,
|
||||
.legend .plot-legend-item,
|
||||
.legend .legend-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px; }
|
||||
/* line 201, ../sass/plots/_plots-main.scss */
|
||||
/* line 204, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item span,
|
||||
.gl-plot-legend .legend-item span,
|
||||
.legend .plot-legend-item span,
|
||||
.legend .legend-item span {
|
||||
vertical-align: middle; }
|
||||
/* line 204, ../sass/plots/_plots-main.scss */
|
||||
/* line 207, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item .plot-color-swatch,
|
||||
.gl-plot-legend .plot-legend-item .color-swatch,
|
||||
.gl-plot-legend .legend-item .plot-color-swatch,
|
||||
@ -217,7 +206,7 @@
|
||||
height: 8px;
|
||||
width: 8px; }
|
||||
|
||||
/* line 219, ../sass/plots/_plots-main.scss */
|
||||
/* line 222, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
@ -225,22 +214,22 @@
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
padding: 0px 5px; }
|
||||
/* line 225, ../sass/plots/_plots-main.scss */
|
||||
/* line 228, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item .plot-color-swatch {
|
||||
border: 1px solid #333;
|
||||
height: 9px;
|
||||
width: 9px; }
|
||||
|
||||
/* line 233, ../sass/plots/_plots-main.scss */
|
||||
/* line 236, ../sass/plots/_plots-main.scss */
|
||||
.tick {
|
||||
position: absolute;
|
||||
border: 0 rgba(255, 255, 255, 0.3) solid; }
|
||||
/* line 236, ../sass/plots/_plots-main.scss */
|
||||
/* line 239, ../sass/plots/_plots-main.scss */
|
||||
.tick.tick-x {
|
||||
border-right-width: 1px;
|
||||
height: 100%; }
|
||||
|
||||
/* line 242, ../sass/plots/_plots-main.scss */
|
||||
/* line 245, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
font-size: 0.7rem;
|
||||
@ -248,7 +237,7 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
/* line 250, ../sass/plots/_plots-main.scss */
|
||||
/* line 253, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
|
||||
.tick-label.gl-plot-x-tick-label,
|
||||
.tick-label.tick-label-x {
|
||||
@ -259,7 +248,7 @@
|
||||
width: 20%;
|
||||
margin-left: -10%;
|
||||
text-align: center; }
|
||||
/* line 260, ../sass/plots/_plots-main.scss */
|
||||
/* line 263, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
|
||||
.tick-label.gl-plot-y-tick-label,
|
||||
.tick-label.tick-label-y {
|
||||
@ -269,18 +258,18 @@
|
||||
margin-bottom: -0.5em;
|
||||
text-align: right; }
|
||||
|
||||
/* line 272, ../sass/plots/_plots-main.scss */
|
||||
/* line 275, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-x-tick-label {
|
||||
top: 5px; }
|
||||
/* line 275, ../sass/plots/_plots-main.scss */
|
||||
/* line 278, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-y-tick-label {
|
||||
right: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 282, ../sass/plots/_plots-main.scss */
|
||||
/* line 285, ../sass/plots/_plots-main.scss */
|
||||
.tick-label.tick-label-x {
|
||||
top: 0; }
|
||||
/* line 285, ../sass/plots/_plots-main.scss */
|
||||
/* line 288, ../sass/plots/_plots-main.scss */
|
||||
.tick-label.tick-label-y {
|
||||
right: 0;
|
||||
left: 0; }
|
||||
|
||||
@ -2270,35 +2270,7 @@ input[type="text"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/****************************** Limits */
|
||||
/*.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);
|
||||
}
|
||||
}
|
||||
}*/ }
|
||||
/****************************** Limits */ }
|
||||
/* line 17, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .gl-plot-axis-area {
|
||||
position: absolute; }
|
||||
@ -2412,13 +2384,30 @@ input[type="text"] {
|
||||
height: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
/* line 137, ../sass/plots/_plots-main.scss */
|
||||
/* line 136, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit,
|
||||
.gl-plot .l-oob-data {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: auto; }
|
||||
/* line 173, ../sass/plots/_plots-main.scss */
|
||||
/* line 144, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit {
|
||||
height: auto;
|
||||
z-index: 0; }
|
||||
/* line 158, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-upr.s-limit-yellow {
|
||||
background: rgba(204, 153, 0, 0.2); }
|
||||
/* line 161, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-upr.s-limit-red {
|
||||
background: rgba(204, 0, 0, 0.2); }
|
||||
/* line 167, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-lwr.s-limit-yellow {
|
||||
background: rgba(204, 153, 0, 0.2); }
|
||||
/* line 170, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-limit.s-limit-lwr.s-limit-red {
|
||||
background: rgba(204, 0, 0, 0.2); }
|
||||
/* line 176, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data {
|
||||
-moz-animation: pulse 2s infinite;
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
@ -2434,7 +2423,7 @@ input[type="text"] {
|
||||
pointer-events: none;
|
||||
height: 10px;
|
||||
z-index: 1; }
|
||||
/* line 182, ../sass/plots/_plots-main.scss */
|
||||
/* line 185, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data.l-oob-data-up {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
@ -2443,7 +2432,7 @@ input[type="text"] {
|
||||
background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
|
||||
/* line 187, ../sass/plots/_plots-main.scss */
|
||||
/* line 190, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot .l-oob-data.l-oob-data-dwn {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
@ -2453,20 +2442,20 @@ input[type="text"] {
|
||||
background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
|
||||
background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
|
||||
|
||||
/* line 197, ../sass/plots/_plots-main.scss */
|
||||
/* line 200, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item,
|
||||
.gl-plot-legend .legend-item,
|
||||
.legend .plot-legend-item,
|
||||
.legend .legend-item {
|
||||
display: inline-block;
|
||||
margin-right: 10px; }
|
||||
/* line 201, ../sass/plots/_plots-main.scss */
|
||||
/* line 204, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item span,
|
||||
.gl-plot-legend .legend-item span,
|
||||
.legend .plot-legend-item span,
|
||||
.legend .legend-item span {
|
||||
vertical-align: middle; }
|
||||
/* line 204, ../sass/plots/_plots-main.scss */
|
||||
/* line 207, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item .plot-color-swatch,
|
||||
.gl-plot-legend .plot-legend-item .color-swatch,
|
||||
.gl-plot-legend .legend-item .plot-color-swatch,
|
||||
@ -2482,7 +2471,7 @@ input[type="text"] {
|
||||
height: 8px;
|
||||
width: 8px; }
|
||||
|
||||
/* line 219, ../sass/plots/_plots-main.scss */
|
||||
/* line 222, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
@ -2490,22 +2479,22 @@ input[type="text"] {
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
padding: 0px 5px; }
|
||||
/* line 225, ../sass/plots/_plots-main.scss */
|
||||
/* line 228, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-legend .plot-legend-item .plot-color-swatch {
|
||||
border: 1px solid #333;
|
||||
height: 9px;
|
||||
width: 9px; }
|
||||
|
||||
/* line 233, ../sass/plots/_plots-main.scss */
|
||||
/* line 236, ../sass/plots/_plots-main.scss */
|
||||
.tick {
|
||||
position: absolute;
|
||||
border: 0 rgba(255, 255, 255, 0.3) solid; }
|
||||
/* line 236, ../sass/plots/_plots-main.scss */
|
||||
/* line 239, ../sass/plots/_plots-main.scss */
|
||||
.tick.tick-x {
|
||||
border-right-width: 1px;
|
||||
height: 100%; }
|
||||
|
||||
/* line 242, ../sass/plots/_plots-main.scss */
|
||||
/* line 245, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
font-size: 0.7rem;
|
||||
@ -2513,7 +2502,7 @@ input[type="text"] {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; }
|
||||
/* line 250, ../sass/plots/_plots-main.scss */
|
||||
/* line 253, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
|
||||
.tick-label.gl-plot-x-tick-label,
|
||||
.tick-label.tick-label-x {
|
||||
@ -2524,7 +2513,7 @@ input[type="text"] {
|
||||
width: 20%;
|
||||
margin-left: -10%;
|
||||
text-align: center; }
|
||||
/* line 260, ../sass/plots/_plots-main.scss */
|
||||
/* line 263, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
|
||||
.tick-label.gl-plot-y-tick-label,
|
||||
.tick-label.tick-label-y {
|
||||
@ -2534,18 +2523,18 @@ input[type="text"] {
|
||||
margin-bottom: -0.5em;
|
||||
text-align: right; }
|
||||
|
||||
/* line 272, ../sass/plots/_plots-main.scss */
|
||||
/* line 275, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-x-tick-label {
|
||||
top: 5px; }
|
||||
/* line 275, ../sass/plots/_plots-main.scss */
|
||||
/* line 278, ../sass/plots/_plots-main.scss */
|
||||
.gl-plot-tick.gl-plot-y-tick-label {
|
||||
right: 5px;
|
||||
left: 5px; }
|
||||
|
||||
/* line 282, ../sass/plots/_plots-main.scss */
|
||||
/* line 285, ../sass/plots/_plots-main.scss */
|
||||
.tick-label.tick-label-x {
|
||||
top: 0; }
|
||||
/* line 285, ../sass/plots/_plots-main.scss */
|
||||
/* line 288, ../sass/plots/_plots-main.scss */
|
||||
.tick-label.tick-label-y {
|
||||
right: 0;
|
||||
left: 0; }
|
||||
|
||||
@ -133,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
|
||||
/****************************** Limits */
|
||||
|
||||
//.l-limit,
|
||||
.l-limit,
|
||||
.l-oob-data {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -141,8 +141,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*.l-limit {
|
||||
.l-limit {
|
||||
// Limits in plot display area
|
||||
@mixin limitBg($c) {
|
||||
background: rgba($c, 0.2);
|
||||
}
|
||||
|
||||
$h: 10px;
|
||||
$a0: 0.1;
|
||||
@ -168,7 +171,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
@include limitBg($colorLimitRed);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-oob-data {
|
||||
$c: #7748d6;
|
||||
|
||||
@ -53,21 +53,6 @@
|
||||
ng-mouseenter="subplot.isHovering(true); representation.showControls = true;"
|
||||
ng-mouseleave="subplot.isHovering(false)">
|
||||
|
||||
<div ng-init="limits=[
|
||||
{type: 'upr', severity: 'severe', top: 0, bottom: 90},
|
||||
{type: 'upr', severity: 'med', top: 10, bottom: 80},
|
||||
{type: 'lwr', severity: 'med', top: 70, bottom: 20},
|
||||
{type: 'lwr', severity: 'severe', top: 80, bottom: 0}
|
||||
]"></div>
|
||||
|
||||
<!-- Limits display -->
|
||||
<div
|
||||
ng-repeat="limit in limits"
|
||||
ng-show="1"
|
||||
class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
|
||||
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
|
||||
></div>
|
||||
|
||||
<!-- Out-of-bounds data indicators -->
|
||||
<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>
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
<h1>Limits Examples</h1>
|
||||
|
||||
<h2>Plot limits</h2>
|
||||
<div ng-init="limits=[
|
||||
{type: 'upr', severity: 'red', top: 0, bottom: 90},
|
||||
{type: 'upr', severity: 'yellow', top: 10, bottom: 80},
|
||||
{type: 'lwr', severity: 'yellow', top: 70, bottom: 20},
|
||||
{type: 'lwr', severity: 'red', top: 80, bottom: 0}
|
||||
]"></div>
|
||||
<div style="width: 1000px; height: 500px">
|
||||
<div class="gl-plot" style="height: 100%;">
|
||||
<div class="gl-plot-display-area">
|
||||
<div class="t-limit l-limit s-limit-upr s-limit-1" style="bottom: 80%"></div>
|
||||
<div class="t-limit l-limit s-limit-upr s-limit-0" style="bottom: 50%"></div>
|
||||
<div class="t-limit l-limit s-limit-lwr s-limit-0" style="bottom: 30%"></div>
|
||||
<div class="t-limit l-limit s-limit-lwr s-limit-1" style="bottom: 10%"></div>
|
||||
<div
|
||||
ng-repeat="limit in limits"
|
||||
ng-show="1"
|
||||
class="t-limit l-limit s-limit-{{limit.type}} s-limit-{{limit.severity}}"
|
||||
style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user