From 0cf4c925551f8cb42dc54c1b0206c6c58dd7f962 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 22 Sep 2016 19:15:10 -0700
Subject: [PATCH] [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
---
 .../res/sass/controls/_time-of-interest.scss  | 50 ++++++++++++++++---
 .../general/res/sass/lists/_tabular.scss      |  6 +--
 .../themes/espresso/res/sass/_constants.scss  |  6 +--
 .../features/plot/res/templates/plot.html     |  2 +-
 .../table/res/templates/mct-table.html        |  4 --
 5 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss
index 27d47e62135..5ed7b96b4c0 100644
--- a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss
+++ b/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;
             }
         }
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss
index d68486547ea..1377744fbf4 100644
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/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;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index be7ea7e7f34..7ae71c994ee 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/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
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 5c522a650d3..a41e068c768 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/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">
diff --git a/platform/features/table/res/templates/mct-table.html b/platform/features/table/res/templates/mct-table.html
index 2a36e81ea39..87f6a4ae04a 100644
--- a/platform/features/table/res/templates/mct-table.html
+++ b/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>