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

[Frontend] Styling for TC's TOI element

Browse Source 
Fixes #933
WIP, TC v2 changes
This commit is contained in:
Charles Hacskaylo 2016-09-14 18:40:55 -07:00
parent 2df1e2b508
commit f912b9e273
3 changed files with 84 additions and 5 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,3 +1,4 @@
$ueTimeConductorH: (25px, 3px, 20px);
$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

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

@ -54,7 +54,7 @@
// Clock hands
div[class*="hand"] {
$handW: 2px;
$handH: $d * 0.4; //8px;
$handH: $d * 0.4;
@include transform(translate(-50%, -50%));
@include animation-iteration-count(infinite);
@include animation-timing-function(linear);
@ -95,6 +95,7 @@
$rangeValOffset: $sliderKnobW + $interiorMargin;
$r1H: nth($ueTimeConductorH, 1);
$r2H: nth($ueTimeConductorH, 2);
$r2HRt: nth($ueTimeConductorRtH, 2);
$r3H: nth($ueTimeConductorH, 3);
position: relative;
@ -175,7 +176,7 @@
}
.l-time-conductor-inputs-and-ticks {
$c: $colorTimeCondTicks; //$colorTick;
$c: $colorTimeCondTicks;
height: $r1H;
mct-conductor-axis {
display: block;
@ -213,6 +214,73 @@
height: $r2H;
}
// 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: $colorClickIcon;
$cHov: $colorClickIconHov;
$linesVOffset: 2px;
@include transform(translateX(-50%));
@include test(green);
top: 0px; bottom: 0px;
width: $r2H;
left: auto; right: auto;
z-index: 1;
&:before,
&:after {
// Vertical lines
content: '';
background-color: $c;
left: 50%; height: 35%; width: 1px;
z-index: 0;
}
&:before {
@include transform(translate(-50%, $linesVOffset * -1));
top: 0px; bottom: auto;
}
&:after {
@include transform(translate(-50%, $linesVOffset));
top: auto; bottom: 0px;
}
.l-toi {
$d: $r2H * 0.65;
@include transform(translate(-50%, -50%));
color: $c;
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;
}
}
&:hover {
&:before,
&:after {
background-color: $cHov !important;
}
.l-toi {
color: $cHov !important;
}
}
}
.l-time-conductor-controls {
align-items: center;
margin-top: $interiorMargin;
@ -275,8 +343,13 @@
}
}
.l-toi-holder {
display: none;
}
.l-data-visualization {
background: $colorTimeCondDataVisRtBg !important
background: $colorTimeCondDataVisRtBg !important;
height: $r2HRt;
}
.mode-selector .s-menu-button {

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

@ -79,7 +79,12 @@
</div>
<!-- Holds data availability, time of interest -->
<div class="l-data-visualization l-row-elem flex-elem"></div>
<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>
</div>
</div>
<!-- Holds time system and session selectors, and zoom control -->
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">