[Frontend] Refactor TOI element

Fixes #933 Fixes #1193 WIP; TOI as mct-include; layout uses flex-box; preparing to move TOI sass into conductor-v2 directory;
nasa · Oct 13, 2016 · 1a53430 · 1a53430
1 parent 42acf92
commit 1a53430
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 107 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
@@ -23,8 +23,7 @@
 .l-toi-holder,
 .l-toi-holder:after,
 .l-toi-holder:before,
-.l-toi,
-.l-toi-val {
+.l-toi {
     display: block;
     position: absolute;
 }
@@ -58,21 +57,66 @@
         top: 0;
         bottom: 0;
         width: 2px;
+        z-index: 2;
     }
 
     .l-toi {
-        // Holds clock icon and resync and unpin buttons
-        @include trans-prop-nice($props: width, $dur: 250ms);
-        border-radius: $controlCr;
+        // Holds buttons and val. Acts as a blocking element.
+        @extend .l-flex-row;
+        @include transform(translateY(-50%));
+        background: blue; // $toiColorBlocker;
+        align-items: center;
         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;
+        top: 50%;
+        padding: $toiPadLR $toiPadLR $toiPadLR 0;
+        z-index: 1;
+
+        .l-toi-buttons {
+            @extend .flex-elem;
+            @include trans-prop-nice($props: width, $dur: 250ms);
+            border-radius: $controlCr;
+            box-sizing: content-box;
+            font-size: $toiH;
+            height: 100%;
+            line-height: $toiH;
+            padding: $toiPadLR $toiPadLR;
+            overflow: hidden;
+            white-space: nowrap;
+            width: $toiH;
+
+            &: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;
+                    }
+                }
+
+                .t-button-resync:before {
+                    content: $glyph-icon-resync;
+                }
+
+                & + .l-toi-val {
+                    // Dim the value to emphasize the controls
+                    opacity: 0.5;
+                }
+            }
+        }
+        // Holds clock icon and resync and unpin buttons
+        //left: $toiPadLR * -1;
+
         .icon-button {
             color: $toiColorBg;
         }
@@ -85,34 +129,6 @@
             @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;
-                }
-            }
-
-            .t-button-resync:before {
-                content: $glyph-icon-resync;
-            }
-
-            & + .l-toi-val {
-                // Dim the value to emphasize the controls
-                opacity: 0.5;
-            }
         }
     }
 
@@ -123,6 +139,7 @@
     &.show-val {
         .l-toi-val {
             $tbP: 1px;
+            @extend .flex-elem;
             @include trans-prop-nice($props: opacity, $dur: 150ms);
             background-color: $toiColorBg;
             border-radius: $controlCr;
@@ -132,9 +149,9 @@
             font-size: 0.7rem;
             font-weight: 400;
             height: $toiH;
-            right: $toiH + $interiorMarginSm;
-            top: 50%;
-            @include transform(translateY(-50%));
+            //right: $toiH + $interiorMarginSm;
+            //top: 50%;
+            //@include transform(translateY(-50%));
             line-height: $toiH;
             padding: $tbP $p;
             white-space: nowrap;
@@ -210,20 +227,45 @@ table {
 
             .l-toi,
             .l-toi-val {
-                @include transform(translateY(100%));
+                //@include transform(translateY(100%));
 
             }
 
             .l-toi {
-                bottom: $toiPadLR - 1;
-                z-index: 2;
+                //bottom: $toiPadLR - 1;
+                //z-index: 2;
             }
 
             .l-toi-val {
-                top: auto;
-                bottom: 0;
-                z-index: 1;
+                //top: auto;
+                //bottom: 0;
+                //z-index: 1;
             }
         }
     }
+}
+
+// TOI in Time Conductor
+.l-time-conductor {
+    .l-toi-holder {
+        $linesVOffset: 2px;
+        &:before,
+        &:after {
+            // Vertical lines
+            border-left-style: solid;
+            //height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
+        }
+
+        &:before {
+            @include transform(translate(-50%, $linesVOffset * -1));
+            top: 0px;
+            bottom: auto;
+        }
+
+        &:after {
+            @include transform(translate(-50%, $linesVOffset));
+            top: auto;
+            bottom: 0px;
+        }
+    }
 }
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -110,7 +110,7 @@ $toiColorFg: #000;
 $toiColorCtrlFg: #fff;
 $toiColorBgAlert: #cf2a12; // $colorFormInvalid;
 $toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
-$toiPadLR: 5px;
+$toiPadLR: 4px;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;

diff --git a/platform/features/conductor-v2/conductor/bundle.js b/platform/features/conductor-v2/conductor/bundle.js
@@ -31,6 +31,7 @@ define([
     "text!./res/templates/time-conductor.html",
     "text!./res/templates/mode-selector/mode-selector.html",
     "text!./res/templates/mode-selector/mode-menu.html",
+    "text!./res/templates/time-of-interest.html",
     "legacyRegistry"
 ], function (
     TimeConductorViewService,
@@ -43,6 +44,7 @@ define([
     timeConductorTemplate,
     modeSelectorTemplate,
     modeMenuTemplate,
+    timeOfInterest,
     legacyRegistry
 ) {
 
@@ -127,6 +129,10 @@ define([
                 {
                     "key": "mode-selector",
                     "template": modeSelectorTemplate
+                },
+                {
+                    "key": "time-of-interest",
+                    "template": timeOfInterest
                 }
             ],
             "representations": [

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
@@ -258,40 +258,6 @@
         }
     }
 
-    // Time of Interest control
-    .l-toi-holder {
-        $linesVOffset: 2px;
-        &:before,
-        &:after {
-            // Vertical lines
-            border-left-style: solid;
-            left: 50%;
-            height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
-            width: 1px;
-            z-index: 0;
-        }
-
-        &:before {
-            @include transform(translate(-50%, $linesVOffset * -1));
-            top: 0px;
-            bottom: auto;
-        }
-
-        &:after {
-            @include transform(translate(-50%, $linesVOffset));
-            top: auto;
-            bottom: 0px;
-        }
-
-        .l-toi {
-            //height: $r2H;
-            //line-height: $r2H;
-            top: 50%;
-            @include transform(translateY(-50%));
-            @include transform-origin(left center);
-        }
-    }
-
     .l-time-conductor-controls {
         align-items: center;
         margin-top: $interiorMargin;

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,18 +100,7 @@
              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 < 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" 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>
-                    </div>
-                    <span class="l-toi-val">{{toi.toiText}}</span>
-                </div>
+                <mct-include key="'time-of-interest'"></mct-include>
             </div>
             <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
         </div>

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html b/platform/features/conductor-v2/conductor/res/templates/time-of-interest.html
@@ -0,0 +1,27 @@
+<!-- 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 }"
+     ng-style="{'left': toi.left + '%'}">
+    <div class="l-toi">
+        <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>
+    </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': toi.left < 20 }"
+     ng-style="{'left': 20 + '%'}">
+    <div class="l-toi">
+        <span class="l-toi-buttons">
+            <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">{{toi.toiText}}2016-09-16 21:30:30</span>
+    </div>
+</div>
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
@@ -71,18 +71,7 @@
             </div>
 
             <div class="gl-plot-wrapper-display-area-and-x-axis">
-                <!-- 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: 20%">
-                    <span class="l-toi">
-                        <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>
+                <mct-include key="'time-of-interest'"></mct-include>
 
                 <div class="gl-plot-coords"
                      ng-if="subplot.isHovering() && subplot.getHoverCoordinates()">