[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

@@ -29,8 +29,19 @@
         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;
         }
     }
 
@@ -40,29 +51,36 @@
     }
 
     .l-time-conductor-inputs-holder {
-        $inputW: 180px;
+        $trInputW: 180px;
-        $ticksBlockerFadeW: 25px;
+        $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-w {
-            &.start-date {
+                @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
-                @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
+                padding-right: $ticksBlockerFadeW;
             }
-            &.end-date {
+            &.end-w {
-                @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
+                @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;
@@ -74,7 +92,7 @@
         $c: $colorTick;
         height: $r1H;
         mct-conductor-axis {
-            @include transform(translateY(3px));
+            //@include transform(translateY(1px));
             display: block;
             position: relative;
             width: 100%;
@@ -85,13 +103,20 @@
             width: 100%;
             svg {
                 text-rendering: geometricPrecision;
-                width: 100%; height: 100%;
+                width: 100%;
+                height: 100%;
                 > g {
                     font-size: 0.9em;
                 }
-                path {display: none;}
+                path {
-                line {stroke: $c;}
+                    display: none;
-                text { fill: $c; }
+                }
+                line {
+                    stroke: $c;
+                }
+                text {
+                    fill: $c;
+                }
             }
         }
     }
@@ -100,12 +125,8 @@
         height: $r2H;
     }
 
-    .mode-selector .s-menu-btn {
+    .l-time-conductor-controls {
-        &:before {
+        margin-top: $interiorMargin;
-            @extend .ui-symbol;
-            margin-right: $interiorMarginSm;
-            content: $glyphIconFixed;
-        }
     }
 
     // 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,15 +158,36 @@
         }
 
         .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 {
@@ -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,15 +1,11 @@
 <!-- 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-w start-w">
                 <span class="l-time-range-input-w start-date">
                     <mct-control key="'datetime-field'"
                                  structure="{
@@ -20,11 +16,12 @@
                                  ng-mouseup="tcController.changing['start'] = true"
                                  ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
                                  field="'start'"
-                         class="time-range-start">
+                                 class="time-range-input">
                     </mct-control>
                 </span>
-        <span class="l-time-range-input-w start-delta"
+                <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',
@@ -34,12 +31,17 @@
                                  ng-mouseup="tcController.changing['startDelta'] = true"
                                  ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
                                  field="'startDelta'"
-                         class="time-delta-start">
+                                 class="hrs-min-input">
                     </mct-control>
                 </span>
-        <span class="l-time-range-input-w end-delta"
+            </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="'time-field'"
+                    +
+                    <mct-control key="'datetime-field'"
                                  structure="{
                                 format: 'duration',
                                 validate: tcController.validateEndDelta
@@ -48,7 +50,7 @@
                                  ng-mouseup="tcController.changing['endDelta'] = true"
                                  ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
                                  field="'endDelta'"
-                         class="time-delta-end">
+                                 class="hrs-min-input">
                     </mct-control>
                 </span>
                 <span class="l-time-range-input-w end-date"
@@ -62,9 +64,11 @@
                                  ng-mouseup="tcController.changing['end'] = true"
                                  ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
                                  field="'end'"
-                         class="time-range-end">
+                                 class="time-range-input">
                     </mct-control>
                 </span>
+            </span>
+
             <input type="submit" class="hidden">
         </form>
         <mct-conductor-axis></mct-conductor-axis>
@@ -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"