From 33b2225d107d8351398d40ec4119cf68d3a66e8b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 13 Jul 2016 18:48:17 -0700
Subject: [PATCH] [Frontend] Styling for Time Conductor v2
Fixes #933
In-progress: restructured markup to move
modeModel farther out; animated icon
---
.../browse/res/templates/browse-object.html | 2 +-
.../res/sass/controls/_time-conductor.scss | 109 +++++++++-
.../res/templates/time-conductor.html | 187 +++++++++---------
3 files changed, 204 insertions(+), 94 deletions(-)
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 86fb09d2ab5..0524519ca43 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -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>
diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
index 05a7f1fe113..3e62fa159e3 100644
--- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -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;
@@ -19,9 +105,6 @@
$glyphIconRealtime: '\43';
$glyphIconLatest: '\44';
- border-top: 1px solid $colorInteriorBorder;
- padding-top: $interiorMargin;
- min-width: $minW;
position: relative;
> .l-row-elem {
@@ -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) {
diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
index 081b9812200..d0cff37f095 100644
--- a/platform/features/conductor-v2/res/templates/time-conductor.html
+++ b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -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>
\ No newline at end of file