Skip to content

Commit 33b2225

Browse files
charlesh88charlesh88
committed
[Frontend] Styling for Time Conductor v2
Fixes #933 In-progress: restructured markup to move modeModel farther out; animated icon
1 parent fcfda50 commit 33b2225

File tree

3 files changed

+204
-94
lines changed

3 files changed

+204
-94
lines changed

‎platform/commonUI/browse/res/templates/browse-object.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,6 @@
6262
<!-- put time conductor in here? -->
6363
<mct-representation mct-object="domainObject"
6464
key="'time-conductor'"
65-
class="abs holder flex-elem flex-fixed l-time-conductor-holder">
65+
class="abs holder flex-elem flex-fixed l-flex-row l-time-conductor-holder">
6666
</mct-representation>
6767
</div>

‎platform/commonUI/general/res/sass/controls/_time-conductor.scss

+105-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,94 @@
55
}
66
}
77

8-
.l-time-conductor {
8+
@include keyframes(clock-hands) {
9+
0% {
10+
@include transform(translate(-50%, -50%) rotate(0deg));
11+
}
12+
100% {
13+
@include transform(translate(-50%, -50%) rotate(360deg));
14+
}
15+
}
16+
17+
.l-time-conductor-holder {
918
$minW: 500px;
19+
border-top: 1px solid $colorInteriorBorder;
20+
min-width: $minW;
21+
padding-top: $interiorMargin;
22+
}
23+
24+
.time-conductor-icon {
25+
$c: $colorBtnBg; //$colorTimeCondKeyBg;
26+
$d: 20px;
27+
background: $c;
28+
border-radius: 4px;
29+
height: $d !important;
30+
width: $d;
31+
position: relative;
32+
// Icon shape: brackets
33+
&:before,
34+
&:after {
35+
content: '';
36+
background: $colorBodyBg;
37+
position: absolute;
38+
}
39+
&:before {
40+
$in: 7px;
41+
left: $in;
42+
top: 0;
43+
right: $in;
44+
bottom: 0;
45+
46+
}
47+
&:after {
48+
$in: 4px;
49+
left: $in;
50+
top: $in;
51+
right: $in;
52+
bottom: $in;
53+
}
54+
55+
// Clock hands
56+
div[class*="hand"] {
57+
$handW: 2px;
58+
$handH: 8px;
59+
@include transform(translate(-50%, -50%));
60+
@include animation-iteration-count(infinite);
61+
@include animation-timing-function(linear);
62+
position: absolute;
63+
height: $handW;
64+
width: $handW;
65+
left: 50%;
66+
top: 50%;
67+
z-index: 2;
68+
&:before {
69+
background-color: $c;
70+
content: '';
71+
display: block;
72+
position: absolute;
73+
width: 100%;
74+
bottom: -1px;
75+
}
76+
&.hand-little {
77+
z-index: 2;
78+
@include animation-duration(12s);
79+
&:before {
80+
//background: red;
81+
height: ceil($handH * 0.7);
82+
}
83+
}
84+
&.hand-big {
85+
z-index: 1;
86+
@include animation-duration(1s);
87+
&:before {
88+
//background: green;
89+
height: $handH;
90+
}
91+
}
92+
}
93+
}
94+
95+
.l-time-conductor {
1096
$knobHOffset: 0px;
1197
$rangeValPad: $interiorMargin;
1298
$rangeValOffset: $sliderKnobW + $interiorMargin;
@@ -19,9 +105,6 @@
19105
$glyphIconRealtime: '\43';
20106
$glyphIconLatest: '\44';
21107

22-
border-top: 1px solid $colorInteriorBorder;
23-
padding-top: $interiorMargin;
24-
min-width: $minW;
25108
position: relative;
26109

27110
> .l-row-elem {
@@ -126,10 +209,28 @@
126209
.l-time-conductor-controls {
127210
margin-top: $interiorMargin;
128211
}
212+
// Fixed
213+
&.fixed-mode {
214+
.time-conductor-icon div[class*="hand"] {
215+
&.hand-little {
216+
@include transform(rotate(120deg));
217+
}
218+
}
219+
}
129220

130221
// Realtime, latest modes
131222
&.realtime-mode,
132223
&.latest-mode {
224+
.time-conductor-icon {
225+
background: $colorTimeCondKeyBg;
226+
div[class*="hand"] {
227+
@include animation-name(clock-hands);
228+
&:before {
229+
background: $colorTimeCondKeyBg;
230+
}
231+
}
232+
}
233+
133234
.l-time-conductor-inputs-holder {
134235
.l-time-range-input-w {
135236
input[type="text"]:not(.error) {

‎platform/features/conductor-v2/res/templates/time-conductor.html

+98-89
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,110 @@
1+
12
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
23
<div ng-controller="TimeConductorController as tcController"
3-
class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
4+
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode">
5+
6+
<div class="flex-elem holder time-conductor-icon">
7+
<div class="hand-little"></div>
8+
<div class="hand-big"></div>
9+
</div>
10+
11+
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
412
<!-- Holds inputs and ticks -->
5-
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
6-
<form class="abs l-time-conductor-inputs-holder"
7-
ng-submit="tcController.updateBoundsFromForm(formModel)">
8-
<span class="l-time-range-w start-w">
9-
<span class="l-time-range-input-w start-date">
10-
<mct-control key="'datetime-field'"
11-
structure="{
12-
format: 'utc',
13-
validate: tcController.validateStart
14-
}"
15-
ng-model="formModel"
16-
ng-mouseup="tcController.changing['start'] = true"
17-
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
18-
field="'start'"
19-
class="time-range-input">
20-
</mct-control>
13+
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
14+
<form class="abs l-time-conductor-inputs-holder"
15+
ng-submit="tcController.updateBoundsFromForm(formModel)">
16+
<span class="l-time-range-w start-w">
17+
<span class="l-time-range-input-w start-date">
18+
<mct-control key="'datetime-field'"
19+
structure="{
20+
format: 'utc',
21+
validate: tcController.validateStart
22+
}"
23+
ng-model="formModel"
24+
ng-mouseup="tcController.changing['start'] = true"
25+
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
26+
field="'start'"
27+
class="time-range-input">
28+
</mct-control>
29+
</span>
30+
<span class="l-time-range-input-w time-delta start-delta"
31+
ng-class="{'hide':(modeModel.selected === 'fixed')}">
32+
-
33+
<mct-control key="'datetime-field'"
34+
structure="{
35+
format: 'duration',
36+
validate: tcController.validateStartDelta
37+
}"
38+
ng-model="formModel"
39+
ng-mouseup="tcController.changing['startDelta'] = true"
40+
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
41+
field="'startDelta'"
42+
class="hrs-min-input">
43+
</mct-control>
44+
</span>
2145
</span>
22-
<span class="l-time-range-input-w time-delta start-delta"
23-
ng-class="{'hide':(modeModel.selected === 'fixed')}">
24-
-
25-
<mct-control key="'datetime-field'"
26-
structure="{
27-
format: 'duration',
28-
validate: tcController.validateStartDelta
29-
}"
30-
ng-model="formModel"
31-
ng-mouseup="tcController.changing['startDelta'] = true"
32-
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
33-
field="'startDelta'"
34-
class="hrs-min-input">
35-
</mct-control>
36-
</span>
37-
</span>
3846

3947

40-
<span class="l-time-range-w end-w">
41-
<span class="l-time-range-input-w time-delta end-delta"
42-
ng-class="{'hide':(modeModel.selected === 'fixed')}">
43-
+
44-
<mct-control key="'datetime-field'"
45-
structure="{
46-
format: 'duration',
47-
validate: tcController.validateEndDelta
48-
}"
49-
ng-model="formModel"
50-
ng-mouseup="tcController.changing['endDelta'] = true"
51-
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
52-
field="'endDelta'"
53-
class="hrs-min-input">
54-
</mct-control>
55-
</span>
56-
<span class="l-time-range-input-w end-date"
57-
ng-controller="ToggleController as t2">
58-
<mct-control key="'datetime-field'"
59-
structure="{
60-
format: 'utc',
61-
validate: tcController.validateEnd
62-
}"
63-
ng-model="formModel"
64-
ng-mouseup="tcController.changing['end'] = true"
65-
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
66-
field="'end'"
67-
class="time-range-input">
68-
</mct-control>
48+
<span class="l-time-range-w end-w">
49+
<span class="l-time-range-input-w time-delta end-delta"
50+
ng-class="{'hide':(modeModel.selected === 'fixed')}">
51+
+
52+
<mct-control key="'datetime-field'"
53+
structure="{
54+
format: 'duration',
55+
validate: tcController.validateEndDelta
56+
}"
57+
ng-model="formModel"
58+
ng-mouseup="tcController.changing['endDelta'] = true"
59+
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
60+
field="'endDelta'"
61+
class="hrs-min-input">
62+
</mct-control>
63+
</span>
64+
<span class="l-time-range-input-w end-date"
65+
ng-controller="ToggleController as t2">
66+
<mct-control key="'datetime-field'"
67+
structure="{
68+
format: 'utc',
69+
validate: tcController.validateEnd
70+
}"
71+
ng-model="formModel"
72+
ng-mouseup="tcController.changing['end'] = true"
73+
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
74+
field="'end'"
75+
class="time-range-input">
76+
</mct-control>
77+
</span>
6978
</span>
70-
</span>
7179

72-
<input type="submit" class="hidden">
73-
</form>
74-
<mct-conductor-axis></mct-conductor-axis>
75-
</div>
80+
<input type="submit" class="hidden">
81+
</form>
82+
<mct-conductor-axis></mct-conductor-axis>
83+
</div>
7684

77-
<!-- Holds data availability, time of interest -->
78-
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
85+
<!-- Holds data availability, time of interest -->
86+
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
7987

80-
<!-- Holds time system and session selectors, and zoom control -->
81-
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
82-
<mct-representation
83-
key="'mode-selector'"
84-
mct-object="domainObject"
85-
ng-model="modeModel"
86-
class="holder flex-elem menus-up mode-selector">
87-
</mct-representation>
88-
<mct-control
89-
key="'menu-button'"
90-
class="holder flex-elem menus-up time-system"
91-
ng-model="conductorModel.timeSystem"
92-
structure="{
93-
text: 'UTC',
94-
options: [
95-
{name: 'UTC', key:'utc', glyph:'\u0043'},
96-
{name: 'SCET', key:'scet', glyph:'\u0043'},
97-
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
98-
]}">
99-
</mct-control>
88+
<!-- Holds time system and session selectors, and zoom control -->
89+
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
90+
<mct-representation
91+
key="'mode-selector'"
92+
mct-object="domainObject"
93+
ng-model="modeModel"
94+
class="holder flex-elem menus-up mode-selector">
95+
</mct-representation>
96+
<mct-control
97+
key="'menu-button'"
98+
class="holder flex-elem menus-up time-system"
99+
ng-model="conductorModel.timeSystem"
100+
structure="{
101+
text: 'UTC',
102+
options: [
103+
{name: 'UTC', key:'utc', glyph:'\u0043'},
104+
{name: 'SCET', key:'scet', glyph:'\u0043'},
105+
{name: 'SCLK', key:'sclk', glyph:'\u0043'}
106+
]}">
107+
</mct-control>
108+
</div>
100109
</div>
101110
</div>

0 commit comments

Comments
 (0)