[Frontend] Styling for TOI element

Fixes #933
Fixes #1193
WIP: Markup and CSS revisions for updated UX approach

Author: charlesh88

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

@@ -22,15 +22,43 @@
 
 .l-toi-holder {
     @include trans-prop-nice($props: opacity, $dur: 200ms);
-    &:not(.active) {
-        opacity: 0; // Hide by default, only show when user hovers over container that implements this element
+    &:not(.pinned) {
+        opacity: 0;
+    }
+    &.pinned {
+        opacity: 1;
     }
     .l-toi {
-
+        position: absolute;
+        &.block {
+            $d: $toiW;
+            background-color: $toiColorBg;
+            border-radius: $controlCr;
+            color: $toiColorFg;
+            width: $d;
+            height: $d;
+            line-height: $d;
+            text-align: center;
+            &:hover {
+                background-color: $colorAlert !important;
+                color: #fff !important;
+            }
+        }
+        &:hover {
+            cursor: pointer !important;
+            &:before {
+                // Icon, change to close box
+                content: $glyph-icon-x-in-circle !important;
+            }
+        }
     }
-    .l-toi-val {
-        color: $toiColorFg;
-
+    &:hover {
+        $c: $toiColorBgHov;
+        cursor: ew-resize;
+        .l-toi.block {
+            background-color: $c !important;
+            color: $toiColorFgHov;
+        }
     }
 }
 
@@ -62,10 +90,10 @@ table {
             }
             &.l-toi.pinned {
                 td {
-                    border-top: 1px solid $toiColorBgPinned;
+                    border-top: 1px solid $toiColorBg;
                     &:first-child:before {
                         @include toiIcon();
-                        color: $toiColorBgPinned;
+                        color: $toiColorFg;
                     }
                 }
                 &:hover {
@@ -82,20 +110,13 @@ table {
 // TOI in plots
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {
-        &:hover {
-            .l-toi-holder.hover {
-                opacity: 1;
-            }
-        }
         .l-toi-holder {
-            $toiColorBgPinned: rgba($toiColorBgPinned, 0.4);
-            pointer-events: none;
+            //@include test();
+            @include transform(translateX(-50%));
             position: absolute;
             top: 0;
-            bottom: nth($plotDisplayArea, 3); // Position of element when TOI is pinned
-            min-width: 50px;
-            max-width: 150px;
-            width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+            bottom: nth($plotDisplayArea, 3);
+            width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
             &:before {
                 // Vertical line
                 border-left: 1px dashed $toiColorBg;
@@ -107,44 +128,15 @@ table {
                 bottom: 0;
                 width: 1px;
             }
-            .l-toi-val {
-                background-color: $toiColorBg;
-                box-sizing: border-box;
-                padding: $interiorMarginSm $interiorMarginSm;
-                position: absolute;
-                text-align: center;
-                width: 100%;
-                bottom: -2px;
-                border-radius: $controlCr;
-                .val {
-                    @include reverseEllipsis();
-                }
-                .t-unpin-button {
-                    margin-left: $interiorMarginSm;
-                    pointer-events: auto;
-                }
+            .l-toi {
+                @extend .icon-clock;
+                @include transform(translateY(100%));
+                bottom: 0;
             }
-
-            &.pinned {
+            &:hover {
+                background-color: rgba($toiColorBgHov, 0.1);
                 &:before {
-                    border-left-color: $toiColorBgPinned;
-                    border-left-style: solid;
-                }
-                .l-toi-val {
-                    background-color: $toiColorBgPinned;
-                    border-radius: 0;
-                    border-top-left-radius: $controlCr;
-                    border-top-right-radius: $controlCr;
-                    bottom: 0px;
-                }
-            }
-
-            &:not(.pinned) {
-                .l-toi-val {
-                    @include transform(translateY(100%)); // Position of element when TOI is visible but not pinned
-                }
-                .t-unpin-button {
-                    display: none;
+                    border-left-color: $toiColorBgHov !important;
                 }
             }
             z-index: 3;

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -48,10 +48,9 @@
 
     .gl-plot-wrapper-display-area-and-x-axis {
         // Holds the plot area and the X-axis only
-        //@include test(blue, 0.1);
         position: absolute;
         top: nth($plotDisplayArea, 1);
-        right: nth($plotDisplayArea, 2);
+        right: nth($plotDisplayArea, 2) + $toiW / 2;
         bottom: 0;
         left: nth($plotDisplayArea, 4);
 

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

@@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: #666;
-$toiColorBgHov: #999;
-$toiColorFg: #fff;
-$toiColorBgPinned: $colorKey;
-$toiColorFgPinned: #fff;
+$toiColorBg: $colorBtnMajorBg;
+$toiColorBgHov: $colorBtnMajorBgHov;
+$toiColorFg: #ccc;
+$toiColorFgHov: #fff;
+$toiColorBgActive:  lighten($colorKey, 10%);
+$toiColorFgActive: $toiColorFgHov;
+$toiW: 18px;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;

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

@@ -104,11 +104,13 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: #666;
-$toiColorBgHov: #333;
-$toiColorFg: #fff;
-$toiColorBgPinned: $colorKey;
-$toiColorFgPinned: #fff;
+$toiColorBg: $colorKey;
+$toiColorBgHov: lighten($colorKey, 10%);
+$toiColorFg: #ccc;
+$toiColorFgHov: #fff;
+$toiColorBgActive:  lighten($colorKey, 20%);
+$toiColorFgActive: $toiColorFgHov;
+$toiW: 18px;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;

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

@@ -273,11 +273,11 @@
     .l-toi-holder {
         $c: $colorTimeCondTOIBg;
         $cHov: $toiColorBgHov;
-        $cPinned: rgba($toiColorBgPinned, 0.8);
-        $cPinnedHov: $toiColorBgPinned;
+        //$cPinned: rgba($toiColorBgPinned, 0.8);
+        //$cPinnedHov: $toiColorBgPinned;
         $linesVOffset: 2px;
         @include transform(translateX(-50%));
-        color: $c;
+        //color: $c;
         top: 0px;
         bottom: 0px;
         width: $timeCondTOIIconD;
@@ -288,7 +288,7 @@
         &:after {
             // Vertical lines
             content: '';
-            background-color: $c;
+            //background-color: $c;
             left: 50%;
             height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
             width: 1px;
@@ -340,7 +340,7 @@
             }
         }
 
-        &.pinned {
+       /* &.pinned {
             //opacity: 1;
             z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
             &.active {
@@ -369,7 +369,7 @@
                     content: $glyph-icon-x-in-circle;
                 }
             }
-        }
+        }*/
     }
 
     .l-time-conductor-controls {

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

@@ -100,20 +100,12 @@
             <div class="l-data-visualization">
                 <!-- Note:
                 - val-to-right should be applied when l-toi-holder left < 160px
-                - 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 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 hover"
-                     ng-class="{ 'val-to-right': false }"
-                     style="left: 75%">
-                    <div class="l-toi s-toi"></div>
+                <div class="l-toi-holder"
+                     ng-class="{ 'pinned': true, 'val-to-right': false }"
+                     ng-click="this.pinned = false"
+                    style="left: 100%">
+                    <div class="l-toi"></div>
                     <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
                 </div>
             </div>

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

@@ -78,22 +78,11 @@
             <!-- new wrapper inserted here -->
             <div class="gl-plot-wrapper-display-area-and-x-axis">
                 <!-- TOI element -->
-                <div class="l-toi-holder pinned"
-                     ng-class="{ active: false }"
-                     style="left: 70%">
+                <div class="l-toi-holder"
+                     ng-class="{ pinned: true }"
+                     style="left: 100%">
                     <!-- Need text val at bottom, plus vertical line -->
-                    <div class="l-toi-val l-flex-row">
-                        <span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
-                        <a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
-                    </div>
-                </div>
-                <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">
-                        <span class="val flex-elem grows">Z000.04:45:00 71-90-6102</span>
-                        <a class="s-icon-button icon-x-in-circle t-unpin-button flex-elem"></a>
-                    </div>
+                    <div class="l-toi block"></div>
                 </div>
 
                 <div class="gl-plot-coords"