mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +00:00
[Frontend] Styling for TOI element
Fixes #933 Fixes #1193 WIP: Markup and CSS for plots and TC near complete; TODO: revised styling in tabular views;
This commit is contained in:
Charles Hacskaylo
parent
5cd0c8a4fa
commit
d3bf6c5857
@ -38,14 +38,15 @@ TC
|
||||
.l-toi-holder,
|
||||
.l-toi-holder:after,
|
||||
.l-toi-holder:before,
|
||||
.l-toi {
|
||||
.l-toi,
|
||||
.l-toi-val {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.l-toi-holder {
|
||||
@include trans-prop-nice($props: opacity, $dur: 200ms);
|
||||
$p: 3px;
|
||||
@include transform(translateX(-50%));
|
||||
color: $toiColorBg;
|
||||
position: absolute;
|
||||
@ -70,42 +71,45 @@ TC
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
width: 2px;
|
||||
}
|
||||
.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;
|
||||
// Holds clock icon an unpin button
|
||||
font-size: $toiW;
|
||||
height: $toiW;
|
||||
width: $toiW;
|
||||
.t-button-unpin {
|
||||
color: $toiColorBg;
|
||||
@extend .icon-clock;
|
||||
&:hover {
|
||||
&:before {
|
||||
content: $glyph-icon-x-in-circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
//@extend .flex-elem;
|
||||
//@extend .grows;
|
||||
$tbP: 1px;
|
||||
background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: content-box;
|
||||
display: inline-block;
|
||||
color: $toiColorFg;
|
||||
font-size: 0.7rem;
|
||||
height: $toiW;
|
||||
right: $toiW + $interiorMarginSm;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
line-height: $toiW;
|
||||
padding: $tbP $p;
|
||||
white-space: nowrap;
|
||||
//right: $toiW + $interiorMargin;
|
||||
}
|
||||
|
||||
&.val-to-right {
|
||||
.l-toi-val {
|
||||
order: 2;
|
||||
//right: auto;
|
||||
//left: $toiW + $interiorMarginSm;
|
||||
right: auto;
|
||||
left: $toiW + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -159,19 +163,16 @@ table {
|
||||
.gl-plot {
|
||||
.gl-plot-wrapper-display-area-and-x-axis {
|
||||
.l-toi-holder {
|
||||
//@include test();
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
bottom: nth($plotDisplayArea, 3) - $interiorMargin;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
@include test();
|
||||
@include transform(translateY(100%));
|
||||
bottom: 0;
|
||||
}
|
||||
//&:hover {
|
||||
// background-color: rgba($toiColorBgHov, 0.1);
|
||||
//}
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
// Time of Interest
|
||||
$toiColorBg: $colorBtnMajorBg;
|
||||
$toiColorBgHov: $colorBtnMajorBgHov;
|
||||
$toiColorFg: #ccc;
|
||||
$toiColorFg: #000;
|
||||
$toiColorFgHov: #fff;
|
||||
$toiColorBgActive: lighten($colorKey, 10%);
|
||||
$toiColorFgActive: $toiColorFgHov;
|
||||
$toiW: 16px;
|
||||
$toiW: 12px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
|
||||
@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
// Time of Interest
|
||||
$toiColorBg: $colorKey;
|
||||
$toiColorBgHov: lighten($colorKey, 10%);
|
||||
$toiColorFg: #ccc;
|
||||
$toiColorFg: #fff;
|
||||
$toiColorFgHov: #fff;
|
||||
$toiColorBgActive: lighten($colorKey, 20%);
|
||||
$toiColorFgActive: $toiColorFgHov;
|
||||
$toiW: 18px;
|
||||
$toiW: 12px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
|
||||
@ -289,20 +289,22 @@
|
||||
}
|
||||
|
||||
.l-toi {
|
||||
$d: $timeCondTOIIconD;
|
||||
@include transform(translate(-50%, -50%));
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: $d;
|
||||
width: $d;
|
||||
z-index: 1;
|
||||
@include transform(translateY(-50%));
|
||||
//$d: $timeCondTOIIconD;
|
||||
//@include transform(translate(-50%, -50%));
|
||||
//font-size: $d;
|
||||
//line-height: $d;
|
||||
//left: 50%;
|
||||
//top: 50%;
|
||||
//height: $d;
|
||||
//width: $d;
|
||||
//z-index: 1;
|
||||
}
|
||||
|
||||
.l-toi-val {
|
||||
@include transform(translateY(-51%));
|
||||
top: 50%;
|
||||
//@include transform(translateY(-51%));
|
||||
//top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -106,7 +106,8 @@
|
||||
ng-click="this.pinned = false"
|
||||
style="left: 70%">
|
||||
<div class="l-toi">
|
||||
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
|
||||
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
|
||||
<span class="l-toi-val">21:31:30</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -78,13 +78,14 @@
|
||||
<!-- new wrapper inserted here -->
|
||||
<div class="gl-plot-wrapper-display-area-and-x-axis">
|
||||
<!-- TOI element -->
|
||||
<div class="l-toi-holder show-val val-to-right"
|
||||
ng-class="{ pinned: true }"
|
||||
<div class="l-toi-holder show-val"
|
||||
ng-class="{ pinned: true, 'val-to-right': true }"
|
||||
style="left: 0%">
|
||||
<!-- Need text val at bottom, plus vertical line -->
|
||||
<div class="l-toi l-flex-row">
|
||||
<span class="l-toi-val flex-elem">Z884.92:25:32 52-90-6102</span>
|
||||
</div>
|
||||
<span class="l-toi">
|
||||
<a class="t-button-unpin icon-button" ng-click="unpin()"></a>
|
||||
<span class="l-toi-val">21:31:30</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="gl-plot-coords"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user