[Frontend] Styling for TOI element

Fixes #933 Fixes #1193 WIP: plots and TC done, moving on to tables; moved sass into conductor-v2; moved constants;
nasa · Oct 13, 2016 · 6042e4a · 6042e4a
1 parent 1a53430
commit 6042e4a
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 87 deletions.
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
@@ -42,7 +42,6 @@
 @import "controls/lists";
 @import "controls/menus";
 @import "controls/messages";
-@import "controls/time-of-interest";
 @import "mobile/controls/menus";
 
 /********************************* FORMS */

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) + $toiH / 2;
+        right: nth($plotDisplayArea, 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
@@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: $colorFormSectionHeader;
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
-$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: 4px;
-
 // Status colors, mainly used for messaging and item ancillary symbols
 $colorStatusFg: #ccc;
 $colorStatusDefault: #ccc;

diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -103,15 +103,6 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
 $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
-$toiColorFg: #fff;
-$toiColorCtrlFg: #fff;
-$toiColorBgAlert: #a7292a; // $colorFormInvalid;
-$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;
 $colorStatusDefault: #ccc;

diff --git a/platform/features/conductor-v2/conductor/res/sass/_constants.scss b/platform/features/conductor-v2/conductor/res/sass/_constants.scss
@@ -2,6 +2,10 @@ $ueTimeConductorH: (25px, 16px, 20px); // Heights for Ticks, Data Visualization,
 $ueTimeConductorRtH: (25px, 3px, 20px); // Heights for elements in Real-time mode
 $timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
 $timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
-$timeCondAxisLROffset: (6px, 6px); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
 $timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
-$timeCondTOIValOffset: 0px;
+$timeCondTOIValOffset: 0px;
+$ticksBlockerFadeW: 50px;
+$toiBlockerFadeW: 10px;
+$toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
+$toiPad: 4px;
+$timeCondAxisLROffset: (($toiH / 2) + $toiPad, ($toiH / 2) + $toiPad); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
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
@@ -125,7 +125,6 @@
     }
 
     .l-time-conductor-inputs-holder {
-        $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
 

diff --git a/.../res/sass/controls/_time-of-interest.scss → ...conductor/res/sass/_time-of-interest.scss b/.../res/sass/controls/_time-of-interest.scss → ...conductor/res/sass/_time-of-interest.scss
@@ -22,13 +22,14 @@
 
 .l-toi-holder,
 .l-toi-holder:after,
-.l-toi-holder:before,
-.l-toi {
+.l-toi-holder:before {
     display: block;
     position: absolute;
 }
 
 .l-toi-holder {
+    $blockerFadeW: $toiBlockerFadeW;
+    $LROffset: $blockerFadeW + $toiPad;
     $p: 3px;
     @include transform(translateX(-50%));
     color: $toiColorBg;
@@ -62,50 +63,56 @@
 
     .l-toi {
         // Holds buttons and val. Acts as a blocking element.
-        @extend .l-flex-row;
-        @include transform(translateY(-50%));
-        background: blue; // $toiColorBlocker;
+        @include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%));
+        position: absolute;
         align-items: center;
         box-sizing: content-box;
         height: $toiH;
-        left: $toiPadLR * -1;
-        top: 50%;
-        padding: $toiPadLR $toiPadLR $toiPadLR 0;
+        right: $LROffset * -1;
+        @include transform(translateY(-50%)); top: 50%;
+        padding: $toiPad $blockerFadeW $toiPad $LROffset;
         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;
+            padding: $toiPad $toiPad;
+            order: 2;
             overflow: hidden;
             white-space: nowrap;
+            justify-content: space-between;
             width: $toiH;
 
             &:hover {
                 // Expand and display controls; clock icon changes to resync
                 background-color: $toiColorBg;
                 cursor: pointer;
+                margin-left: $interiorMarginSm;
                 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;
+                .t-button-resync {
+                    order: 2;
+                    &:before {
+                        content: $glyph-icon-resync;
+                    }
+                }
+                .t-button-unpin {
+                    order: 1;
+                    &:hover {
+                        color: $toiColorBgAlert;
+                    }
                 }
 
                 & + .l-toi-val {
@@ -114,16 +121,16 @@
                 }
             }
         }
-        // Holds clock icon and resync and unpin buttons
-        //left: $toiPadLR * -1;
 
         .icon-button {
             color: $toiColorBg;
         }
+
         .t-button-resync {
             @extend .icon-clock;
             &:hover { color: $toiColorCtrlFg; }
         }
+
         .t-button-unpin {
             @include trans-prop-nice($props: opacity, $dur: 150ms);
             @extend .icon-x-in-circle;
@@ -137,33 +144,43 @@
     }
 
     &.show-val {
-        .l-toi-val {
-            $tbP: 1px;
-            @extend .flex-elem;
-            @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: $toiH;
-            //right: $toiH + $interiorMarginSm;
-            //top: 50%;
-            //@include transform(translateY(-50%));
-            line-height: $toiH;
-            padding: $tbP $p;
-            white-space: nowrap;
-            &:hover {
-                //opacity: 1;
+        .l-toi {
+            .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: $toiH;
+                line-height: $toiH;
+                order: 1;
+                padding: $tbP $p;
+                white-space: nowrap;
             }
         }
+    }
+
+    &.val-to-right {
+        .l-toi {
+            right: auto;
+            left: $LROffset * -1;
+            padding: $toiPad $LROffset $toiPad $blockerFadeW;
+
+            .l-toi-buttons {
+                order: 1;
+                &:hover {
+                    .t-button-resync { order: 1; }
+                    .t-button-unpin { order: 2; }
+                    margin-right: $interiorMarginSm;
+                }
+            }
 
-        &.val-to-right {
             .l-toi-val {
-                right: auto;
-                left: $toiH + $interiorMarginSm;
+                order: 2;
             }
         }
     }
@@ -188,12 +205,14 @@ table {
                             top: 0;
 
                         }
+
                         &:before {
                             @extend .icon-clock;
                             color: $toiColorBg;
                             cursor: pointer;
                             z-index: 3;
                         }
+
                         &:after {
                             border-radius: 100%;
                             content: '';
@@ -221,25 +240,20 @@ table {
 // TOI in plots
 .gl-plot {
     .gl-plot-wrapper-display-area-and-x-axis {
+        right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element
+
         .l-toi-holder {
             bottom: nth($plotDisplayArea, 3) - $interiorMargin;
             z-index: 3;
 
-            .l-toi,
-            .l-toi-val {
-                //@include transform(translateY(100%));
+            .l-toi {
+                @include transform(translateY(100%));
 
             }
 
             .l-toi {
-                //bottom: $toiPadLR - 1;
-                //z-index: 2;
-            }
-
-            .l-toi-val {
-                //top: auto;
-                //bottom: 0;
-                //z-index: 1;
+                top: auto;
+                bottom: $toiPad;
             }
         }
     }
@@ -253,7 +267,7 @@ table {
         &:after {
             // Vertical lines
             border-left-style: solid;
-            //height: (($r2H - $timeCondTOIIconD)/2) + $linesVOffset;
+            height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset;
         }
 
         &:before {
@@ -268,4 +282,4 @@ table {
             bottom: 0px;
         }
     }
-}
+}
diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-espresso.scss
@@ -36,4 +36,15 @@ $colorTimeCondKeyBg: #4e70dc;
 $colorTimeCondKeyFg: #fff;
 $colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
 $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
-@import "time-conductor-base";
+
+// Time of Interest
+$toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
+$toiColorFg: #000;
+$toiColorCtrlFg: #fff;
+$toiColorBgAlert: #cf2a12;
+$colorTimeCondTOIBg: darken($toiColorBg, 20%);
+$colorTimeCondTOIBgHov: $toiColorBg;
+
+@import "time-conductor-base";
+@import "time-of-interest";
diff --git a/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss b/platform/features/conductor-v2/conductor/res/sass/time-conductor-snow.scss
@@ -36,6 +36,15 @@ $colorTimeCondKeyBg: #6178dc;
 $colorTimeCondKeyFg: #fff;
 $colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
 $colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
+
+// Time of Interest
+$toiColorBg: #6b93c6;
+$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icon
+$toiColorFg: #fff;
+$toiColorCtrlFg: #fff;
+$toiColorBgAlert: #a7292a; // $colorFormInvalid;
 $colorTimeCondTOIBg: darken($toiColorBg, 20%);
 $colorTimeCondTOIBgHov: $toiColorBg;
-@import "time-conductor-base";
+
+@import "time-conductor-base";
+@import "time-of-interest";
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
@@ -13,15 +13,15 @@
 
 <!-- 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-class="{ 'pinned': true, 'val-to-right': false }"
+     ng-style="{'left': 90 + '%'}">
+    <div class="l-flex-row l-toi">
+        <span class="flex-elem l-flex-row l-toi-buttons">
+            <a class="flex-elem t-button-resync icon-button" title="Re-sync Time of Interest"
                ng-click="toi.resync()"></a>
+            <a class="flex-elem t-button-unpin icon-button" title="Unset Time of Interest"
+               ng-click="toi.dismiss()"></a>
         </span>
-        <span class="l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
+        <span class="flex-elem l-toi-val">{{toi.toiText}}2016-09-16 21:30:30</span>
     </div>
 </div>