mirror of
https://github.com/nasa/openmct.git
synced 2025-04-19 08:36:24 +00:00
[Frontend] Styling for TOI element
Fixes #933 Fixes #1193 WIP: Markup and CSS revisions for updated UX approach
This commit is contained in:
Charles Hacskaylo
parent
bb2ae2f8d1
commit
99253a5904
@ -22,15 +22,43 @@
|
||||
|
||||
.l-toi-holder {
|
||||
@include trans-prop-nice($props: opacity, $dur: 200ms);
|
||||
&:not(.active) {
|
||||
opacity: 0; // Hide by default, only show when user hovers over container that implements this element
|
||||
&:not(.pinned) {
|
||||
opacity: 0;
|
||||
}
|
||||
&.pinned {
|
||||
opacity: 1;
|
||||
}
|
||||
.l-toi {
|
||||
|
||||
position: absolute;
|
||||
&.block {
|
||||
$d: $toiW;
|
||||
background-color: $toiColorBg;
|
||||
border-radius: $controlCr;
|
||||
color: $toiColorFg;
|
||||
width: $d;
|
||||
height: $d;
|
||||
line-height: $d;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
background-color: $colorAlert !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer !important;
|
||||
&:before {
|
||||
// Icon, change to close box
|
||||
content: $glyph-icon-x-in-circle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.l-toi-val {
|
||||
color: $toiColorFg;
|
||||
|
||||
&:hover {
|
||||
$c: $toiColorBgHov;
|
||||
cursor: ew-resize;
|
||||
.l-toi.block {
|
||||
background-color: $c !important;
|
||||
color: $toiColorFgHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,10 +90,10 @@ table {
|
||||
}
|
||||
&.l-toi.pinned {
|
||||
td {
|
||||
border-top: 1px solid $toiColorBgPinned;
|
||||
border-top: 1px solid $toiColorBg;
|
||||
&:first-child:before {
|
||||
@include toiIcon();
|
||||
color: $toiColorBgPinned;
|
||||
color: $toiColorFg;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@ -82,20 +110,13 @@ table {
|
||||
// TOI in plots
|
||||
.gl-plot {
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
&:hover {
|
||||
.l-toi-holder.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.l-toi-holder {
|
||||
$toiColorBgPinned: rgba($toiColorBgPinned, 0.4);
|
||||
pointer-events: none;
|
||||
//@include test();
|
||||
@include transform(translateX(-50%));
|
||||
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
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
&:before {
|
||||
// Vertical line
|
||||
border-left: 1px dashed $toiColorBg;
|
||||
@ -107,44 +128,15 @@ table {
|
||||
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;
|
||||
}
|
||||
.l-toi {
|
||||
@extend .icon-clock;
|
||||
@include transform(translateY(100%));
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
&:hover {
|
||||
background-color: rgba($toiColorBgHov, 0.1);
|
||||
&: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;
|
||||
border-left-color: $toiColorBgHov !important;
|
||||
}
|
||||
}
|
||||
z-index: 3;
|
||||
|
||||
@ -48,10 +48,9 @@
|
||||
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
// Holds the plot area and the X-axis only
|
||||
//@include test(blue, 0.1);
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: nth($plotDisplayArea, 2);
|
||||
right: nth($plotDisplayArea, 2) + $toiW / 2;
|
||||
bottom: 0;
|
||||
left: nth($plotDisplayArea, 4);
|
||||
|
||||
|
||||
@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Time of Interest
|
||||
$toiColorBg: #666;
|
||||
$toiColorBgHov: #999;
|
||||
$toiColorFg: #fff;
|
||||
$toiColorBgPinned: $colorKey;
|
||||
$toiColorFgPinned: #fff;
|
||||
$toiColorBg: $colorBtnMajorBg;
|
||||
$toiColorBgHov: $colorBtnMajorBgHov;
|
||||
$toiColorFg: #ccc;
|
||||
$toiColorFgHov: #fff;
|
||||
$toiColorBgActive: lighten($colorKey, 10%);
|
||||
$toiColorFgActive: $toiColorFgHov;
|
||||
$toiW: 18px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Time of Interest
|
||||
$toiColorBg: #666;
|
||||
$toiColorBgHov: #333;
|
||||
$toiColorFg: #fff;
|
||||
$toiColorBgPinned: $colorKey;
|
||||
$toiColorFgPinned: #fff;
|
||||
$toiColorBg: $colorKey;
|
||||
$toiColorBgHov: lighten($colorKey, 10%);
|
||||
$toiColorFg: #ccc;
|
||||
$toiColorFgHov: #fff;
|
||||
$toiColorBgActive: lighten($colorKey, 20%);
|
||||
$toiColorFgActive: $toiColorFgHov;
|
||||
$toiW: 18px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
|
||||
@ -273,11 +273,11 @@
|
||||
.l-toi-holder {
|
||||
$c: $colorTimeCondTOIBg;
|
||||
$cHov: $toiColorBgHov;
|
||||
$cPinned: rgba($toiColorBgPinned, 0.8);
|
||||
$cPinnedHov: $toiColorBgPinned;
|
||||
//$cPinned: rgba($toiColorBgPinned, 0.8);
|
||||
//$cPinnedHov: $toiColorBgPinned;
|
||||
$linesVOffset: 2px;
|
||||
@include transform(translateX(-50%));
|
||||
color: $c;
|
||||
//color: $c;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: $timeCondTOIIconD;
|
||||
@ -288,7 +288,7 @@
|
||||
&:after {
|
||||
// Vertical lines
|
||||
content: '';
|
||||
background-color: $c;
|
||||
//background-color: $c;
|
||||
left: 50%;
|
||||
height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
|
||||
width: 1px;
|
||||
@ -340,7 +340,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
/* &.pinned {
|
||||
//opacity: 1;
|
||||
z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
|
||||
&.active {
|
||||
@ -369,7 +369,7 @@
|
||||
content: $glyph-icon-x-in-circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-time-conductor-controls {
|
||||
|
||||
@ -100,20 +100,12 @@
|
||||
<div class="l-data-visualization">
|
||||
<!-- Note:
|
||||
- val-to-right should be applied when l-toi-holder left < 160px
|
||||
- The pinned TOI must precede the non-pinned version in markup,
|
||||
so that we can hide the non-pinned TOI when hovering over the pinned one.
|
||||
-->
|
||||
<div class="l-toi-holder pinned"
|
||||
ng-class="{ 'active': false, 'val-to-right': true }"
|
||||
ng-click="this.active = false"
|
||||
style="left: 5%">
|
||||
<div class="l-toi s-toi"></div>
|
||||
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
|
||||
</div>
|
||||
<div class="l-toi-holder hover"
|
||||
ng-class="{ 'val-to-right': false }"
|
||||
style="left: 75%">
|
||||
<div class="l-toi s-toi"></div>
|
||||
<div class="l-toi-holder"
|
||||
ng-class="{ 'pinned': true, 'val-to-right': false }"
|
||||
ng-click="this.pinned = false"
|
||||
style="left: 100%">
|
||||
<div class="l-toi"></div>
|
||||
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -78,22 +78,11 @@
|
||||
<!-- 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: false }"
|
||||
style="left: 70%">
|
||||
<div class="l-toi-holder"
|
||||
ng-class="{ pinned: true }"
|
||||
style="left: 100%">
|
||||
<!-- 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 hover"
|
||||
style="left: 20%">
|
||||
<!-- 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 class="l-toi block"></div>
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user