Skip to content

Commit

Permalink
[Frontend] Styling for Time Conductor v2
Browse files Browse the repository at this point in the history 
Fixes #933
In-progress: restructured markup to move
modeModel farther out; animated icon
  • Loading branch information
@charlesh88
charlesh88 committed Jul 14, 2016
1 parent fcfda50 commit 33b2225
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 94 deletions.
2 changes: 1 addition & 1 deletion platform/commonUI/browse/res/templates/browse-object.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
109 changes: 105 additions & 4 deletions platform/commonUI/general/res/sass/controls/_time-conductor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,9 +105,6 @@
$glyphIconRealtime: '\43';
$glyphIconLatest: '\44';

border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
min-width: $minW;
position: relative;

> .l-row-elem {
Expand Down Expand Up @@ -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) {
Expand Down
187 changes: 98 additions & 89 deletions platform/features/conductor-v2/res/templates/time-conductor.html
View file
Original file line number Diff line number Diff line change
@@ -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">
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 -->
<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>
<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>
<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>


<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 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>
</span>

<input type="submit" class="hidden">
</form>
<mct-conductor-axis></mct-conductor-axis>
</div>
<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 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>
<!-- 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>

0 comments on commit 33b2225

Please sign in to comment.