ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 03:06:54 +00:00
Code Issues Actions 9 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

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

@ -1,4 +1,5 @@
$ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization, Controls elements
$ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
$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 {
height: $r1H;
position: relative;
width: 100%;
position: absolute;
left: nth($timeCondAxisLROffset,1);
right: nth($timeCondAxisLROffset,2);
svg {
text-rendering: geometricPrecision;
width: 100%;
@ -209,9 +210,34 @@
}
}
}
.l-data-visualization {
background: $colorTimeCondDataVisBg;
.l-data-visualization-holder {
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
@ -228,7 +254,6 @@
$cHov: $colorClickIconHov;
$linesVOffset: 2px;
@include transform(translateX(-50%));
@include test(green);
top: 0px; bottom: 0px;
width: $r2H;
left: auto; right: auto;
@ -343,13 +368,9 @@
}
}
.l-toi-holder {
display: none;
}
.l-data-visualization {
background: $colorTimeCondDataVisRtBg !important;
height: $r2HRt;
//height: $r2HRt;
}
.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>
</div>
<!-- Holds data availability, time of interest -->
<div class="l-data-visualization l-row-elem flex-elem">
<div class="l-toi-holder slidable horz"
style="left: 100%">
<div class="l-toi s-toi"></div>
<!-- Holds data visualization, time of interest -->
<div class="l-data-visualization-holder l-row-elem flex-elem">
<a class="l-page-button s-icon-button icon-pointer-left"></a>
<div class="l-data-visualization">
<div class="l-toi-holder slidable horz"
style="left: 100%">
<div class="l-toi s-toi"></div>
</div>
</div>
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
</div>
<!-- Holds time system and session selectors, and zoom control -->