[Frontend] Styling for TC's TOI element

Fixes #933
Fixes #1193
TOI in TC done for now.

Author: charlesh88

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

@@ -2,4 +2,6 @@ $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization,
 $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
 $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
 $timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
-$timeCondAxisLROffset: (5px, 5px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
+$timeCondAxisLROffset: (6px, 6px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
+$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
+$timeCondTOIValOffset: 0px;

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -255,15 +255,16 @@
         $linesVOffset: 2px;
         @include transform(translateX(-50%));
         top: 0px; bottom: 0px;
-        width: $r2H;
+        width: $timeCondTOIIconD;
         left: auto; right: auto;
         z-index: 1;
         &:before,
         &:after {
             // Vertical lines
             content: '';
             background-color: $c;
-            left: 50%; height: 35%; width: 1px;
+            left: 50%;
+            height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; width: 1px;
             z-index: 0;
         }
 
@@ -278,7 +279,7 @@
         }
 
         .l-toi {
-            $d: $r2H * 0.65;
+            $d: $timeCondTOIIconD; //$r2H * 0.65;
             @include transform(translate(-50%, -50%));
             color: $c;
             font-size: $d;
@@ -294,15 +295,38 @@
             }
         }
 
+        .l-toi-val {
+            @include transform(translateY(-50%));
+            display: none; // Only show when TOI is active
+            font-size: 0.7rem;
+            position: absolute;
+            top: 50%;
+            white-space: nowrap;
+            right: $timeCondTOIIconD + $interiorMarginSm;
+        }
+
+        &.val-to-right {
+            .l-toi-val {
+                right: auto;
+                left: $timeCondTOIIconD + $interiorMarginSm;
+            }
+        }
+
+        &.s-status-active {
+            .l-toi-val {
+                display: block;
+            }
+        }
+
         &:hover {
             &:before,
             &:after {
                 background-color: $cHov !important;
             }
-            .l-toi {
+            .l-toi,
+            .l-toi-val {
                 color: $cHov !important;
             }
-
         }
     }
 

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

@@ -82,9 +82,13 @@
         <div class="l-data-visualization-holder l-row-elem flex-elem">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
+
+                <!-- val-to-right should be applied when l-toi-holder left < 160px -->
                 <div class="l-toi-holder slidable horz"
+                     ng-class="{ 's-status-active':true, 'val-to-right': false }"
                     style="left: 100%">
                     <div class="l-toi s-toi"></div>
+                    <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
                 </div>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>