ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-21 08:39:59 +00:00
Code Issues Actions 4 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
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; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/****************************** Limits */ } /****************************** Limits and Out-of-Bounds data */ }
/* line 17, ../sass/plots/_plots-main.scss */ /* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area { .gl-plot .gl-plot-axis-area {
position: absolute; } position: absolute; }
@ -208,9 +208,9 @@
/* line 222, ../sass/plots/_plots-main.scss */ /* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item { .gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0px 5px; } padding: 0px 5px; }

68
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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 0.8rem; } font-size: 0.8rem;
/* line 55, ../sass/_fixed-position.scss */ line-height: 100%; }
/* line 56, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
padding: 3px; } padding: 3px; }
/* line 60, ../sass/_fixed-position.scss */ /* line 60, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden; overflow: false;
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
@ -456,27 +457,33 @@ span {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 50%; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
right: auto; right: auto;
left: 3px; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
right: 3px; right: 3px;
left: auto; left: auto;
text-align: right; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
left: 3px; left: 3px;
width: auto; } 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 { .t-fixed-position .l-fixed-position-item-handle {
background: rgba(0, 153, 204, 0.5); background: rgba(0, 153, 204, 0.5);
cursor: crosshair; cursor: crosshair;
border: 1px solid #0099cc; border: 1px solid #0099cc;
position: absolute; } 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 { .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-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%; 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: -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-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; } 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 { .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-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%; 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: -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-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; } 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 { .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
border: 1px dotted rgba(0, 153, 204, 0.5); } border: 1px dotted rgba(0, 153, 204, 0.5); }
@ -701,38 +708,41 @@ span {
line-height: 1.695rem; line-height: 1.695rem;
position: absolute; } position: absolute; }
/* line 4, ../sass/_limits.scss */ /* line 1, ../sass/_limits.scss */
.s-limit {
white-space: nowrap; }
/* line 5, ../sass/_limits.scss */
.s-limit:before { .s-limit:before {
display: inline-block; display: inline-block;
font-family: symbolsfont; font-family: symbolsfont;
line-height: 1.1em; font-size: 0.8em;
margin-right: 3px; margin-right: 3px;
vertical-align: bottom; } vertical-align: middle; }
/* line 12, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-yellow {
background: rgba(204, 153, 0, 0.7); }
/* line 14, ../sass/_limits.scss */ /* line 14, ../sass/_limits.scss */
.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 { .s-limit.s-limit-upr.s-limit-yellow:before {
color: #ffd966; color: #ffd966;
content: "\0000ed"; } content: "\0000ed"; }
/* line 19, ../sass/_limits.scss */
.s-limit.s-limit-upr.s-limit-red {
background: rgba(204, 0, 0, 0.7); }
/* line 21, ../sass/_limits.scss */ /* line 21, ../sass/_limits.scss */
.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 { .s-limit.s-limit-upr.s-limit-red:before {
color: #ff6666; color: #ff6666;
content: "\0000eb"; } content: "\0000eb"; }
/* line 28, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-yellow {
background: rgba(204, 153, 0, 0.7); }
/* line 30, ../sass/_limits.scss */ /* line 30, ../sass/_limits.scss */
.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 { .s-limit.s-limit-lwr.s-limit-yellow:before {
color: #ffd966; color: #ffd966;
content: "\0000ec"; } content: "\0000ec"; }
/* line 35, ../sass/_limits.scss */
.s-limit.s-limit-lwr.s-limit-red {
background: rgba(204, 0, 0, 0.7); }
/* line 37, ../sass/_limits.scss */ /* line 37, ../sass/_limits.scss */
.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 { .s-limit.s-limit-lwr.s-limit-red:before {
color: #ff6666; color: #ff6666;
content: "\0000ee"; } content: "\0000ee"; }
@ -2270,7 +2280,7 @@ input[type="text"] {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
/****************************** Limits */ } /****************************** Limits and Out-of-Bounds data */ }
/* line 17, ../sass/plots/_plots-main.scss */ /* line 17, ../sass/plots/_plots-main.scss */
.gl-plot .gl-plot-axis-area { .gl-plot .gl-plot-axis-area {
position: absolute; } position: absolute; }
@ -2473,9 +2483,9 @@ input[type="text"] {
/* line 222, ../sass/plots/_plots-main.scss */ /* line 222, ../sass/plots/_plots-main.scss */
.gl-plot-legend .plot-legend-item { .gl-plot-legend .plot-legend-item {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0px 5px; } padding: 0px 5px; }

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

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

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

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

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

@ -1,12 +1,14 @@
.s-limit { .s-limit {
$a: 0.7; $a: 0.5;
$l: 30%; $l: 30%;
white-space: nowrap;
&:before { &:before {
display: inline-block; display: inline-block;
font-family: symbolsfont; font-family: symbolsfont;
line-height: 1.1em; font-size: 0.8em;
//line-height: 1.1em;
margin-right: $interiorMarginSm; margin-right: $interiorMarginSm;
vertical-align: bottom; vertical-align: middle;
} }
&.s-limit-upr { &.s-limit-upr {
&.s-limit-yellow { &.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; overflow-y: auto;
} }
/****************************** Limits */ /****************************** Limits and Out-of-Bounds data */
.l-limit, .l-limit,
.l-oob-data { .l-oob-data {
@ -221,7 +221,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
.gl-plot-legend { .gl-plot-legend {
.plot-legend-item { .plot-legend-item {
//@include test(); //@include test();
@include border-radius($controlCr); @include border-radius($smallCr);
color: #fff; color: #fff;
line-height: 1.5em; line-height: 1.5em;
padding: 0px 5px; padding: 0px 5px;

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

@ -11,7 +11,12 @@
<div <div
class="l-elem l-value" class="l-elem l-value"
ng-class="{ 'telem-only': !ngModel.element.titled }" 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}} {{ngModel.value}}
</span>
</div> </div>
</div> </div>