From c8d06cb32acf1a78420e50b24e97d7883a7f31ea Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 6 May 2015 11:20:09 -0700 Subject: [PATCH] [Frontend] Limits added to fixed position view WTD-1172 --- platform/commonUI/general/res/css/plots.css | 8 +- .../general/res/css/theme-espresso.css | 100 ++++++++++-------- .../commonUI/general/res/sass/_constants.scss | 1 + .../general/res/sass/_fixed-position.scss | 12 ++- .../commonUI/general/res/sass/_limits.scss | 8 +- .../general/res/sass/plots/_plots-main.scss | 4 +- .../res/templates/elements/telemetry.html | 29 ++--- 7 files changed, 92 insertions(+), 70 deletions(-) diff --git a/platform/commonUI/general/res/css/plots.css b/platform/commonUI/general/res/css/plots.css index a14c9b7f97..9b19f954f8 100644 --- a/platform/commonUI/general/res/css/plots.css +++ b/platform/commonUI/general/res/css/plots.css @@ -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; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 68d57571fd..c80f45f8f7 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -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; } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 05268ecfb8..b3c9a10e73 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -5,6 +5,7 @@ $interiorMarginLg: $interiorMargin * 2; $interiorMarginSm: 3px; $basicCr: 3px; $controlCr: $basicCr; +$smallCr: 2px; $badgeW: 35px; // Colors and shading diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index 577850ed61..1ebd9d09cd 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -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; diff --git a/platform/commonUI/general/res/sass/_limits.scss b/platform/commonUI/general/res/sass/_limits.scss index 976833c31a..eb3f9e7b0b 100644 --- a/platform/commonUI/general/res/sass/_limits.scss +++ b/platform/commonUI/general/res/sass/_limits.scss @@ -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 { diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 42a42d999f..2d36da73fa 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -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; diff --git a/platform/features/layout/res/templates/elements/telemetry.html b/platform/features/layout/res/templates/elements/telemetry.html index c96dafebe2..8d16dc47a7 100644 --- a/platform/features/layout/res/templates/elements/telemetry.html +++ b/platform/features/layout/res/templates/elements/telemetry.html @@ -2,16 +2,21 @@ class="l-fixed-position-text l-telemetry" ng-style="{ background: ngModel.fill(), 'border-color': ngModel.stroke(), color: ngModel.color() }" > -
- {{ngModel.name}} -
-
- {{ngModel.value}} -
+
+ {{ngModel.name}} +
+
+ + {{ngModel.value}} + +
\ No newline at end of file