[Frontend] Styling for TOI element in TC

charlesh88 · charlesh88 · commit 1a93ba2c3d22 · 2016-09-22T15:09:42.000-07:00
Fixes #933 Fixes #1193 Final for now; both types of TOI added to TC markup; Hover behavior; constant values in the right places;
diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -91,8 +91,8 @@
         .l-toi-holder {
             //@include test(green);
             $cBg: $toiColorBg;
-            $cBgPinnedOpacity: 0.3;
-            $cBgPinned: $toiColorBgPinned;
+            $cBgPinnedOpacity: 0.4;
+            $cBgPinned: rgba($toiColorBgPinned, 0.4);
             pointer-events: none;
             position: absolute;
             top: 0;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -107,10 +107,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 $toiColorBg: #666;
 $toiColorBgHov: #999;
 $toiColorFg: #fff;
-$toiColorBgPinned: rgba($colorKey, 0.4);
+$toiColorBgPinned: $colorKey;
 $toiColorFgPinned: #fff;
 
-
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -105,9 +105,9 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
 $toiColorBg: #666;
-$toiColorBgHov: #999;
+$toiColorBgHov: #333;
 $toiColorFg: #fff;
-$toiColorBgPinned: rgba($colorKey, 0.4);
+$toiColorBgPinned: $colorKey;
 $toiColorFgPinned: #fff;
 
 // Status colors, mainly used for messaging and item ancillary symbols
diff --git a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss
@@ -190,8 +190,8 @@
         .l-axis-holder {
             height: $r1H;
             position: absolute;
-            left: nth($timeCondAxisLROffset,1);
-            right: nth($timeCondAxisLROffset,2);
+            left: nth($timeCondAxisLROffset, 1);
+            right: nth($timeCondAxisLROffset, 2);
             svg {
                 text-rendering: geometricPrecision;
                 width: 100%;
@@ -220,16 +220,18 @@
         .l-page-button,
         .l-data-visualization {
             position: absolute;
-            top: 0; bottom: 0;
+            top: 0;
+            bottom: 0;
         }
 
         .l-page-button {
             @if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
                 left: 0;
-                width: nth($timeCondAxisLROffset,1);
+                width: nth($timeCondAxisLROffset, 1);
                 &.align-right {
-                    left: auto; right: 0;
-                    width: nth($timeCondAxisLROffset,2);
+                    left: auto;
+                    right: 0;
+                    width: nth($timeCondAxisLROffset, 2);
                 }
             } @else {
                 // Hide these if the offsets aren't enough
@@ -241,6 +243,21 @@
             background: $colorTimeCondDataVisBg;
             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 {
+                    opacity: 1;
+                }
+                .l-toi-holder.pinned {
+                    opacity: 0.4;
+                    .l-toi-val {
+                        pointer-events: none;
+                        opacity: 0;
+                    }
+                }
+            }
         }
     }
 
@@ -254,44 +271,54 @@
     }
 
     .l-toi-holder {
-        $c: $toiColorBg;
+        $c: $colorTimeCondTOIBg;
         $cHov: $toiColorBgHov;
+        $cPinned: rgba($toiColorBgPinned, 0.8);
+        $cPinnedHov: $toiColorBgPinned;
         $linesVOffset: 2px;
         @include transform(translateX(-50%));
-        top: 0px; bottom: 0px;
+        @include trans-prop-nice($props: opacity, $dur: 200ms);
+        color: $c;
+        opacity: 0; // Hide by default, only show when user hovers over .l-data-visualization
+        top: 0px;
+        bottom: 0px;
         width: $timeCondTOIIconD;
-        left: auto; right: auto;
+        left: auto;
+        right: auto;
         z-index: 1;
         &:before,
         &:after {
             // Vertical lines
             content: '';
             background-color: $c;
             left: 50%;
-            height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset; width: 1px;
+            height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
+            width: 1px;
             z-index: 0;
         }
 
         &:before {
             @include transform(translate(-50%, $linesVOffset * -1));
-            top: 0px; bottom: auto;
+            top: 0px;
+            bottom: auto;
         }
 
         &:after {
             @include transform(translate(-50%, $linesVOffset));
-            top: auto; bottom: 0px;
+            top: auto;
+            bottom: 0px;
         }
 
         .l-toi {
             $d: $timeCondTOIIconD;
             @include transform(translate(-50%, -50%));
-            color: $c;
             font-size: $d;
             line-height: $d;
             text-align: center;
             left: 50%;
             top: 50%;
-            height: $d; width: $d;
+            height: $d;
+            width: $d;
             z-index: 1;
             &:before {
                 @extend .ui-symbol;
@@ -301,7 +328,6 @@
 
         .l-toi-val {
             @include transform(translateY(-51%));
-            display: none; // Only show when TOI is active
             font-size: 0.7rem;
             position: absolute;
             top: 50%;
@@ -316,20 +342,34 @@
             }
         }
 
-        &.s-status-active {
-            .l-toi-val {
-                display: block;
+        &.pinned {
+            opacity: 1;
+            z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
+            &.active {
+                opacity: 1;
             }
-        }
-
-        &:hover {
             &:before,
             &:after {
-                background-color: $cHov !important;
+                // Vertical lines
+                background-color: $cPinned;
             }
-            .l-toi,
-            .l-toi-val {
-                color: $cHov !important;
+            color: $cPinned;
+
+            &:hover {
+                opacity: 1 !important;
+                + .l-toi-holder {
+                    // Important note: the non-pinned TOI element must come after the pinned version in markup.
+                    opacity: 0;
+
+                }
+            }
+
+            .l-toi:hover {
+                color: $cPinnedHov;
+                cursor: pointer;
+                &:before {
+                    content: $glyph-icon-x-in-circle;
+                }
             }
         }
     }
@@ -356,7 +396,9 @@
     &.realtime-mode,
     &.lad-mode {
         .time-conductor-icon {
-            &:before { color: $colorTimeCondKeyBg; }
+            &:before {
+                color: $colorTimeCondKeyBg;
+            }
             div[class*="hand"] {
                 @include animation-name(clock-hands);
                 &:before {
@@ -398,13 +440,15 @@
 
         .l-data-visualization {
             background: $colorTimeCondDataVisRtBg !important;
-            //height: $r2HRt;
         }
 
         .mode-selector .s-menu-button {
             $fg: $colorTimeCondKeyFg;
             @include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg);
-            &:before { color: $fg !important; };
+            &:before {
+                color: $fg !important;
+            }
+        ;
             color: $fg !important;
         }
     }
@@ -466,7 +510,9 @@
 /******************************************************************** MOBILE */
 
 @include phoneandtablet {
-    .l-time-conductor-holder { min-width: 0 !important; }
+    .l-time-conductor-holder {
+        min-width: 0 !important;
+    }
     .super-menu.mini {
         width: 200px;
         height: 100px;
diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss
@@ -34,6 +34,7 @@
 $colorTimeCondTicks: pullForward($colorBodyBg, 30%);
 $colorTimeCondKeyBg: #4e70dc;
 $colorTimeCondKeyFg: #fff;
-$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
+$colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
 $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
+$colorTimeCondTOIBg: lighten($toiColorBg, 20%);
 @import "time-conductor-base";
diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss
@@ -36,4 +36,6 @@ $colorTimeCondKeyBg: #6178dc;
 $colorTimeCondKeyFg: #fff;
 $colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
 $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
+$colorTimeCondTOIBg: darken($toiColorBg, 20%);
+$colorTimeCondTOIBgHov: $toiColorBg;
 @import "time-conductor-base";
diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -98,11 +98,22 @@
         <div class="l-data-visualization-holder l-row-elem flex-elem">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
-
-                <!-- val-to-right should be applied when l-toi-holder left < 160px -->
-                <div class="l-toi-holder slidable horz"
-                     ng-class="{ 's-status-active':true, 'val-to-right': false }"
-                    style="left: 100%">
+                <!-- 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 horz pinned"
+                     ng-show="true"
+                     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 horz"
+                     ng-class="{ 'val-to-right': false }"
+                     style="left: 75%">
                     <div class="l-toi s-toi"></div>
                     <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
                 </div>
