Skip to content

Commit b392633

Browse files
charlesh88charlesh88
committedJul 20, 2016
[Frontend] Time Conductor v2 styling
Fixes #933 WIP: Significant mobile and desktop style tweaks; moved constants into their own include file;
·
v0.11.1-VISTAR3.0.0
1 parent ff16784 commit b392633

File tree

3 files changed

+79
-43
lines changed

3 files changed

+79
-43
lines changed
 

‎platform/features/conductor-v2/res/sass/_constants.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$ueTimeConductorH: (25px, 15px, 20px);
2+
$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
3+
$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00

‎platform/features/conductor-v2/res/sass/time-conductor.scss

+74-43
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,14 @@
2020
* at runtime from the About dialog for additional information.
2121
*****************************************************************************/
2222
@import "bourbon";
23-
2423
@import "../../../../commonUI/general/res/sass/constants";
2524
@import "../../../../commonUI/general/res/sass/mixins";
2625
@import "../../../../commonUI/general/res/sass/mobile/constants";
2726
@import "../../../../commonUI/general/res/sass/mobile/mixins";
2827
@import "../../../../commonUI/themes/espresso/res/sass/constants";
2928
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
3029
@import "../../../../commonUI/general/res/sass/icons";
31-
32-
$ueTimeConductorH: (25px, 6px, 20px);
30+
@import "constants";
3331

3432
@mixin toiLineHovEffects() {
3533
&:before,
@@ -158,38 +156,48 @@ $ueTimeConductorH: (25px, 6px, 20px);
158156
}
159157

160158
.l-time-conductor-inputs-holder {
161-
$trInputW: 180px;
162-
$hmInputW: 60px;
163159
$ticksBlockerFadeW: 50px;
164160
$iconCalendarW: 16px;
165161
$wBgColor: $colorBodyBg;
166162

167163
height: $r1H;
168164
position: absolute;
169-
top: 0; right: 0; bottom: 0; left: 0;
165+
top: 0;
166+
right: 0;
167+
bottom: 0;
168+
left: 0;
170169
z-index: 1;
171170
.l-time-range-w {
172171
// Wraps a datetime text input field
173172
height: 100%;
174173
position: absolute;
174+
.title {
175+
display: inline-block;
176+
margin-right: $interiorMarginSm;
177+
}
175178
&.start-w {
176179
@include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
177180
padding-right: $ticksBlockerFadeW;
181+
.title:before {
182+
content: 'Start';
183+
}
178184
}
179185
&.end-w {
180186
@include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
181187
padding-left: $ticksBlockerFadeW;
182188
right: 0;
183-
text-align: right;
189+
.title:before {
190+
content: 'End';
191+
}
184192
}
185193
input[type="text"] {
186194
@include trans-prop-nice(padding, 250ms);
187195
}
188-
.time-range-input input {
189-
width: $trInputW;
196+
.time-range-input input[type="text"] {
197+
width: $timeCondInputTimeSysDefW;
190198
}
191-
.hrs-min-input input {
192-
width: $hmInputW;
199+
.hrs-min-input input[type="text"] {
200+
width: $timeCondInputDeltaDefW;
193201
}
194202
.icon-calendar {
195203
margin-top: 4px;
@@ -250,18 +258,13 @@ $ueTimeConductorH: (25px, 6px, 20px);
250258
color: $colorTick;
251259
}
252260
}
253-
254261
}
255-
// Fixed
256-
&.fixed-mode {
257-
.time-conductor-icon div[class*="hand"] {
258-
&.hand-little {
259-
@include transform(rotate(120deg));
260-
}
261-
}
262+
263+
.l-data-visualization {
264+
background: $colorTimeCondDataVisRtBg !important
262265
}
263266

264-
// Realtime, latest modes
267+
// Real-time, latest modes
265268
&.realtime-mode,
266269
&.latest-mode {
267270
.time-conductor-icon {
@@ -297,69 +300,92 @@ $ueTimeConductorH: (25px, 6px, 20px);
297300
&.end-date {
298301
pointer-events: none;
299302
input[type="text"] {
300-
color: $colorTimeCondKeyBg;
303+
color: pullForward($colorTimeCondKeyBg, 5%);
301304
margin-right: $interiorMargin;
302-
text-align: right;
305+
tab-index: -1;
303306
}
304307
}
305308
}
306309
}
307310

308-
&.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
309-
&.latest-mode .time-conductor-icon div[class*="hand"] {
310-
@include animation-name(clock-hands-sticky);
311-
&.hand-big { @include animation-duration(5s); }
312-
&.hand-little { @include animation-duration(60s); }
313-
}
314-
315-
.l-data-visualization {
316-
background: $colorTimeCondDataVisRtBg !important
317-
}
318311
.mode-selector .s-menu-btn {
319312
@include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
320313
}
321314
}
315+
316+
// Fixed mode
322317
&.fixed-mode {
323318
$i: $glyphIconFixed;
319+
.time-conductor-icon div[class*="hand"] {
320+
&.hand-little {
321+
@include transform(rotate(120deg));
322+
}
323+
}
324324
.mode-selector .s-menu-btn:before {
325325
content: $i;
326326
}
327327
}
328+
329+
// Realtime mode
328330
&.realtime-mode {
329331
$i: $glyphIconRealtime;
332+
.time-conductor-icon div[class*="hand"] {
333+
@include animation-name(clock-hands);
334+
}
330335
.time-delta:before {
331336
content: $i;
332337
}
338+
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
339+
content: 'Now';
340+
}
333341
.mode-selector .s-menu-btn:before {
334342
content: $i;
335343
}
336344
}
345+
346+
// LAD mode
337347
&.latest-mode {
338348
$i: $glyphIconLatest;
349+
.time-conductor-icon div[class*="hand"] {
350+
@include animation-name(clock-hands-sticky);
351+
&.hand-big {
352+
@include animation-duration(5s);
353+
}
354+
&.hand-little {
355+
@include animation-duration(60s);
356+
}
357+
}
339358
.time-delta:before {
340359
content: $i;
341360
}
361+
.l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
362+
content: 'LAD';
363+
}
342364
.mode-selector .s-menu-btn:before {
343365
content: $i;
344366
}
345367
}
346368
}
347369

348-
.s-time-range-val {
349-
border-radius: $controlCr;
350-
background-color: $colorInputBg;
351-
padding: 1px 1px 0 $interiorMargin;
352-
}
353-
354370
/******************************************************************** MOBILE */
355371

356-
//@include phoneandtablet {}
372+
@include phoneandtablet {
373+
.l-time-conductor-holder { min-width: 0 !important; }
374+
.super-menu.mini {
375+
width: 200px;
376+
height: 100px;
377+
.pane.menu-item-description {
378+
display: none;
379+
}
380+
}
381+
}
357382

358383
@include phone {
359384
.l-time-conductor {
360385
min-width: 0;
361-
.l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
362-
//TODO: mode menu smaller, hide right side
386+
.l-time-conductor-inputs-and-ticks mct-conductor-axis {
387+
display: none;
388+
}
363389
}
364390
}
365391

@@ -387,16 +413,21 @@ $ueTimeConductorH: (25px, 6px, 20px);
387413
&:not(:first-child) {
388414
margin-top: $interiorMargin;
389415
}
416+
.title {
417+
width: 30px;
418+
}
390419
}
391420
}
392421
}
393422

394-
// Realtime, latest modes
423+
// Real-time, latest modes
395424
&.realtime-mode,
396425
&.latest-mode {
397-
// TODO: hide all of start-w
398426
.l-time-conductor-inputs-and-ticks {
399427
.l-time-range-w {
428+
.title {
429+
width: 30px;
430+
}
400431
&.start-w {
401432
display: none;
402433
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
ng-submit="tcController.updateBoundsFromForm(formModel)">
1515
<span class="l-time-range-w start-w">
1616
<span class="l-time-range-input-w start-date">
17+
<span class="title"></span>
1718
<mct-control key="'datetime-field'"
1819
structure="{
1920
format: timeSystemModel.format,
@@ -44,6 +45,7 @@
4445
<span class="l-time-range-w end-w">
4546
<span class="l-time-range-input-w end-date"
4647
ng-controller="ToggleController as t2">
48+
<span class="title"></span>
4749
<mct-control key="'datetime-field'"
4850
structure="{
4951
format: timeSystemModel.format,

0 commit comments

Comments
 (0)
Please sign in to comment.