[Frontend] Styling for TOI element

Fixes #933 Fixes #1193 WIP: Markup and CSS for plots and TC near complete; TODO: revised styling in tabular views;
nasa · Oct 3, 2016 · d3bf6c5 · d3bf6c5
1 parent 5cd0c8a
commit d3bf6c5
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 51 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
@@ -38,14 +38,15 @@ TC
 .l-toi-holder,
 .l-toi-holder:after,
 .l-toi-holder:before,
-.l-toi {
+.l-toi,
+.l-toi-val {
     display: block;
     position: absolute;
 }
 
 
 .l-toi-holder {
-    @include trans-prop-nice($props: opacity, $dur: 200ms);
+    $p: 3px;
     @include transform(translateX(-50%));
     color: $toiColorBg;
     position: absolute;
@@ -70,42 +71,45 @@ TC
         position: absolute;
         top: 0;
         bottom: 0;
-        width: 1px;
+        width: 2px;
     }
     .l-toi {
-        @extend .icon-clock;
-        @extend .l-flex-row;
-        text-align: center;
-        //width: $toiW;
-        &:before {
-            // Clock icon
-            @extend .flex-elem;
-            margin-right: $interiorMarginSm;
-            order: 1;
-        }
-        &:hover {
-            cursor: pointer !important;
-            &:before {
-                // Icon, change to close box
-                color: $colorAlert;
-                content: $glyph-icon-x-in-circle !important;
+        // Holds clock icon an unpin button
+        font-size: $toiW;
+        height: $toiW;
+        width: $toiW;
+        .t-button-unpin {
+            color: $toiColorBg;
+            @extend .icon-clock;
+            &:hover {
+                &:before {
+                    content: $glyph-icon-x-in-circle;
+                }
             }
         }
     }
 
     .l-toi-val {
-        //@extend .flex-elem;
-        //@extend .grows;
+        $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;
-        //right: $toiW + $interiorMargin;
     }
 
     &.val-to-right {
         .l-toi-val {
-            order: 2;
-            //right: auto;
-            //left: $toiW + $interiorMarginSm;
+            right: auto;
+            left: $toiW + $interiorMarginSm;
         }
     }
 }
@@ -159,19 +163,16 @@ table {
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {
         .l-toi-holder {
-            //@include test();
-            bottom: nth($plotDisplayArea, 3);
+            bottom: nth($plotDisplayArea, 3) - $interiorMargin;
             &:after {
                 display: none;
             }
+
             .l-toi {
-                @include test();
                 @include transform(translateY(100%));
                 bottom: 0;
             }
-            //&:hover {
-            //    background-color: rgba($toiColorBgHov, 0.1);
-            //}
+
             z-index: 3;
         }
     }

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Time of Interest
 $toiColorBg: $colorBtnMajorBg;
 $toiColorBgHov: $colorBtnMajorBgHov;
-$toiColorFg: #ccc;
+$toiColorFg: #000;
 $toiColorFgHov: #fff;
 $toiColorBgActive:  lighten($colorKey, 10%);
 $toiColorFgActive: $toiColorFgHov;
-$toiW: 16px;
+$toiW: 12px;
 
 // 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
@@ -106,11 +106,11 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 // Time of Interest
 $toiColorBg: $colorKey;
 $toiColorBgHov: lighten($colorKey, 10%);
-$toiColorFg: #ccc;
+$toiColorFg: #fff;
 $toiColorFgHov: #fff;
 $toiColorBgActive:  lighten($colorKey, 20%);
 $toiColorFgActive: $toiColorFgHov;
-$toiW: 18px;
+$toiW: 12px;
 
 // 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
@@ -289,20 +289,22 @@
         }
 
         .l-toi {
-            $d: $timeCondTOIIconD;
-            @include transform(translate(-50%, -50%));
-            font-size: $d;
-            line-height: $d;
-            left: 50%;
             top: 50%;
-            height: $d;
-            width: $d;
-            z-index: 1;
+            @include transform(translateY(-50%));
+            //$d: $timeCondTOIIconD;
+            //@include transform(translate(-50%, -50%));
+            //font-size: $d;
+            //line-height: $d;
+            //left: 50%;
+            //top: 50%;
+            //height: $d;
+            //width: $d;
+            //z-index: 1;
         }
 
         .l-toi-val {
-            @include transform(translateY(-51%));
-            top: 50%;
+            //@include transform(translateY(-51%));
+            //top: 50%;
         }
     }
 

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -106,7 +106,8 @@
                      ng-click="this.pinned = false"
                     style="left: 70%">
                     <div class="l-toi">
-                        <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
+                        <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
+                        <span class="l-toi-val">21:31:30</span>
                     </div>
                 </div>
             </div>

diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
@@ -78,13 +78,14 @@
             <!-- new wrapper inserted here -->
             <div class="gl-plot-wrapper-display-area-and-x-axis">
                 <!-- TOI element -->
-                <div class="l-toi-holder show-val val-to-right"
-                     ng-class="{ pinned: true }"
+                <div class="l-toi-holder show-val"
+                     ng-class="{ pinned: true, 'val-to-right': true }"
                      style="left: 0%">
                     <!-- Need text val at bottom, plus vertical line -->
-                    <div class="l-toi l-flex-row">
-                    <span class="l-toi-val flex-elem">Z884.92:25:32 52-90-6102</span>
-                    </div>
+                    <span class="l-toi">
+                        <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
+                        <span class="l-toi-val">21:31:30</span>
+                    </span>
                 </div>
 
                 <div class="gl-plot-coords"