mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 18:15:29 +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:
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,6 +1,14 @@
|
|||||||
|
|
||||||
<!-- 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">
|
||||||
|
|
||||||
|
<div class="flex-elem holder time-conductor-icon">
|
||||||
|
<div class="hand-little"></div>
|
||||||
|
<div class="hand-big"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
|
||||||
<!-- Holds inputs and ticks -->
|
<!-- Holds inputs and ticks -->
|
||||||
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
||||||
<form class="abs l-time-conductor-inputs-holder"
|
<form class="abs l-time-conductor-inputs-holder"
|
||||||
@ -99,3 +107,4 @@
|
|||||||
</mct-control>
|
</mct-control>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
Loading…
x
Reference in New Issue
Block a user