[Frontend] Styling for TOI element in tables

Fixes #933
Fixes #1193
WIP: styling in tabular mostly done, needs more unit testing
TODO: fix hide/show for pinned TOI in plots - don't
show pinned TOI on hover when not .active

Author: charlesh88

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

@@ -22,7 +22,7 @@
 
 .l-toi-holder {
     @include trans-prop-nice($props: opacity, $dur: 200ms);
-    &:not(.pinned) {
+    &:not(.active) {
         opacity: 0; // Hide by default, only show when user hovers over container that implements this element
     }
     .l-toi {
@@ -35,12 +35,46 @@
 }
 
 // TOI in tables
-.mct-table {
-    tr.l-toi-holder {
-        td.l-toi {
-            background-color: $toiColorBg;
-            column-span: 999;
-            font-size: 0;
+@mixin toiIcon() {
+    @extend .ui-symbol;
+    @include transform(translate(-50%, -50%));
+    content: $glyph-icon-clock;
+    display: block;
+    position: absolute;
+    text-shadow: 0 1px 15px black;
+    left: 50%;
+    top: 0;
+    z-index: 2;
+}
+
+.tabular,
+table {
+    tbody, .tbody {
+        tr, .tr {
+            &:hover {
+                td {
+                    border-top: 1px dashed $toiColorBg;
+                    &:first-child:before {
+                        @include toiIcon();
+                        color: $toiColorFg;
+                    }
+                }
+            }
+            &.l-toi.pinned {
+                td {
+                    border-top: 1px solid $toiColorBgPinned;
+                    &:first-child:before {
+                        @include toiIcon();
+                        color: $toiColorBgPinned;
+                    }
+                }
+                &:hover {
+                    td:first-child:before {
+                        content: $glyph-icon-x-in-circle;
+                        cursor: pointer;
+                    }
+                }
+            }
         }
     }
 }
@@ -49,7 +83,7 @@
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {
         &:hover {
-            .l-toi-holder {
+            .l-toi-holder:not(.active) {
                 opacity: 1;
             }
         }

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

@@ -51,11 +51,11 @@ table {
 
 	tbody, .tbody {
 		display: table-row-group;
-		tr, .tr {
+/*		tr, .tr {
 			&:hover {
 				background: rgba($colorTabBodyFg, 0.1);
 			}
-		}
+		}*/
 	}
 	tr, .tr {
 		display: table-row;
@@ -99,7 +99,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $colorTabBorder;
+			border-top: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;

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

@@ -164,11 +164,11 @@ $shdwItemText: rgba(black, 0.1) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
-$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBorder: pullForward($colorBodyBg, 5%);
 $colorTabBodyBg: darken($colorBodyBg, 10%);
 $colorTabBodyFg: lighten($colorTabBodyBg, 40%);
-$colorTabHeaderBg: rgba(white, 0.1); // lighten($colorBodyBg, 10%);
-$colorTabHeaderFg: $colorBodyFg; //lighten($colorTabHeaderBg, 40%);
+$colorTabHeaderBg: rgba(white, 0.1);
+$colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 
 // Plot

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

@@ -79,7 +79,7 @@
             <div class="gl-plot-wrapper-display-area-and-x-axis">
                 <!-- TOI element -->
                 <div class="l-toi-holder pinned"
-                     ng-class="{ active: true }"
+                     ng-class="{ active: false }"
                      style="left: 70%">
                     <!-- Need text val at bottom, plus vertical line -->
                     <div class="l-toi-val l-flex-row">

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

@@ -48,7 +48,6 @@
                 </th>
             </tr>
         </thead>
-
         <tbody>
             <tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
                 ng-style="{
@@ -63,9 +62,6 @@
                     {{ visibleRow.contents[header].text }}
                 </td>
             </tr>
-        <tr class="l-toi-holder">
-            <td class="l-toi"></td>
-        </tr>
         </tbody>
     </table>
 </div>