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

[Frontend] Styling for TC's TOI element

Browse Source 
Fixes #933
Fixes #1193
WIP: adjust spacing;
added pagination buttons
This commit is contained in:
Charles Hacskaylo 2016-09-15 14:55:06 -07:00
parent f912b9e273
commit 98e67f8dfb
3 changed files with 42 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,3 +2,4 @@ $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

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

@ -185,8 +185,9 @@
} }
.l-axis-holder { .l-axis-holder {
height: $r1H; height: $r1H;
position: relative; position: absolute;
width: 100%; left: nth($timeCondAxisLROffset,1);
right: nth($timeCondAxisLROffset,2);
svg { svg {
text-rendering: geometricPrecision; text-rendering: geometricPrecision;
width: 100%; width: 100%;
@ -209,9 +210,34 @@
} }
} }
} }
.l-data-visualization { .l-data-visualization-holder {
background: $colorTimeCondDataVisBg;
height: $r2H; height: $r2H;
.l-page-button,
.l-data-visualization {
position: absolute;
top: 0; bottom: 0;
}
.l-page-button {
@if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
left: 0;
width: nth($timeCondAxisLROffset,1);
&.align-right {
left: auto; right: 0;
width: nth($timeCondAxisLROffset,2);
}
} @else {
// Hide these if the offsets aren't enough
display: none;
}
}
.l-data-visualization {
background: $colorTimeCondDataVisBg;
left: nth($timeCondAxisLROffset, 1);
right: nth($timeCondAxisLROffset, 2);
}
} }
// Time of Interest control // Time of Interest control
@ -228,7 +254,6 @@
$cHov: $colorClickIconHov; $cHov: $colorClickIconHov;
$linesVOffset: 2px; $linesVOffset: 2px;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
@include test(green);
top: 0px; bottom: 0px; top: 0px; bottom: 0px;
width: $r2H; width: $r2H;
left: auto; right: auto; left: auto; right: auto;
@ -343,13 +368,9 @@
} }
} }
.l-toi-holder {
display: none;
}
.l-data-visualization { .l-data-visualization {
background: $colorTimeCondDataVisRtBg !important; background: $colorTimeCondDataVisRtBg !important;
height: $r2HRt; //height: $r2HRt;
} }
.mode-selector .s-menu-button { .mode-selector .s-menu-button {

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

@ -78,12 +78,16 @@
<mct-conductor-axis></mct-conductor-axis> <mct-conductor-axis></mct-conductor-axis>
</div> </div>
<!-- Holds data availability, time of interest --> <!-- Holds data visualization, time of interest -->
<div class="l-data-visualization l-row-elem flex-elem"> <div class="l-data-visualization-holder l-row-elem flex-elem">
<div class="l-toi-holder slidable horz" <a class="l-page-button s-icon-button icon-pointer-left"></a>
style="left: 100%"> <div class="l-data-visualization">
<div class="l-toi s-toi"></div> <div class="l-toi-holder slidable horz"
style="left: 100%">
<div class="l-toi s-toi"></div>
</div>
</div> </div>
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
</div> </div>
<!-- Holds time system and session selectors, and zoom control --> <!-- Holds time system and session selectors, and zoom control -->