[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
WIP: Table TOI element in progress

Author: charlesh88

platform/features/conductor-v2/conductor/res/sass/_time-of-interest.scss

@@ -29,8 +29,6 @@
 
 .l-toi-holder {
     $blockerFadeW: $toiBlockerFadeW;
-    $LROffset: $blockerFadeW + $toiPad;
-    $p: 3px;
     @include transform(translateX(-50%));
     color: $toiColorBg;
     position: absolute;
@@ -68,9 +66,9 @@
         align-items: center;
         box-sizing: content-box;
         height: $toiH;
-        right: $LROffset * -1;
+        right: $toiPad * -2;
         @include transform(translateY(-50%)); top: 50%;
-        padding: $toiPad $blockerFadeW $toiPad $LROffset;
+        padding: $toiPad;
         z-index: 1;
 
         .l-toi-buttons {
@@ -80,7 +78,7 @@
             font-size: $toiH;
             height: 100%;
             line-height: $toiH;
-            padding: $toiPad $toiPad;
+            padding: $toiPad;
             order: 2;
             overflow: hidden;
             white-space: nowrap;
@@ -91,7 +89,6 @@
                 // Expand and display controls; clock icon changes to resync
                 background-color: $toiColorBg;
                 cursor: pointer;
-                margin-left: $interiorMarginSm;
                 width: 30px;
 
                 .icon-button {
@@ -142,33 +139,36 @@
     .l-toi-val {
         display: none; // Hide by default; see .show-val below
     }
+}
 
-    &.show-val {
-        .l-toi {
-            .l-toi-val {
-                $tbP: 1px;
-                @include trans-prop-nice($props: opacity, $dur: 150ms);
-                background-color: $toiColorBg;
-                border-radius: $controlCr;
-                box-sizing: content-box;
-                color: $toiColorFg;
-                display: inline-block;
-                font-size: 0.7rem;
-                font-weight: 400;
-                height: $toiH;
-                line-height: $toiH;
-                order: 1;
-                padding: $tbP $p;
-                white-space: nowrap;
+.show-val .l-toi-holder {
+    .l-toi {
+        .l-toi-buttons {
+            &:hover {
+                margin-left: $interiorMarginSm;
             }
         }
+        .l-toi-val {
+            @include trans-prop-nice($props: opacity, $dur: 150ms);
+            background-color: $toiColorBg;
+            border-radius: $controlCr;
+            box-sizing: content-box;
+            color: $toiColorFg;
+            display: inline-block;
+            font-size: 0.7rem;
+            font-weight: 400;
+            height: $toiH;
+            line-height: $toiH;
+            order: 1;
+            padding: 1px 3px;
+            white-space: nowrap;
+        }
     }
 
     &.val-to-right {
         .l-toi {
             right: auto;
-            left: $LROffset * -1;
-            padding: $toiPad $LROffset $toiPad $blockerFadeW;
+            left: $toiPad * -2;
 
             .l-toi-buttons {
                 order: 1;
@@ -188,6 +188,36 @@
 
 // TOI in tables
 .tabular,
+table {
+    tbody, .tbody {
+        tr, .tr {
+            &.l-toi-tablerow.pinned {
+                border-top: 1px dashed $toiColorBg;
+                z-index: 1;
+                td, .td {
+                    .l-toi-holder {
+                        //@include test();
+                        //width: 100%;
+                        //z-index: 5;
+                        &:before,
+                        &:after {
+                            display: none;
+                        }
+                        .l-toi {
+                            background: $toiColorBlocker;
+                            padding: $toiPad;
+                            @include transform(translate(-50%, -50%));
+                            left: 50%; right: auto; top: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Old approach
+/*.tabular,
 table {
     tbody, .tbody {
         tr, .tr {
@@ -235,7 +265,7 @@ table {
             }
         }
     }
-}
+}*/
 
 // TOI in plots
 .gl-plot {

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

@@ -100,7 +100,7 @@
              ng-click="toi.click($event)">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
-                <mct-include key="'time-of-interest'"></mct-include>
+                <mct-include key="'time-of-interest'" class="show-val"></mct-include>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
         </div>

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

@@ -1,6 +1,6 @@
-<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
-<div class="l-toi-holder show-val hidden"
-     ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
+<!--
+<div class="l-toi-holder"
+     ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 80 }"
      ng-style="{'left': toi.left + '%'}">
     <div class="l-toi">
         <a class="t-button-unpin icon-button" title="Unset Time of Interest"
@@ -10,11 +10,11 @@
     </div>
     <span class="l-toi-val">{{toi.toiText}}</span>
 </div>
+-->
 
-<!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
-<div class="l-toi-holder show-val"
-     ng-class="{ 'pinned': true, 'val-to-right': false }"
-     ng-style="{'left': 90 + '%'}">
+<div class="l-toi-holder"
+     ng-class="{ 'pinned': true, 'val-to-right': true }"
+     ng-style="{'left': 50 + '%'}">
     <div class="l-flex-row l-toi">
         <span class="flex-elem l-flex-row l-toi-buttons">
             <a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"

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

@@ -71,7 +71,7 @@
             </div>
 
             <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <mct-include key="'time-of-interest'"></mct-include>
+                <mct-include key="'time-of-interest'" class="show-val"></mct-include>
 
                 <div class="gl-plot-coords"
                      ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">

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

@@ -51,21 +51,26 @@
         <tbody>
         <!--ng-class="{ 'l-toi pinned': false }"-->
         <!--ng-click="dummyUnpin()" -->
-            <tr ng-repeat="visibleRow in visibleRows track by visibleRow.rowIndex"
-                ng-class="{ 'l-toi pinned': visibleRow.rowIndex === toiRowIndex }"
+            <tr ng-repeat-start="visibleRow in visibleRows track by visibleRow.rowIndex"
+                ng-if="visibleRow.rowIndex === 10"
+                ng-style="{ top: visibleRow.offsetY + 'px' }"
+                class="l-toi-tablerow pinned">
+                <td colspan="999">
+                    <mct-include key="'time-of-interest'"></mct-include>
+                </td>
+            </tr>
+            <tr ng-repeat-end
                 ng-click="table.onRowClick($event, visibleRow.rowIndex)"
-            ng-style="{
-                top: visibleRow.offsetY + 'px',
-            }">
-            <td ng-repeat="header in displayHeaders"
-                ng-style=" {
-                    width: columnWidths[$index] + 'px',
-                    'max-width': columnWidths[$index] + 'px',
-                }"
-                class="{{visibleRow.contents[header].cssClass}}">
-                {{ visibleRow.contents[header].text }}
-            </td>
-        </tr>
-    </tbody>
-</table>
+                ng-style="{ top: visibleRow.offsetY + 'px' }">
+                <td ng-repeat="header in displayHeaders"
+                    ng-style=" {
+                        width: columnWidths[$index] + 'px',
+                        'max-width': columnWidths[$index] + 'px',
+                    }"
+                    class="{{visibleRow.contents[header].cssClass}}">
+                    {{ visibleRow.contents[header].text }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </div>