mirror of
https://github.com/nasa/openmct.git
synced 2025-02-22 02:06:49 +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? -->
|
<!-- put time conductor in here? -->
|
||||||
<mct-representation mct-object="domainObject"
|
<mct-representation mct-object="domainObject"
|
||||||
key="'time-conductor'"
|
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>
|
</mct-representation>
|
||||||
</div>
|
</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;
|
$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;
|
$knobHOffset: 0px;
|
||||||
$rangeValPad: $interiorMargin;
|
$rangeValPad: $interiorMargin;
|
||||||
$rangeValOffset: $sliderKnobW + $interiorMargin;
|
$rangeValOffset: $sliderKnobW + $interiorMargin;
|
||||||
@ -19,9 +105,6 @@
|
|||||||
$glyphIconRealtime: '\43';
|
$glyphIconRealtime: '\43';
|
||||||
$glyphIconLatest: '\44';
|
$glyphIconLatest: '\44';
|
||||||
|
|
||||||
border-top: 1px solid $colorInteriorBorder;
|
|
||||||
padding-top: $interiorMargin;
|
|
||||||
min-width: $minW;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .l-row-elem {
|
> .l-row-elem {
|
||||||
@ -126,10 +209,28 @@
|
|||||||
.l-time-conductor-controls {
|
.l-time-conductor-controls {
|
||||||
margin-top: $interiorMargin;
|
margin-top: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
// Fixed
|
||||||
|
&.fixed-mode {
|
||||||
|
.time-conductor-icon div[class*="hand"] {
|
||||||
|
&.hand-little {
|
||||||
|
@include transform(rotate(120deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Realtime, latest modes
|
// Realtime, latest modes
|
||||||
&.realtime-mode,
|
&.realtime-mode,
|
||||||
&.latest-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-conductor-inputs-holder {
|
||||||
.l-time-range-input-w {
|
.l-time-range-input-w {
|
||||||
input[type="text"]:not(.error) {
|
input[type="text"]:not(.error) {
|
||||||
|
|||||||
@ -1,101 +1,110 @@
|
|||||||
|
|
||||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||||
<div ng-controller="TimeConductorController as tcController"
|
<div ng-controller="TimeConductorController as tcController"
|
||||||
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
|
class="holder grows flex-elem l-flex-row l-time-conductor {{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>
|
|
||||||
|
|
||||||
|
<div class="flex-elem holder time-conductor-icon">
|
||||||
<span class="l-time-range-w end-w">
|
<div class="hand-little"></div>
|
||||||
<span class="l-time-range-input-w time-delta end-delta"
|
<div class="hand-big"></div>
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
<!-- Holds data availability, time of interest -->
|
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
|
||||||
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
|
<!-- 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">
|
<span class="l-time-range-w end-w">
|
||||||
<mct-representation
|
<span class="l-time-range-input-w time-delta end-delta"
|
||||||
key="'mode-selector'"
|
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||||
mct-object="domainObject"
|
+
|
||||||
ng-model="modeModel"
|
<mct-control key="'datetime-field'"
|
||||||
class="holder flex-elem menus-up mode-selector">
|
structure="{
|
||||||
</mct-representation>
|
format: 'duration',
|
||||||
<mct-control
|
validate: tcController.validateEndDelta
|
||||||
key="'menu-button'"
|
}"
|
||||||
class="holder flex-elem menus-up time-system"
|
ng-model="formModel"
|
||||||
ng-model="conductorModel.timeSystem"
|
ng-mouseup="tcController.changing['endDelta'] = true"
|
||||||
structure="{
|
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||||
text: 'UTC',
|
field="'endDelta'"
|
||||||
options: [
|
class="hrs-min-input">
|
||||||
{name: 'UTC', key:'utc', glyph:'\u0043'},
|
</mct-control>
|
||||||
{name: 'SCET', key:'scet', glyph:'\u0043'},
|
</span>
|
||||||
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
|
<span class="l-time-range-input-w end-date"
|
||||||
]}">
|
ng-controller="ToggleController as t2">
|
||||||
</mct-control>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user