mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 23:36:41 +00:00
[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;
This commit is contained in:
Charles Hacskaylo
parent
1a93ba2c3d
commit
1c3bd69b66
@ -42,6 +42,7 @@
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/messages";
|
||||
@import "controls/time-of-interest";
|
||||
@import "mobile/controls/menus";
|
||||
|
||||
/********************************* FORMS */
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -77,8 +77,16 @@
|
||||
|
||||
<!-- new wrapper inserted here -->
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
|
||||
<!-- TOI element -->
|
||||
<div class="l-toi-holder pinned"
|
||||
ng-class="{ active: true }"
|
||||
style="left: 70%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
<div class="l-toi-val l-flex-row">
|
||||
<span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
|
||||
<a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-toi-holder"
|
||||
style="left: 20%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user