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

[Frontend] Limits added to fixed position view

Browse Source 
WTD-1172
This commit is contained in:
Charles Hacskaylo 2015-05-06 11:20:09 -07:00
parent 4b774f7b12
commit c8d06cb32a
7 changed files with 92 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/general/res/css/plots.css
View File

@ -5,7 +5,7 @@
position: relative;
width: 100%;
height: 100%;
/****************************** Limits */ }
/****************************** Limits and Out-of-Bounds data */ }
/* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area {
position: absolute; }
@ -208,9 +208,9 @@
/* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
line-height: 1.5em;
padding: 0px 5px; }

100
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -438,13 +438,14 @@ span {
.t-fixed-position .l-fixed-position-item .l-fixed-position-text {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
border: 1px solid transparent;
font-size: 0.8rem; }
/* line 55, ../sass/_fixed-position.scss */
font-size: 0.8rem;
line-height: 100%; }
/* line 56, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
padding: 3px; }
/* line 60, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden;
overflow: false;
position: absolute;
top: 3px;
right: 3px;
@ -456,27 +457,33 @@ span {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%; }
/* line 64, ../sass/_fixed-position.scss */
/* line 65, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
right: auto;
left: 3px; }
/* line 68, ../sass/_fixed-position.scss */
/* line 69, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
right: 3px;
left: auto;
text-align: right; }
/* line 73, ../sass/_fixed-position.scss */
/* line 74, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
left: 3px;
width: auto; }
/* line 84, ../sass/_fixed-position.scss */
/* line 79, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value .l-value-bg {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 0 3px; }
/* line 89, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item-handle {
background: rgba(0, 153, 204, 0.5);
cursor: crosshair;
border: 1px solid #0099cc;
position: absolute; }
/* line 98, ../sass/_fixed-position.scss */
/* line 102, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
@ -484,7 +491,7 @@ span {
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
background-repeat: repeat-x; }
/* line 102, ../sass/_fixed-position.scss */
/* line 106, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
@ -492,7 +499,7 @@ span {
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
background-repeat: repeat-y; }
/* line 110, ../sass/_fixed-position.scss */
/* line 114, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
border: 1px dotted rgba(0, 153, 204, 0.5); }
@ -701,41 +708,44 @@ span {
line-height: 1.695rem;
position: absolute; }
/* line 4, ../sass/_limits.scss */
.s-limit:before {
display: inline-block;
font-family: symbolsfont;
line-height: 1.1em;
margin-right: 3px;
vertical-align: bottom; }
/* line 12, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-yellow {
background: rgba(204, 153, 0, 0.7); }
/* line 1, ../sass/_limits.scss */
.s-limit {
white-space: nowrap; }
/* line 5, ../sass/_limits.scss */
.s-limit:before {
display: inline-block;
font-family: symbolsfont;
font-size: 0.8em;
margin-right: 3px;
vertical-align: middle; }
/* line 14, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-yellow:before {
color: #ffd966;
content: "\0000ed"; }
/* line 19, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-red {
background: rgba(204, 0, 0, 0.7); }
.s-limit.s-limit-upr.s-limit-yellow {
background: rgba(204, 153, 0, 0.5); }
/* line 16, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-yellow:before {
color: #ffd966;
content: "\0000ed"; }
/* line 21, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-red:before {
color: #ff6666;
content: "\0000eb"; }
/* line 28, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-yellow {
background: rgba(204, 153, 0, 0.7); }
.s-limit.s-limit-upr.s-limit-red {
background: rgba(204, 0, 0, 0.5); }
/* line 23, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-red:before {
color: #ff6666;
content: "\0000eb"; }
/* line 30, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-yellow:before {
color: #ffd966;
content: "\0000ec"; }
/* line 35, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-red {
background: rgba(204, 0, 0, 0.7); }
.s-limit.s-limit-lwr.s-limit-yellow {
background: rgba(204, 153, 0, 0.5); }
/* line 32, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-yellow:before {
color: #ffd966;
content: "\0000ec"; }
/* line 37, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-red:before {
color: #ff6666;
content: "\0000ee"; }
.s-limit.s-limit-lwr.s-limit-red {
background: rgba(204, 0, 0, 0.5); }
/* line 39, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-red:before {
color: #ff6666;
content: "\0000ee"; }
/* line 1, ../sass/lists/_tabular.scss */
.w1 {
@ -2270,7 +2280,7 @@ input[type="text"] {
position: relative;
width: 100%;
height: 100%;
/****************************** Limits */ }
/****************************** Limits and Out-of-Bounds data */ }
/* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area {
position: absolute; }
@ -2473,9 +2483,9 @@ input[type="text"] {
/* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
line-height: 1.5em;
padding: 0px 5px; }

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

@ -5,6 +5,7 @@ $interiorMarginLg: $interiorMargin * 2;
$interiorMarginSm: 3px;
$basicCr: 3px;
$controlCr: $basicCr;
$smallCr: 2px;
$badgeW: 35px;
// Colors and shading

12
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@ -52,21 +52,22 @@
border:1px solid transparent;
font-size: 0.8rem;
$p: $interiorMarginSm;
line-height: 100%;
&.l-static-text {
// overflow: auto;
padding: $p;
}
&.l-telemetry {
.l-elem {
@include absPosDefault($p);
@include absPosDefault($p, false);
@include box-sizing(border-box);
width: 50%;
//padding: 0 $interiorMarginSm;
&.l-title {
right: auto;
left: $p;
}
&.l-value {
// @include test(blue);
//@include test(green);
right: $p;
left: auto;
text-align: right;
@ -75,6 +76,10 @@
left: $p;
width: auto;
}
.l-value-bg {
@include border-radius($smallCr);
padding: 0 $interiorMarginSm;
}
}
}
}
@ -83,7 +88,6 @@
.l-fixed-position-item-handle {
$brd: 1px solid $colorKey;
// @include border-radius($controlCr);
background: rgba($colorKey, 0.5);
cursor: crosshair;
border: $brd;

8
platform/commonUI/general/res/sass/_limits.scss
View File

@ -1,12 +1,14 @@
.s-limit {
$a: 0.7;
$a: 0.5;
$l: 30%;
white-space: nowrap;
&:before {
display: inline-block;
font-family: symbolsfont;
line-height: 1.1em;
font-size: 0.8em;
//line-height: 1.1em;
margin-right: $interiorMarginSm;
vertical-align: bottom;
vertical-align: middle;
}
&.s-limit-upr {
&.s-limit-yellow {

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

@ -131,7 +131,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
overflow-y: auto;
}
/****************************** Limits */
/****************************** Limits and Out-of-Bounds data */
.l-limit,
.l-oob-data {
@ -221,7 +221,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-legend {
.plot-legend-item {
//@include test();
@include border-radius($controlCr);
@include border-radius($smallCr);
color: #fff;
line-height: 1.5em;
padding: 0px 5px;

29
platform/features/layout/res/templates/elements/telemetry.html
View File

@ -2,16 +2,21 @@
class="l-fixed-position-text l-telemetry"
ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }"
>
<div
class="l-elem l-title"
ng-show="ngModel.element.titled"
>
{{ngModel.name}}
</div>
<div
class="l-elem l-value"
ng-class="{ 'telem-only': !ngModel.element.titled }"
>
{{ngModel.value}}
</div>
<div
class="l-elem l-title"
ng-show="ngModel.element.titled"
>
{{ngModel.name}}
</div>
<div
class="l-elem l-value"
ng-class="{ 'telem-only': !ngModel.element.titled }"
>
<span
class="l-value-bg"
ng-class="{ 's-limit': ngModel.value < 0, 's-limit-lwr': 1, 's-limit-red' : 1 }"
>
{{ngModel.value}}
</span>
</div>
</div>