[Frontend] Adding resync and dedicated unpin buttons

Fixes #933 Fixes #1193 VERY WIP!
nasa · Oct 13, 2016 · 42acf92 · 42acf92
1 parent 3f0eb0b
commit 42acf92
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 29 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
@@ -36,7 +36,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    width: $toiW;
+    width: $toiH;
     &:not(.pinned) {
         opacity: 0;
         pointer-events: none;
@@ -61,19 +61,58 @@
     }
 
     .l-toi {
-        // Holds clock icon and unpin button
-        font-size: $toiW;
-        height: $toiW;
-        width: $toiW;
-        .t-button-unpin {
+        // Holds clock icon and resync and unpin buttons
+        @include trans-prop-nice($props: width, $dur: 250ms);
+        border-radius: $controlCr;
+        box-sizing: content-box;
+        height: $toiH;
+        left: $toiPadLR * -1;
+        line-height: $toiH;
+        overflow: hidden;
+        padding: $toiPadLR $toiPadLR;
+        font-size: $toiH;
+        width: $toiH;
+        white-space: nowrap;
+        .icon-button {
             color: $toiColorBg;
+        }
+        .t-button-resync {
             @extend .icon-clock;
-            &:hover {
-                &:before {
+            &:hover { color: $toiColorCtrlFg; }
+        }
+        .t-button-unpin {
+            @include trans-prop-nice($props: opacity, $dur: 150ms);
+            @extend .icon-x-in-circle;
+            float: right;
+            opacity: 0;
+
+        }
+        &:hover {
+            // Expand and display controls; clock icon changes to resync
+            background-color: $toiColorBg;
+            cursor: pointer;
+            width: 30px;
+            z-index: 2;
+
+            .icon-button {
+                color: rgba($toiColorCtrlFg, 0.5);
+                opacity: 1;
+                &:hover {
+                    color: $toiColorCtrlFg;
+                }
+                &.t-button-unpin:hover {
                     color: $toiColorBgAlert;
-                    content: $glyph-icon-x-in-circle;
                 }
             }
+
+            .t-button-resync:before {
+                content: $glyph-icon-resync;
+            }
+
+            & + .l-toi-val {
+                // Dim the value to emphasize the controls
+                opacity: 0.5;
+            }
         }
     }
 
@@ -84,26 +123,30 @@
     &.show-val {
         .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: $toiW;
-            right: $toiW + $interiorMarginSm;
+            height: $toiH;
+            right: $toiH + $interiorMarginSm;
             top: 50%;
             @include transform(translateY(-50%));
-            line-height: $toiW;
+            line-height: $toiH;
             padding: $tbP $p;
             white-space: nowrap;
+            &:hover {
+                //opacity: 1;
+            }
         }
 
         &.val-to-right {
             .l-toi-val {
                 right: auto;
-                left: $toiW + $interiorMarginSm;
+                left: $toiH + $interiorMarginSm;
             }
         }
     }
@@ -138,8 +181,8 @@ table {
                             border-radius: 100%;
                             content: '';
                             background: $toiColorBlocker;
-                            height: $toiW + $interiorMargin;
-                            width: $toiW + $interiorMargin;
+                            height: $toiH + $interiorMargin;
+                            width: $toiH + $interiorMargin;
                             z-index: 2;
                         }
                     }
@@ -164,13 +207,22 @@ table {
         .l-toi-holder {
             bottom: nth($plotDisplayArea, 3) - $interiorMargin;
             z-index: 3;
-            &:after {
-                display: none;
+
+            .l-toi,
+            .l-toi-val {
+                @include transform(translateY(100%));
+
             }
 
             .l-toi {
-                @include transform(translateY(100%));
+                bottom: $toiPadLR - 1;
+                z-index: 2;
+            }
+
+            .l-toi-val {
+                top: auto;
                 bottom: 0;
+                z-index: 1;
             }
         }
     }

diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -50,7 +50,7 @@
         // Holds the plot area and the X-axis only
         position: absolute;
         top: nth($plotDisplayArea, 1);
-        right: nth($plotDisplayArea, 2) + $toiW / 2;
+        right: nth($plotDisplayArea, 2) + $toiH / 2;
         bottom: 0;
         left: nth($plotDisplayArea, 4);
 

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -107,8 +107,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 $toiColorBg: #6b93c6;
 $toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #000;
-$toiColorBgAlert: #cf644a; // $colorFormInvalid;
-$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+$toiColorCtrlFg: #fff;
+$toiColorBgAlert: #cf2a12; // $colorFormInvalid;
+$toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+$toiPadLR: 5px;
 
 // 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
@@ -107,8 +107,10 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 $toiColorBg: #6b93c6;
 $toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
 $toiColorFg: #fff;
+$toiColorCtrlFg: #fff;
 $toiColorBgAlert: #a7292a; // $colorFormInvalid;
-$toiW: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+$toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+$toiPadLR: 2px;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #fff;

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
@@ -215,6 +215,7 @@
     }
     .l-data-visualization-holder {
         height: $r2H;
+        z-index: 2; // Must lift above ticks and inputs
 
         .l-page-button,
         .l-data-visualization {
@@ -283,8 +284,11 @@
         }
 
         .l-toi {
+            //height: $r2H;
+            //line-height: $r2H;
             top: 50%;
             @include transform(translateY(-50%));
+            @include transform-origin(left center);
         }
     }
 

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -105,10 +105,12 @@
                      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"
+                        <a class="t-button-unpin icon-button" title="Unset Time of Interest"
                            ng-click="toi.dismiss()"></a>
-                        <span class="l-toi-val">{{toi.toiText}}</span>
+                        <a class="t-button-resync icon-button" title="Re-sync Time of Interest"
+                           ng-click="toi.resync()"></a>
                     </div>
+                    <span class="l-toi-val">{{toi.toiText}}</span>
                 </div>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>

diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
@@ -74,13 +74,14 @@
                 <!-- TOI element. val-to-right should be true when 'left' is < 150px -->
                 <div class="l-toi-holder show-val"
                      ng-class="{ pinned: false, 'val-to-right': true }"
-                     style="left: 0%">
+                     style="left: 20%">
                     <span class="l-toi">
-                        <a class="t-button-unpin icon-button"
-                           title="Unset Time of Interest"
-                           ng-click="dummyUnpin()"></a>
-                        <span class="l-toi-val">21:31:30</span>
+                        <a class="t-button-unpin icon-button" title="Unset Time of Interest"
+                           ng-click="toi.dismiss()"></a>
+                        <a class="t-button-resync icon-button" title="Re-sync Time of Interest"
+                           ng-click="toi.resync()"></a>
                     </span>
+                    <span class="l-toi-val">21:31:30</span>
                 </div>
 
                 <div class="gl-plot-coords"