mirror of
https://github.com/nasa/openmct.git
synced 2024-12-25 15:51:04 +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/lists";
|
||||||
@import "controls/menus";
|
@import "controls/menus";
|
||||||
@import "controls/messages";
|
@import "controls/messages";
|
||||||
|
@import "controls/time-of-interest";
|
||||||
@import "mobile/controls/menus";
|
@import "mobile/controls/menus";
|
||||||
|
|
||||||
/********************************* FORMS */
|
/********************************* FORMS */
|
||||||
|
|||||||
@ -392,6 +392,14 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin reverseEllipsis() {
|
||||||
|
direction: rtl;
|
||||||
|
unicode-bidi:bidi-override;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin scrollH($showBar: auto) {
|
@mixin scrollH($showBar: auto) {
|
||||||
overflow-x: $showBar;
|
overflow-x: $showBar;
|
||||||
overflow-y: hidden;
|
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
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* 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 {
|
.abs.holder-plot {
|
||||||
// Fend off the scrollbar when less than min-height;
|
// Fend off the scrollbar when less than min-height;
|
||||||
right: $interiorMargin;
|
right: $interiorMargin;
|
||||||
@ -87,72 +79,6 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
overflow: hidden;
|
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 {
|
.gl-plot-axis-area {
|
||||||
|
|||||||
@ -277,9 +277,7 @@
|
|||||||
$cPinnedHov: $toiColorBgPinned;
|
$cPinnedHov: $toiColorBgPinned;
|
||||||
$linesVOffset: 2px;
|
$linesVOffset: 2px;
|
||||||
@include transform(translateX(-50%));
|
@include transform(translateX(-50%));
|
||||||
@include trans-prop-nice($props: opacity, $dur: 200ms);
|
|
||||||
color: $c;
|
color: $c;
|
||||||
opacity: 0; // Hide by default, only show when user hovers over .l-data-visualization
|
|
||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
width: $timeCondTOIIconD;
|
width: $timeCondTOIIconD;
|
||||||
|
|||||||
@ -77,8 +77,16 @@
|
|||||||
|
|
||||||
<!-- new wrapper inserted here -->
|
<!-- new wrapper inserted here -->
|
||||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||||
|
|
||||||
<!-- TOI element -->
|
<!-- 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"
|
<div class="l-toi-holder"
|
||||||
style="left: 20%">
|
style="left: 20%">
|
||||||
<!-- Need text val at bottom, plus vertical line -->
|
<!-- Need text val at bottom, plus vertical line -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user