From 1c3bd69b6628fad915e0df6feef280a9d8c90364 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 22 Sep 2016 16:06:16 -0700 Subject: [PATCH] [Frontend] Styling for TOI element, some refactoring Fixes #933 Fixes #1193 Moves some TOI styling into dedicated new scss file; Enhancements to TOI in plots to bring into parity with TOI in TC approach; --- platform/commonUI/general/res/sass/_main.scss | 1 + .../commonUI/general/res/sass/_mixins.scss | 8 ++ .../res/sass/controls/_time-of-interest.scss | 119 ++++++++++++++++++ .../general/res/sass/plots/_plots-main.scss | 74 ----------- .../res/sass/_time-conductor-base.scss | 2 - .../features/plot/res/templates/plot.html | 10 +- 6 files changed, 137 insertions(+), 77 deletions(-) create mode 100644 platform/commonUI/general/res/sass/controls/_time-of-interest.scss diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 3ecb2304ab..cd511445ca 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -42,6 +42,7 @@ @import "controls/lists"; @import "controls/menus"; @import "controls/messages"; +@import "controls/time-of-interest"; @import "mobile/controls/menus"; /********************************* FORMS */ diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 91720348b9..adf4540c94 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -392,6 +392,14 @@ white-space: nowrap; } +@mixin reverseEllipsis() { + direction: rtl; + unicode-bidi:bidi-override; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + @mixin scrollH($showBar: auto) { overflow-x: $showBar; overflow-y: hidden; diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss new file mode 100644 index 0000000000..27d47e6213 --- /dev/null +++ b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss @@ -0,0 +1,119 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2016, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +.l-toi-holder { + @include trans-prop-nice($props: opacity, $dur: 200ms); + &:not(.pinned) { + opacity: 0; // Hide by default, only show when user hovers over container that implements this element + } + .l-toi { + + } + .l-toi-val { + color: $toiColorFg; + + } +} + +// TOI in tables +.mct-table { + tr.l-toi-holder { + td.l-toi { + background-color: $toiColorBg; + column-span: 999; + font-size: 0; + } + } +} + +// TOI in plots +.gl-plot { + .gl-plot-wrapper-display-area-and-x-axis { + &:hover { + .l-toi-holder { + opacity: 1; + } + } + .l-toi-holder { + $toiColorBgPinned: rgba($toiColorBgPinned, 0.4); + pointer-events: none; + position: absolute; + top: 0; + bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned + min-width: 50px; + max-width: 150px; + width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line + &:before { + // Vertical line + border-left: 1px dashed $toiColorBg; + content: ''; + display: block; + left: 50%; + position: absolute; + top: 0; + bottom: 0; + width: 1px; + } + .l-toi-val { + background-color: $toiColorBg; + box-sizing: border-box; + padding: $interiorMarginSm $interiorMarginSm; + position: absolute; + text-align: center; + width: 100%; + bottom: -2px; + border-radius: $controlCr; + .val { + @include reverseEllipsis(); + } + .t-unpin-button { + margin-left: $interiorMarginSm; + pointer-events: auto; + } + } + + &.pinned { + &:before { + border-left-color: $toiColorBgPinned; + border-left-style: solid; + } + .l-toi-val { + background-color: $toiColorBgPinned; + border-radius: 0; + border-top-left-radius: $controlCr; + border-top-right-radius: $controlCr; + bottom: 0px; + } + } + + &:not(.pinned) { + .l-toi-val { + @include transform(translateY(100%)); // Position of element when TOI is visible but not pinned + } + .t-unpin-button { + display: none; + } + } + z-index: 3; + } + } +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index c1455926f7..bd3e2b22c7 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -19,14 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@mixin reverseEllipsis() { - direction: rtl; - unicode-bidi:bidi-override; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - .abs.holder-plot { // Fend off the scrollbar when less than min-height; right: $interiorMargin; @@ -87,72 +79,6 @@ width: auto; overflow: hidden; } - - .l-toi-holder { - //@include test(green); - $cBg: $toiColorBg; - $cBgPinnedOpacity: 0.4; - $cBgPinned: rgba($toiColorBgPinned, 0.4); - pointer-events: none; - position: absolute; - top: 0; - bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned - min-width: 50px; - max-width: 150px; - width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line - &:before { - // Vertical line - border-left: 1px dashed $cBg; - content:''; - display: block; - left: 50%; - position: absolute; - top: 0; bottom: 0; - width: 1px; - } - .l-toi-val { - background-color: $cBg; - color: $toiColorFg; - box-sizing: border-box; - padding: $interiorMarginSm $interiorMarginSm; - position: absolute; - text-align: center; - width: 100%; - bottom: -2px; - border-radius: $controlCr; - .val { - @include reverseEllipsis(); - } - .t-unpin-button { - margin-left: $interiorMarginSm; - pointer-events: auto; - } - } - - &.pinned { - &:before { - border-left-color: $cBgPinned; - border-left-style: solid; - } - .l-toi-val { - background-color: $cBgPinned; - border-radius: 0; - border-top-left-radius: $controlCr; - border-top-right-radius: $controlCr; - bottom: 0px; - } - } - - &:not(.pinned) { - .l-toi-val { - @include transform(translateY(100%)); // Position of element when TOI is visible but not pinned - } - .t-unpin-button { - display: none; - } - } - z-index: 3; - } } .gl-plot-axis-area { diff --git a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss index d48b5a4850..7264be249d 100644 --- a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss +++ b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss @@ -277,9 +277,7 @@ $cPinnedHov: $toiColorBgPinned; $linesVOffset: 2px; @include transform(translateX(-50%)); - @include trans-prop-nice($props: opacity, $dur: 200ms); color: $c; - opacity: 0; // Hide by default, only show when user hovers over .l-data-visualization top: 0px; bottom: 0px; width: $timeCondTOIIconD; diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 1c4aa4bd5b..5c522a650d 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -77,8 +77,16 @@
- +
+ +
+ Z000.04:45:00 71-90-6102 + +
+