[Frontend] Styling for Time Conductor v2

Fixes #933
In-progress: fixed SVG text color, field
styling for fixed vs. real-time, markup cleanup

platform/commonUI/general/res/sass/_constants.scss

@@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (21px, 18px, 20px);
+$ueTimeControlH: (25px, 18px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;
@@ -108,6 +108,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
+$inputTextP: 3px 5px;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;

platform/commonUI/general/res/sass/_global.scss

@@ -66,7 +66,7 @@ input, textarea {
 input[type="text"],
 input[type="search"] {
 	vertical-align: baseline;
-	padding: 3px 5px;
+	padding: $inputTextP;
 }
 
 h1, h2, h3 {

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

@@ -1,18 +1,18 @@
 @mixin toiLineHovEffects() {
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
 }
 
 .l-time-conductor {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$r1H: nth($ueTimeControlH,1);
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
+    $minW: 500px;
+    $knobHOffset: 0px;
+    $rangeValPad: $interiorMargin;
+    $rangeValOffset: $sliderKnobW + $interiorMargin;
+    $r1H: nth($ueTimeControlH, 1);
+    $r2H: nth($ueTimeControlH, 2);
+    $r3H: nth($ueTimeControlH, 3);
 
     // Glyphs Todo: replace with refactored CSS approach when that is merged into master
     $glyphIconFixed: '\e604';
@@ -24,57 +24,75 @@
     min-width: $minW;
     position: relative;
 
-	>.l-row-elem {
+    > .l-row-elem {
         // First order row elements
-		box-sizing: border-box;
+        box-sizing: border-box;
         width: 100%;
         position: relative;
-        &:not(:first-child) {
-            margin-top: $interiorMargin;
+    }
+
+    .mode-selector .s-menu-btn,
+    .time-delta {
+        &:before {
+            @extend .ui-symbol;
+            margin-right: $interiorMarginSm;
         }
-	}
+    }
+
+    .time-delta {
+        &:before {
+            color: $colorTimeCondKeyBg;
+        }
+    }
 
     .l-time-conductor-inputs-holder,
     .l-time-conductor-ticks {
         font-size: 0.8rem;
     }
 
-	.l-time-conductor-inputs-holder {
-        $inputW: 180px;
-        $ticksBlockerFadeW: 25px;
+    .l-time-conductor-inputs-holder {
+        $trInputW: 180px;
+        $hmInputW: 80px;
+        $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
-        //$wBgColor: green;
-        $wBgW: $inputW + $interiorMargin + $iconCalendarW;
 
         height: $r1H;
         z-index: 1;
-        .l-time-range-input-w {
+        .l-time-range-w {
             // Wraps a datetime text input field
+            height: 100%;
             position: absolute;
-            width: $wBgW + $ticksBlockerFadeW;
-            &.start-date {
-                @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
+            &.start-w {
+                @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-right: $ticksBlockerFadeW;
             }
-            &.end-date {
-                @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
+            &.end-w {
+                @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-left: $ticksBlockerFadeW;
                 right: 0;
                 text-align: right;
             }
             input[type="text"] {
-                width: $inputW;
+                @include trans-prop-nice(padding, 250ms);
+            }
+            .time-range-input input {
+                width: $trInputW;
+            }
+            .hrs-min-input input {
+                width: $hmInputW;
             }
             .icon-calendar {
                 margin-top: 4px;
             }
         }
-	}
+    }
 
-	.l-time-conductor-ticks {
+    .l-time-conductor-ticks {
         $c: $colorTick;
-		height: $r1H;
+        height: $r1H;
         mct-conductor-axis {
-            @include transform(translateY(3px));
+            //@include transform(translateY(1px));
             display: block;
             position: relative;
             width: 100%;
@@ -85,27 +103,30 @@
             width: 100%;
             svg {
                 text-rendering: geometricPrecision;
-                width: 100%; height: 100%;
+                width: 100%;
+                height: 100%;
                 > g {
                     font-size: 0.9em;
                 }
-                path {display: none;}
-                line {stroke: $c;}
-                text { fill: $c; }
+                path {
+                    display: none;
+                }
+                line {
+                    stroke: $c;
+                }
+                text {
+                    fill: $c;
+                }
             }
         }
-	}
+    }
     .l-data-visualization {
         background: rgba($colorTick, 0.3);
         height: $r2H;
     }
 
-    .mode-selector .s-menu-btn {
-        &:before {
-            @extend .ui-symbol;
-            margin-right: $interiorMarginSm;
-            content: $glyphIconFixed;
-        }
+    .l-time-conductor-controls {
+        margin-top: $interiorMargin;
     }
 
     // Realtime, latest modes
@@ -113,10 +134,19 @@
     &.latest-mode {
         .l-time-conductor-inputs-holder {
             .l-time-range-input-w {
-                input:not(:hover) {
+                input[type="text"]:not(.error) {
                     background: transparent;
                     box-shadow: none;
                     border-radius: 0;
+                    padding-left: 0;
+                    padding-right: 0;
+                    &:hover {
+                        @include nice-input();
+                        padding: $inputTextP;
+                    }
+                }
+                &.start-date {
+                    pointer-events: none;
                 }
                 .icon-calendar {
                     display: none;
@@ -128,21 +158,42 @@
         }
 
         .l-data-visualization {
-            background: rgba($colorTimeCondKey, 0.5) !important
+            background: rgba($colorTimeCondKeyBg, 0.5) !important
         }
         .mode-selector .s-menu-btn {
-            @include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
+            @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
+        }
+    }
+    &.fixed-mode {
+        $i: $glyphIconFixed;
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.realtime-mode {
+        $i: $glyphIconRealtime;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.latest-mode {
+        $i: $glyphIconLatest;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
         }
     }
-
-    &.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
-    &.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
 }
 
 .s-time-range-val {
-	border-radius: $controlCr;
-	background-color: $colorInputBg;
-	padding: 1px 1px 0 $interiorMargin;
+    border-radius: $controlCr;
+    background-color: $colorInputBg;
+    padding: 1px 1px 0 $interiorMargin;
 }
 
 /******************************************************************** MOBILE */
@@ -178,7 +229,9 @@
                     margin-right: 0;
                 }
                 .l-time-range-inputs-elem {
-                    &.lbl { display: none; }
+                    &.lbl {
+                        display: none;
+                    }
                 }
             }
         }

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorBodyFg, 0.2);
 
 // Time Conductor
-$colorTimeCondKey: #1d7a96;
+$colorTimeCondKeyBg: #1d7a96;
+$colorTimeCondKeyFg: #fff;

platform/commonUI/themes/snow/res/sass/_constants.scss

@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
 
 // Time Conductor
-$colorTimeCondKey: #0092b3;
+$colorTimeCondKeyBg: #0092b3;
+$colorTimeCondKeyFg: #fff;

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

@@ -1,71 +1,75 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<style>
-    .start-delta {
-        left: 180px;
-    }
-</style>
 <div ng-controller="TimeConductorController as tcController"
      class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
     <!-- 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-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-start">
-            </mct-control>
-        </span>
-        <span class="l-time-range-input-w 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="time-delta-start">
-            </mct-control>
-        </span>
-        <span class="l-time-range-input-w end-delta"
-              ng-class="{'hide':(modeModel.selected === 'fixed')}">
-            <mct-control key="'time-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="time-delta-end">
-            </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-end">
-            </mct-control>
-        </span>
-        <input type="submit" class="hidden">
+            <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-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>
+
+            <input type="submit" class="hidden">
         </form>
         <mct-conductor-axis></mct-conductor-axis>
     </div>
@@ -74,7 +78,7 @@
     <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-system-zoom l-row-elem l-flex-row flex-elem">
+    <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">
         <mct-representation
             key="'mode-selector'"
             mct-object="domainObject"
@@ -82,10 +86,10 @@
             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="{
+            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'},