[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
Tabular styling for TOI;

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

@@ -20,21 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-/*
-Plots
--toi-holder:before vertical line
--toi: glyphs
-
-Tables
-tr: border color
-td:before: glyphs
-
-TC
--toi-holder:before, after: vertical lines
--toi: glyphs
-
-*/
 .l-toi-holder,
 .l-toi-holder:after,
 .l-toi-holder:before,
@@ -44,7 +29,6 @@ TC
     position: absolute;
 }
 
-
 .l-toi-holder {
     $p: 3px;
     @include transform(translateX(-50%));
@@ -52,14 +36,16 @@ TC
     position: absolute;
     top: 0;
     bottom: 0;
-    width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+    width: $toiW;
     &:not(.pinned) {
         opacity: 0;
         pointer-events: none;
     }
+
     &.pinned {
         opacity: 1;
     }
+
     &:before,
     &:after {
         // Vertical lines. TC uses both; plot only uses :before
@@ -73,6 +59,7 @@ TC
         bottom: 0;
         width: 2px;
     }
+
     .l-toi {
         // Holds clock icon an unpin button
         font-size: $toiW;
@@ -91,12 +78,13 @@ TC
 
     .l-toi-val {
         $tbP: 1px;
-        background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
+        background-color: $toiColorBg;
         border-radius: $controlCr;
         box-sizing: content-box;
         display: inline-block;
         color: $toiColorFg;
         font-size: 0.7rem;
+        font-weight: 400;
         height: $toiW;
         right: $toiW + $interiorMarginSm;
         top: 50%;
@@ -120,38 +108,28 @@ table {
     tbody, .tbody {
         tr, .tr {
             &.l-toi.pinned {
-                td {
                 border-top: 1px dashed $toiColorBg;
+                td, .td {
                     &:first-child:before {
-                        @extend .ui-symbol;
+                        @extend .icon-clock;
                         @include transform(translate(-50%, -50%));
-                        content: $glyph-icon-clock;
+                        color: $toiColorBg;
+                        cursor: pointer;
                         display: block;
                         position: absolute;
-                        text-shadow: 0 1px 15px black;
                         left: 50%;
+                        bottom: auto;
+                        text-shadow: 0 1px 15px black;
                         top: 0;
                         z-index: 2;
-                        color: $toiColorBg;
-                    }
-                }
-
-                &.highlight-bottom-edge {
-                    td {
-                        border-bottom: 1px dashed $toiColorBg;
-                        //border-top: 1px solid transparent;
-                        &:first-child:before {
-                            @include transform(translate(-50%, 50%));
-                            top: auto;
-                            bottom: 0;
-                        }
                     }
                 }
 
                 &:hover {
-                    td:first-child:before {
+                    td, .td {
-                        content: $glyph-icon-x-in-circle;
+                        &:first-child:before {
-                        cursor: pointer;
+                            content: $glyph-icon-x-in-circle !important;
+                        }
                     }
                 }
             }
@@ -164,6 +142,7 @@ table {
     .gl-plot-wrapper-display-area-and-x-axis {
         .l-toi-holder {
             bottom: nth($plotDisplayArea, 3) - $interiorMargin;
+            z-index: 3;
             &:after {
                 display: none;
             }
@@ -172,8 +151,6 @@ table {
                 @include transform(translateY(100%));
                 bottom: 0;
             }
-
-            z-index: 3;
         }
     }
 }

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -58,6 +58,7 @@ table {
 		}*/
 	}
 	tr, .tr {
+        border-top: 1px solid $colorTabBorder;
 		display: table-row;
 		&:first-child .td {
 			border-top: none;
@@ -99,7 +100,6 @@ table {
 			}
 		}
 		td, .td {
-			border-top: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;

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

@@ -104,9 +104,9 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: #6b93c6; //$colorBtnMajorBg;
+$toiColorBg: #6b93c6;
 $toiColorFg: #000;
-$toiW: 12px;
+$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;

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

@@ -106,7 +106,7 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Time of Interest
 $toiColorBg: #6b93c6;
 $toiColorFg: #fff;
-$toiW: 12px;
+$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;

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

@@ -244,9 +244,6 @@
             left: nth($timeCondAxisLROffset, 1);
             right: nth($timeCondAxisLROffset, 2);
             &:hover {
-                // 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.hover {
                     opacity: 1;
                 }

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

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