[Frontend] Styling for TOI element

Fixes #933 Fixes #1193 WIP: Markup and CSS revisions for updated UX approach; TODO: cosmetic CSS
nasa · Sep 29, 2016 · 22da348 · 22da348
1 parent 99253a5
commit 22da348
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 115 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
@@ -20,44 +20,92 @@
  * 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,
+.l-toi {
+    display: block;
+    position: absolute;
+}
+
+
 .l-toi-holder {
     @include trans-prop-nice($props: opacity, $dur: 200ms);
+    @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
     &:not(.pinned) {
         opacity: 0;
+        pointer-events: none;
     }
     &.pinned {
         opacity: 1;
     }
-    .l-toi {
+    &:before,
+    &:after {
+        // Vertical lines. TC uses both; plot only uses :before
+        border-left: 1px dashed $toiColorBg;
+        box-sizing: border-box;
+        content: '';
+        display: block;
+        left: 50%;
         position: absolute;
-        &.block {
-            $d: $toiW;
-            background-color: $toiColorBg;
-            border-radius: $controlCr;
-            color: $toiColorFg;
-            width: $d;
-            height: $d;
-            line-height: $d;
-            text-align: center;
-            &:hover {
-                background-color: $colorAlert !important;
-                color: #fff !important;
-            }
+        top: 0;
+        bottom: 0;
+        width: 1px;
+    }
+    .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;
             }
         }
     }
-    &:hover {
-        $c: $toiColorBgHov;
-        cursor: ew-resize;
-        .l-toi.block {
-            background-color: $c !important;
-            color: $toiColorFgHov;
+
+    .l-toi-val {
+        //@extend .flex-elem;
+        //@extend .grows;
+        font-size: 0.7rem;
+        white-space: nowrap;
+        //right: $toiW + $interiorMargin;
+    }
+
+    &.val-to-right {
+        .l-toi-val {
+            order: 2;
+            //right: auto;
+            //left: $toiW + $interiorMarginSm;
         }
     }
 }
@@ -112,33 +160,18 @@ table {
     .gl-plot-wrapper-display-area-and-x-axis {
         .l-toi-holder {
             //@include test();
-            @include transform(translateX(-50%));
-            position: absolute;
-            top: 0;
             bottom: nth($plotDisplayArea, 3);
-            width: $toiW; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
-            &:before {
-                // Vertical line
-                border-left: 1px dashed $toiColorBg;
-                content: '';
-                display: block;
-                left: 50%;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                width: 1px;
+            &:after {
+                display: none;
             }
             .l-toi {
-                @extend .icon-clock;
+                @include test();
                 @include transform(translateY(100%));
                 bottom: 0;
             }
-            &:hover {
-                background-color: rgba($toiColorBgHov, 0.1);
-                &:before {
-                    border-left-color: $toiColorBgHov !important;
-                }
-            }
+            //&: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
@@ -110,7 +110,7 @@ $toiColorFg: #ccc;
 $toiColorFgHov: #fff;
 $toiColorBgActive:  lighten($colorKey, 10%);
 $toiColorFgActive: $toiColorFgHov;
-$toiW: 18px;
+$toiW: 16px;
 
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;

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
@@ -262,33 +262,14 @@
     }
 
     // Time of Interest control
-    .l-toi-holder,
-    .l-toi-holder:after,
-    .l-toi-holder:before,
-    .l-toi {
-        display: block;
-        position: absolute;
-    }
-
     .l-toi-holder {
         $c: $colorTimeCondTOIBg;
         $cHov: $toiColorBgHov;
-        //$cPinned: rgba($toiColorBgPinned, 0.8);
-        //$cPinnedHov: $toiColorBgPinned;
         $linesVOffset: 2px;
-        @include transform(translateX(-50%));
-        //color: $c;
-        top: 0px;
-        bottom: 0px;
-        width: $timeCondTOIIconD;
-        left: auto;
-        right: auto;
-        z-index: 1;
         &:before,
         &:after {
             // Vertical lines
-            content: '';
-            //background-color: $c;
+            border-left-style: solid;
             left: 50%;
             height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
             width: 1px;
@@ -312,64 +293,17 @@
             @include transform(translate(-50%, -50%));
             font-size: $d;
             line-height: $d;
-            text-align: center;
             left: 50%;
             top: 50%;
             height: $d;
             width: $d;
             z-index: 1;
-            &:before {
-                @extend .ui-symbol;
-                content: $glyph-icon-clock;
-            }
         }
 
         .l-toi-val {
             @include transform(translateY(-51%));
-            font-size: 0.7rem;
-            position: absolute;
             top: 50%;
-            white-space: nowrap;
-            right: $timeCondTOIIconD + $interiorMarginSm;
-        }
-
-        &.val-to-right {
-            .l-toi-val {
-                right: auto;
-                left: $timeCondTOIIconD + $interiorMarginSm;
-            }
         }
-
-       /* &.pinned {
-            //opacity: 1;
-            z-index: 2; // Get this above a non-pinned instance so user can access the remove "x" button.
-            &.active {
-                opacity: 1;
-            }
-            &:before,
-            &:after {
-                // Vertical lines
-                background-color: $cPinned;
-            }
-            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;
-                }
-            }
-        }*/
     }
 
     .l-time-conductor-controls {

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -104,9 +104,10 @@
                 <div class="l-toi-holder"
                      ng-class="{ 'pinned': true, 'val-to-right': false }"
                      ng-click="this.pinned = false"
-                    style="left: 100%">
-                    <div class="l-toi"></div>
-                    <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
+                    style="left: 70%">
+                    <div class="l-toi">
+                        <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
+                    </div>
                 </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
@@ -78,11 +78,13 @@
             <!-- new wrapper inserted here -->
             <div class="gl-plot-wrapper-display-area-and-x-axis">
                 <!-- TOI element -->
-                <div class="l-toi-holder"
+                <div class="l-toi-holder show-val val-to-right"
                      ng-class="{ pinned: true }"
-                     style="left: 100%">
+                     style="left: 0%">
                     <!-- Need text val at bottom, plus vertical line -->
-                    <div class="l-toi block"></div>
+                    <div class="l-toi l-flex-row">
+                    <span class="l-toi-val flex-elem">Z884.92:25:32 52-90-6102</span>
+                    </div>
                 </div>
 
                 <div class="gl-plot-coords"