mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
[Frontend] Styling for Time Conductor v2
Fixes #933 In-progress: restructured markup to move modeModel farther out; animated icon
This commit is contained in:
Charles Hacskaylo
parent
fcfda50e73
commit
33b2225d10
@ -62,6 +62,6 @@
|
||||
<!-- put time conductor in here? -->
|
||||
<mct-representation mct-object="domainObject"
|
||||
key="'time-conductor'"
|
||||
class="abs holder flex-elem flex-fixed l-time-conductor-holder">
|
||||
class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,94 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor {
|
||||
@include keyframes(clock-hands) {
|
||||
0% {
|
||||
@include transform(translate(-50%, -50%) rotate(0deg));
|
||||
}
|
||||
100% {
|
||||
@include transform(translate(-50%, -50%) rotate(360deg));
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor-holder {
|
||||
$minW: 500px;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
min-width: $minW;
|
||||
padding-top: $interiorMargin;
|
||||
}
|
||||
|
||||
.time-conductor-icon {
|
||||
$c: $colorBtnBg; //$colorTimeCondKeyBg;
|
||||
$d: 20px;
|
||||
background: $c;
|
||||
border-radius: 4px;
|
||||
height: $d !important;
|
||||
width: $d;
|
||||
position: relative;
|
||||
// Icon shape: brackets
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
background: $colorBodyBg;
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
$in: 7px;
|
||||
left: $in;
|
||||
top: 0;
|
||||
right: $in;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
&:after {
|
||||
$in: 4px;
|
||||
left: $in;
|
||||
top: $in;
|
||||
right: $in;
|
||||
bottom: $in;
|
||||
}
|
||||
|
||||
// Clock hands
|
||||
div[class*="hand"] {
|
||||
$handW: 2px;
|
||||
$handH: 8px;
|
||||
@include transform(translate(-50%, -50%));
|
||||
@include animation-iteration-count(infinite);
|
||||
@include animation-timing-function(linear);
|
||||
position: absolute;
|
||||
height: $handW;
|
||||
width: $handW;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
&:before {
|
||||
background-color: $c;
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: -1px;
|
||||
}
|
||||
&.hand-little {
|
||||
z-index: 2;
|
||||
@include animation-duration(12s);
|
||||
&:before {
|
||||
//background: red;
|
||||
height: ceil($handH * 0.7);
|
||||
}
|
||||
}
|
||||
&.hand-big {
|
||||
z-index: 1;
|
||||
@include animation-duration(1s);
|
||||
&:before {
|
||||
//background: green;
|
||||
height: $handH;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor {
|
||||
$knobHOffset: 0px;
|
||||
$rangeValPad: $interiorMargin;
|
||||
$rangeValOffset: $sliderKnobW + $interiorMargin;
|
||||
@ -19,9 +105,6 @@
|
||||
$glyphIconRealtime: '\43';
|
||||
$glyphIconLatest: '\44';
|
||||
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
padding-top: $interiorMargin;
|
||||
min-width: $minW;
|
||||
position: relative;
|
||||
|
||||
> .l-row-elem {
|
||||
@ -126,10 +209,28 @@
|
||||
.l-time-conductor-controls {
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
// Fixed
|
||||
&.fixed-mode {
|
||||
.time-conductor-icon div[class*="hand"] {
|
||||
&.hand-little {
|
||||
@include transform(rotate(120deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Realtime, latest modes
|
||||
&.realtime-mode,
|
||||
&.latest-mode {
|
||||
.time-conductor-icon {
|
||||
background: $colorTimeCondKeyBg;
|
||||
div[class*="hand"] {
|
||||
@include animation-name(clock-hands);
|
||||
&:before {
|
||||
background: $colorTimeCondKeyBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-conductor-inputs-holder {
|
||||
.l-time-range-input-w {
|
||||
input[type="text"]:not(.error) {
|
||||
|
||||
@ -1,101 +1,110 @@
|
||||
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<div ng-controller="TimeConductorController as tcController"
|
||||
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
|
||||
<!-- Holds inputs and ticks -->
|
||||
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
||||
<form class="abs l-time-conductor-inputs-holder"
|
||||
ng-submit="tcController.updateBoundsFromForm(formModel)">
|
||||
<span class="l-time-range-w start-w">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateStart
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['start'] = true"
|
||||
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'start'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w time-delta start-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
-
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateStartDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['startDelta'] = true"
|
||||
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'startDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode">
|
||||
|
||||
|
||||
<span class="l-time-range-w end-w">
|
||||
<span class="l-time-range-input-w time-delta end-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
+
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['endDelta'] = true"
|
||||
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateEnd
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['end'] = true"
|
||||
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'end'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="hidden">
|
||||
</form>
|
||||
<mct-conductor-axis></mct-conductor-axis>
|
||||
<div class="flex-elem holder time-conductor-icon">
|
||||
<div class="hand-little"></div>
|
||||
<div class="hand-big"></div>
|
||||
</div>
|
||||
|
||||
<!-- Holds data availability, time of interest -->
|
||||
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
|
||||
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
|
||||
<!-- Holds inputs and ticks -->
|
||||
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
||||
<form class="abs l-time-conductor-inputs-holder"
|
||||
ng-submit="tcController.updateBoundsFromForm(formModel)">
|
||||
<span class="l-time-range-w start-w">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateStart
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['start'] = true"
|
||||
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'start'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w time-delta start-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
-
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateStartDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['startDelta'] = true"
|
||||
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'startDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<!-- Holds time system and session selectors, and zoom control -->
|
||||
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
|
||||
<mct-representation
|
||||
key="'mode-selector'"
|
||||
mct-object="domainObject"
|
||||
ng-model="modeModel"
|
||||
class="holder flex-elem menus-up mode-selector">
|
||||
</mct-representation>
|
||||
<mct-control
|
||||
key="'menu-button'"
|
||||
class="holder flex-elem menus-up time-system"
|
||||
ng-model="conductorModel.timeSystem"
|
||||
structure="{
|
||||
text: 'UTC',
|
||||
options: [
|
||||
{name: 'UTC', key:'utc', glyph:'\u0043'},
|
||||
{name: 'SCET', key:'scet', glyph:'\u0043'},
|
||||
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
|
||||
]}">
|
||||
</mct-control>
|
||||
|
||||
<span class="l-time-range-w end-w">
|
||||
<span class="l-time-range-input-w time-delta end-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
+
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['endDelta'] = true"
|
||||
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateEnd
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['end'] = true"
|
||||
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'end'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="hidden">
|
||||
</form>
|
||||
<mct-conductor-axis></mct-conductor-axis>
|
||||
</div>
|
||||
|
||||
<!-- Holds data availability, time of interest -->
|
||||
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
|
||||
|
||||
<!-- Holds time system and session selectors, and zoom control -->
|
||||
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
|
||||
<mct-representation
|
||||
key="'mode-selector'"
|
||||
mct-object="domainObject"
|
||||
ng-model="modeModel"
|
||||
class="holder flex-elem menus-up mode-selector">
|
||||
</mct-representation>
|
||||
<mct-control
|
||||
key="'menu-button'"
|
||||
class="holder flex-elem menus-up time-system"
|
||||
ng-model="conductorModel.timeSystem"
|
||||
structure="{
|
||||
text: 'UTC',
|
||||
options: [
|
||||
{name: 'UTC', key:'utc', glyph:'\u0043'},
|
||||
{name: 'SCET', key:'scet', glyph:'\u0043'},
|
||||
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
|
||||
]}">
|
||||
</mct-control>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user