[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
Finalized TOI in plots, table and TC

Author: charlesh88

platform/commonUI/general/res/sass/controls/_time-of-interest.scss

@@ -83,7 +83,7 @@ table {
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {
         &:hover {
-            .l-toi-holder:not(.active) {
+            .l-toi-holder.hover {
                 opacity: 1;
             }
         }

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

@@ -247,10 +247,10 @@
                 // Hide the cursor, because the TOI element essentially "becomes" the cursor
                 // when the user is hovering over the visualization area.
                 cursor: none;
-                .l-toi-holder {
+                .l-toi-holder.hover {
                     opacity: 1;
                 }
-                .l-toi-holder.pinned {
+                .l-toi-holder.pinned.active {
                     opacity: 0.4;
                     .l-toi-val {
                         pointer-events: none;
@@ -341,7 +341,7 @@
         }
 
         &.pinned {
-            opacity: 1;
+            //opacity: 1;
             z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
             &.active {
                 opacity: 1;

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

@@ -103,15 +103,14 @@
                 - The pinned TOI must precede the non-pinned version in markup,
                 so that we can hide the non-pinned TOI when hovering over the pinned one.
                 -->
-                <div class="l-toi-holder horz pinned"
-                     ng-show="true"
+                <div class="l-toi-holder pinned"
                      ng-class="{ 'active': false, 'val-to-right': true }"
                      ng-click="this.active = false"
                     style="left: 5%">
                     <div class="l-toi s-toi"></div>
                     <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
                 </div>
-                <div class="l-toi-holder horz"
+                <div class="l-toi-holder hover"
                      ng-class="{ 'val-to-right': false }"
                      style="left: 75%">
                     <div class="l-toi s-toi"></div>

platform/features/plot/res/templates/plot.html

@@ -87,7 +87,7 @@
                         <a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
                     </div>
                 </div>
-                <div class="l-toi-holder"
+                <div class="l-toi-holder hover"
                     style="left: 20%">
                     <!-- Need text val at bottom, plus vertical line -->
                     <div class="l-toi-val l-flex-row">

platform/features/table/res/templates/mct-table.html

@@ -50,6 +50,7 @@
         </thead>
         <tbody>
             <tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
+                ng-class="{ 'l-toi active pinned': false }"
                 ng-style="{
                     top: visibleRow.offsetY + 'px',
                 }">