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; TODO: cosmetic CSS
This commit is contained in:
Charles Hacskaylo
parent
99253a5904
commit
22da34870d
@ -20,44 +20,92 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
/*
|
||||
Plots
|
||||
-toi-holder:before vertical line
|
||||
-toi: glyphs
|
||||
|
||||
Tables
|
||||
tr: border color
|
||||
td:before: glyphs
|
||||
|
||||
TC
|
||||
-toi-holder:before, after: vertical lines
|
||||
-toi: glyphs
|
||||
|
||||
*/
|
||||
.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before,
|
||||
.l-toi {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.l-toi-holder {
|
||||
@include trans-prop-nice($props: opacity, $dur: 200ms);
|
||||
@include transform(translateX(-50%));
|
||||
color: $toiColorBg;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
|
||||
&:not(.pinned) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.pinned {
|
||||
opacity: 1;
|
||||
}
|
||||
.l-toi {
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines. TC uses both; plot only uses :before
|
||||
border-left: 1px dashed $toiColorBg;
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 50%;
|
||||
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;
|
||||
}
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
}
|
||||
.l-toi {
|
||||
@extend .icon-clock;
|
||||
@extend .l-flex-row;
|
||||
text-align: center;
|
||||
//width: $toiW;
|
||||
&:before {
|
||||
// Clock icon
|
||||
@extend .flex-elem;
|
||||
margin-right: $interiorMarginSm;
|
||||
order: 1;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer !important;
|
||||
&:before {
|
||||
// Icon, change to close box
|
||||
color: $colorAlert;
|
||||
content: $glyph-icon-x-in-circle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
$c: $toiColorBgHov;
|
||||
cursor: ew-resize;
|
||||
.l-toi.block {
|
||||
background-color: $c !important;
|
||||
color: $toiColorFgHov;
|
||||
|
||||
.l-toi-val {
|
||||
//@extend .flex-elem;
|
||||
//@extend .grows;
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
//right: $toiW + $interiorMargin;
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
.l-toi-val {
|
||||
order: 2;
|
||||
//right: auto;
|
||||
//left: $toiW + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,33 +160,18 @@ table {
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
.l-toi-holder {
|
||||
//@include test();
|
||||
@include transform(translateX(-50%));
|
||||
position: absolute;
|
||||
top: 0;
|
||||
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;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
.l-toi {
|
||||
@extend .icon-clock;
|
||||
@include test();
|
||||
@include transform(translateY(100%));
|
||||
bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba($toiColorBgHov, 0.1);
|
||||
&:before {
|
||||
border-left-color: $toiColorBgHov !important;
|
||||
}
|
||||
}
|
||||
//&:hover {
|
||||
// background-color: rgba($toiColorBgHov, 0.1);
|
||||
//}
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,7 +110,7 @@ $toiColorFg: #ccc;
|
||||
$toiColorFgHov: #fff;
|
||||
$toiColorBgActive: lighten($colorKey, 10%);
|
||||
$toiColorFgActive: $toiColorFgHov;
|
||||
$toiW: 18px;
|
||||
$toiW: 16px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -262,33 +262,14 @@
|
||||
}
|
||||
|
||||
// Time of Interest control
|
||||
.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before,
|
||||
.l-toi {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.l-toi-holder {
|
||||
$c: $colorTimeCondTOIBg;
|
||||
$cHov: $toiColorBgHov;
|
||||
//$cPinned: rgba($toiColorBgPinned, 0.8);
|
||||
//$cPinnedHov: $toiColorBgPinned;
|
||||
$linesVOffset: 2px;
|
||||
@include transform(translateX(-50%));
|
||||
//color: $c;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: $timeCondTOIIconD;
|
||||
left: auto;
|
||||
right: auto;
|
||||
z-index: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines
|
||||
content: '';
|
||||
//background-color: $c;
|
||||
border-left-style: solid;
|
||||
left: 50%;
|
||||
height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
|
||||
width: 1px;
|
||||
@ -312,64 +293,17 @@
|
||||
@include transform(translate(-50%, -50%));
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: $d;
|
||||
width: $d;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
@extend .ui-symbol;
|
||||
content: $glyph-icon-clock;
|
||||
}
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
@include transform(translateY(-51%));
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
right: $timeCondTOIIconD + $interiorMarginSm;
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
.l-toi-val {
|
||||
right: auto;
|
||||
left: $timeCondTOIIconD + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/* &.pinned {
|
||||
//opacity: 1;
|
||||
z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
// Vertical lines
|
||||
background-color: $cPinned;
|
||||
}
|
||||
color: $cPinned;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
+ .l-toi-holder {
|
||||
// Important note: the non-pinned TOI element must come after the pinned version in markup.
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.l-toi:hover {
|
||||
color: $cPinnedHov;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
content: $glyph-icon-x-in-circle;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-time-conductor-controls {
|
||||
|
||||
@ -104,9 +104,10 @@
|
||||
<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>
|
||||
style="left: 70%">
|
||||
<div class="l-toi">
|
||||
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
|
||||
|
||||
@ -78,11 +78,13 @@
|
||||
<!-- new wrapper inserted here -->
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
<!-- TOI element -->
|
||||
<div class="l-toi-holder"
|
||||
<div class="l-toi-holder show-val val-to-right"
|
||||
ng-class="{ pinned: true }"
|
||||
style="left: 100%">
|
||||
style="left: 0%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
<div class="l-toi block"></div>
|
||||
<div class="l-toi l-flex-row">
|
||||
<span class="l-toi-val flex-elem">Z884.92:25:32 52-90-6102</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user