alt-click to select TOI from table

nasa · Oct 6, 2016 · dfbbc3b · dfbbc3b
2 parents 430645b + 47a0aba
commit dfbbc3b
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 174 deletions.
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
@@ -75,7 +75,7 @@ $treeContextTriggerW: 20px;
 /*************** Tabular */
 $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 3px;
+$tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;

diff --git a/platform/commonUI/general/res/sass/controls/_time-of-interest.scss b/platform/commonUI/general/res/sass/controls/_time-of-interest.scss
@@ -20,21 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-/*
-Plots
--toi-holder:before vertical line
--toi: glyphs
-
-Tables
-tr: border color
-td:before: glyphs
-
-TC
--toi-holder:before, after: vertical lines
--toi: glyphs
-
-*/
 .l-toi-holder,
 .l-toi-holder:after,
 .l-toi-holder:before,
@@ -44,22 +29,23 @@ TC
     position: absolute;
 }
 
-
 .l-toi-holder {
     $p: 3px;
     @include transform(translateX(-50%));
     color: $toiColorBg;
     position: absolute;
     top: 0;
     bottom: 0;
-    width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+    width: $toiW;
     &:not(.pinned) {
         opacity: 0;
         pointer-events: none;
     }
+
     &.pinned {
         opacity: 1;
     }
+
     &:before,
     &:after {
         // Vertical lines. TC uses both; plot only uses :before
@@ -73,8 +59,9 @@ TC
         bottom: 0;
         width: 2px;
     }
+
     .l-toi {
-        // Holds clock icon an unpin button
+        // Holds clock icon and unpin button
         font-size: $toiW;
         height: $toiW;
         width: $toiW;
@@ -83,33 +70,41 @@ TC
             @extend .icon-clock;
             &:hover {
                 &:before {
+                    color: $toiColorBgAlert;
                     content: $glyph-icon-x-in-circle;
                 }
             }
         }
     }
 
     .l-toi-val {
-        $tbP: 1px;
-        background-color: $toiColorBg; //rgba($toiColorBg, 0.8);
-        border-radius: $controlCr;
-        box-sizing: content-box;
-        display: inline-block;
-        color: $toiColorFg;
-        font-size: 0.7rem;
-        height: $toiW;
-        right: $toiW + $interiorMarginSm;
-        top: 50%;
-        @include transform(translateY(-50%));
-        line-height: $toiW;
-        padding: $tbP $p;
-        white-space: nowrap;
+        display: none; // Hide by default; see .show-val below
     }
 
-    &.val-to-right {
+    &.show-val {
         .l-toi-val {
-            right: auto;
-            left: $toiW + $interiorMarginSm;
+            $tbP: 1px;
+            background-color: $toiColorBg;
+            border-radius: $controlCr;
+            box-sizing: content-box;
+            color: $toiColorFg;
+            display: inline-block;
+            font-size: 0.7rem;
+            font-weight: 400;
+            height: $toiW;
+            right: $toiW + $interiorMarginSm;
+            top: 50%;
+            @include transform(translateY(-50%));
+            line-height: $toiW;
+            padding: $tbP $p;
+            white-space: nowrap;
+        }
+
+        &.val-to-right {
+            .l-toi-val {
+                right: auto;
+                left: $toiW + $interiorMarginSm;
+            }
         }
     }
 }
@@ -120,38 +115,42 @@ table {
     tbody, .tbody {
         tr, .tr {
             &.l-toi.pinned {
-                td {
-                    border-top: 1px dashed $toiColorBg;
-                    &:first-child:before {
-                        @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;
-                        color: $toiColorBg;
-                    }
-                }
+                border-top: 1px dashed $toiColorBg;
+                td, .td {
+                    &:first-child {
+                        &:before,
+                        &:after {
+                            @include transform(translate(-50%, -50%));
+                            display: block;
+                            position: absolute;
+                            left: 50%;
+                            bottom: auto;
+                            top: 0;
 
-                &.highlight-bottom-edge {
-                    td {
-                        border-bottom: 1px dashed $toiColorBg;
-                        //border-top: 1px solid transparent;
-                        &:first-child:before {
-                            @include transform(translate(-50%, 50%));
-                            top: auto;
-                            bottom: 0;
+                        }
+                        &:before {
+                            @extend .icon-clock;
+                            color: $toiColorBg;
+                            cursor: pointer;
+                            z-index: 3;
+                        }
+                        &:after {
+                            border-radius: 100%;
+                            content: '';
+                            background: $toiColorBlocker;
+                            height: $toiW + $interiorMargin;
+                            width: $toiW + $interiorMargin;
+                            z-index: 2;
                         }
                     }
                 }
 
                 &:hover {
-                    td:first-child:before {
-                        content: $glyph-icon-x-in-circle;
-                        cursor: pointer;
+                    td, .td {
+                        &:first-child:before {
+                            color: $toiColorBgAlert;
+                            content: $glyph-icon-x-in-circle !important;
+                        }
                     }
                 }
             }
@@ -164,6 +163,7 @@ table {
     .gl-plot-wrapper-display-area-and-x-axis {
         .l-toi-holder {
             bottom: nth($plotDisplayArea, 3) - $interiorMargin;
+            z-index: 3;
             &:after {
                 display: none;
             }
@@ -172,8 +172,6 @@ table {
                 @include transform(translateY(100%));
                 bottom: 0;
             }
-
-            z-index: 3;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -51,13 +51,9 @@ table {
 
 	tbody, .tbody {
 		display: table-row-group;
-/*		tr, .tr {
-			&:hover {
-				background: rgba($colorTabBodyFg, 0.1);
-			}
-		}*/
 	}
 	tr, .tr {
+        border-top: 1px solid $colorTabBorder;
 		display: table-row;
 		&:first-child .td {
 			border-top: none;
@@ -71,11 +67,12 @@ table {
 		}
 		th, .th, td, .td {
 			display: table-cell;
+            font-size: 0.7rem;
 		}
 		th, .th {
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
-			padding: $tabularTdPadLR $tabularTdPadLR;
+			padding: $tabularTdPadTB $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
 			&:first-child {
@@ -99,7 +96,6 @@ table {
 			}
 		}
 		td, .td {
-			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
@@ -104,9 +104,11 @@ $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
-$toiColorBg: #6b93c6; //$colorBtnMajorBg;
+$toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #000;
-$toiW: 12px;
+$toiColorBgAlert: #cf644a; // $colorFormInvalid;
+$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;

diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -105,8 +105,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Time of Interest
 $toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #fff;
-$toiW: 12px;
+$toiColorBgAlert: #a7292a; // $colorFormInvalid;
+$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;

diff --git a/platform/features/conductor-v2/conductor/bundle.js b/platform/features/conductor-v2/conductor/bundle.js
@@ -91,7 +91,7 @@ define([
                         "$scope",
                         "timeConductor",
                         "timeConductorViewService",
-                        "$timeout"
+                        "formatService"
                     ]
                 }
             ],

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
@@ -244,11 +244,6 @@
             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.
-
-                // AH - not any more it doesn't?
-                //cursor: none;
                 .l-toi-holder.hover {
                     opacity: 1;
                 }

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -100,15 +100,13 @@
              ng-click="toi.click($event)">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
-                <!-- Note:
-                - val-to-right should be applied when l-toi-holder left < 160px
-                -->
-                <div class="l-toi-holder"
-                     ng-class="{ 'pinned': toi.pinned, 'val-to-right': false }"
+                <!-- Note: - val-to-right should be applied when l-toi-holder left < 150px -->
+                <div class="l-toi-holder show-val"
+                     ng-class="{ 'pinned': toi.pinned, 'val-to-right': toi.left < 20 }"
                      ng-style="{'left': toi.left + '%'}">
                     <div class="l-toi">
                         <a class="t-button-unpin icon-button" ng-click="toi.pinned = false"></a>
-                        <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
+                        <span class="l-toi-val">{{toi.toiText}}</span>
                     </div>
                 </div>
             </div>

diff --git a/platform/features/conductor-v2/conductor/src/TimeConductor.js b/platform/features/conductor-v2/conductor/src/TimeConductor.js
@@ -123,6 +123,12 @@ define(['EventEmitter'], function (EventEmitter) {
              * @property {TimeConductorBounds} bounds
              */
             this.emit('bounds', this.boundsVal);
+
+            // If a bounds change results in a TOI outside of the current
+            // bounds, unset it
+            if (this.toi < newBounds.start || this.toi > newBounds.end) {
+                this.timeOfInterest(undefined);
+            }
         }
         //Return a copy to prevent direct mutation of time conductor bounds.
         return JSON.parse(JSON.stringify(this.boundsVal));
@@ -158,17 +164,21 @@ define(['EventEmitter'], function (EventEmitter) {
     /**
      * Get or set the Time of Interest. The Time of Interest is the temporal
      * focus of the current view. It can be manipulated by the user from the
-     * time conductor or from other views.
+     * time conductor or from other views. The time of interest can
+     * effectively be unset by assigning a value of 'undefined'.
      * @fires TimeConductor#timeOfInterest
-     * @param newTOI
-     * @returns {number} the current time of interest
+     * @param {number | undefined} newTOI A new time of interest, represented
+     * as a
+     * number that is valid in the current time system.
+     * @returns {number | undefined} the current time of interest
      */
     TimeConductor.prototype.timeOfInterest = function (newTOI) {
         if (arguments.length > 0) {
             this.toi = newTOI;
             /**
-             * @event TimeConductor#timeOfInterest The Time of Interest has moved.
-             * @property {number} Current time of interest
+             * @event TimeConductor#timeOfInterest The Time of Interest has
+             * changed.
+             * @property {number | undefined} Current time of interest
              */
             this.emit('timeOfInterest', this.toi);
         }