ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-25 03:34:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Styling for TC's TOI element

Browse Source 
Fixes #933
Fixes #1193
TOI in TC done for now.
This commit is contained in:
Charles Hacskaylo 2016-09-15 15:40:03 -07:00
parent 98e67f8dfb
commit 35872e284c
3 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/features/conductor-v2/conductor/res/sass/_constants.scss
View File

@ -2,4 +2,6 @@ $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization,
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00 $timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
$timeCondAxisLROffset: (5px, 5px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px $timeCondAxisLROffset: (6px, 6px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
$timeCondTOIValOffset: 0px;

34
platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss
View File

@ -255,7 +255,7 @@
$linesVOffset: 2px; $linesVOffset: 2px;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
top: 0px; bottom: 0px; top: 0px; bottom: 0px;
width: $r2H; width: $timeCondTOIIconD;
left: auto; right: auto; left: auto; right: auto;
z-index: 1; z-index: 1;
&:before, &:before,
@ -263,7 +263,8 @@
// Vertical lines // Vertical lines
content: ''; content: '';
background-color: $c; background-color: $c;
left: 50%; height: 35%; width: 1px; left: 50%;
height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; width: 1px;
z-index: 0; z-index: 0;
} }
@ -278,7 +279,7 @@
} }
.l-toi { .l-toi {
$d: $r2H * 0.65; $d: $timeCondTOIIconD; //$r2H * 0.65;
@include transform(translate(-50%, -50%)); @include transform(translate(-50%, -50%));
color: $c; color: $c;
font-size: $d; font-size: $d;
@ -294,15 +295,38 @@
} }
} }
.l-toi-val {
@include transform(translateY(-50%));
display: none; // Only show when TOI is active
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;
}
}
&.s-status-active {
.l-toi-val {
display: block;
}
}
&:hover { &:hover {
&:before, &:before,
&:after { &:after {
background-color: $cHov !important; background-color: $cHov !important;
} }
.l-toi { .l-toi,
.l-toi-val {
color: $cHov !important; color: $cHov !important;
} }
} }
} }

4
platform/features/conductor-v2/conductor/res/templates/time-conductor.html
View File

@ -82,9 +82,13 @@
<div class="l-data-visualization-holder l-row-elem flex-elem"> <div class="l-data-visualization-holder l-row-elem flex-elem">
<a class="l-page-button s-icon-button icon-pointer-left"></a> <a class="l-page-button s-icon-button icon-pointer-left"></a>
<div class="l-data-visualization"> <div class="l-data-visualization">
<!-- val-to-right should be applied when l-toi-holder left < 160px -->
<div class="l-toi-holder slidable horz" <div class="l-toi-holder slidable horz"
ng-class="{ 's-status-active':true, 'val-to-right': false }"
style="left: 100%"> style="left: 100%">
<div class="l-toi s-toi"></div> <div class="l-toi s-toi"></div>
<div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
</div> </div>
</div> </div>
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a> <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>