[Frontend] Time Conductor v2 styling

Fixes #933 WIP: Significant mobile and desktop style tweaks; moved constants into their own include file;
nasa · Jul 20, 2016 · b392633 · b392633
1 parent ff16784
commit b392633
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 43 deletions.
diff --git a/platform/features/conductor-v2/res/sass/_constants.scss b/platform/features/conductor-v2/res/sass/_constants.scss
@@ -0,0 +1,3 @@
+$ueTimeConductorH: (25px, 15px, 20px);
+$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
+$timeCondInputDeltaDefW: 60px; // Default width for delta value inputs, typically 00:00:00
diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss
@@ -20,16 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @import "bourbon";
-
 @import "../../../../commonUI/general/res/sass/constants";
 @import "../../../../commonUI/general/res/sass/mixins";
 @import "../../../../commonUI/general/res/sass/mobile/constants";
 @import "../../../../commonUI/general/res/sass/mobile/mixins";
 @import "../../../../commonUI/themes/espresso/res/sass/constants";
 @import "../../../../commonUI/themes/espresso/res/sass/mixins";
 @import "../../../../commonUI/general/res/sass/icons";
-
-$ueTimeConductorH: (25px, 6px, 20px);
+@import "constants";
 
 @mixin toiLineHovEffects() {
     &:before,
@@ -158,38 +156,48 @@ $ueTimeConductorH: (25px, 6px, 20px);
     }
 
     .l-time-conductor-inputs-holder {
-        $trInputW: 180px;
-        $hmInputW: 60px;
         $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
 
         height: $r1H;
         position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         z-index: 1;
         .l-time-range-w {
             // Wraps a datetime text input field
             height: 100%;
             position: absolute;
+            .title {
+                display: inline-block;
+                margin-right: $interiorMarginSm;
+            }
             &.start-w {
                 @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-right: $ticksBlockerFadeW;
+                .title:before {
+                    content: 'Start';
+                }
             }
             &.end-w {
                 @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
                 padding-left: $ticksBlockerFadeW;
                 right: 0;
-                text-align: right;
+                .title:before {
+                    content: 'End';
+                }
             }
             input[type="text"] {
                 @include trans-prop-nice(padding, 250ms);
             }
-            .time-range-input input {
-                width: $trInputW;
+            .time-range-input input[type="text"] {
+                width: $timeCondInputTimeSysDefW;
             }
-            .hrs-min-input input {
-                width: $hmInputW;
+            .hrs-min-input input[type="text"] {
+                width: $timeCondInputDeltaDefW;
             }
             .icon-calendar {
                 margin-top: 4px;
@@ -250,18 +258,13 @@ $ueTimeConductorH: (25px, 6px, 20px);
                 color: $colorTick;
             }
         }
-
     }
-    // Fixed
-    &.fixed-mode {
-        .time-conductor-icon div[class*="hand"] {
-            &.hand-little {
-                @include transform(rotate(120deg));
-            }
-        }
+
+    .l-data-visualization {
+        background: $colorTimeCondDataVisRtBg !important
     }
 
-    // Realtime, latest modes
+    // Real-time, latest modes
     &.realtime-mode,
     &.latest-mode {
         .time-conductor-icon {
@@ -297,69 +300,92 @@ $ueTimeConductorH: (25px, 6px, 20px);
                 &.end-date {
                     pointer-events: none;
                     input[type="text"] {
-                        color: $colorTimeCondKeyBg;
+                        color: pullForward($colorTimeCondKeyBg, 5%);
                         margin-right: $interiorMargin;
-                        text-align: right;
+                        tab-index: -1;
                     }
                 }
             }
         }
 
-        &.realtime-mode .time-conductor-icon div[class*="hand"] { @include animation-name(clock-hands); }
-        &.latest-mode .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands-sticky);
-            &.hand-big { @include animation-duration(5s); }
-            &.hand-little { @include animation-duration(60s); }
-        }
-
-        .l-data-visualization {
-            background: $colorTimeCondDataVisRtBg !important
-        }
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
         }
     }
+
+    // Fixed mode
     &.fixed-mode {
         $i: $glyphIconFixed;
+        .time-conductor-icon div[class*="hand"] {
+            &.hand-little {
+                @include transform(rotate(120deg));
+            }
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // Realtime mode
     &.realtime-mode {
         $i: $glyphIconRealtime;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands);
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'Now';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
+
+    // LAD mode
     &.latest-mode {
         $i: $glyphIconLatest;
+        .time-conductor-icon div[class*="hand"] {
+            @include animation-name(clock-hands-sticky);
+            &.hand-big {
+                @include animation-duration(5s);
+            }
+            &.hand-little {
+                @include animation-duration(60s);
+            }
+        }
         .time-delta:before {
             content: $i;
         }
+        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
+            content: 'LAD';
+        }
         .mode-selector .s-menu-btn:before {
             content: $i;
         }
     }
 }
 
-.s-time-range-val {
-    border-radius: $controlCr;
-    background-color: $colorInputBg;
-    padding: 1px 1px 0 $interiorMargin;
-}
-
 /******************************************************************** MOBILE */
 
-//@include phoneandtablet {}
+@include phoneandtablet {
+    .l-time-conductor-holder { min-width: 0 !important; }
+    .super-menu.mini {
+        width: 200px;
+        height: 100px;
+        .pane.menu-item-description {
+            display: none;
+        }
+    }
+}
 
 @include phone {
     .l-time-conductor {
         min-width: 0;
-        .l-time-conductor-inputs-and-ticks mct-conductor-axis { display: none; }
-        //TODO: mode menu smaller, hide right side
+        .l-time-conductor-inputs-and-ticks mct-conductor-axis {
+            display: none;
+        }
     }
 }
 
@@ -387,16 +413,21 @@ $ueTimeConductorH: (25px, 6px, 20px);
                     &:not(:first-child) {
                         margin-top: $interiorMargin;
                     }
+                    .title {
+                        width: 30px;
+                    }
                 }
             }
         }
 
-        // Realtime, latest modes
+        // Real-time, latest modes
         &.realtime-mode,
         &.latest-mode {
-            // TODO: hide all of start-w
             .l-time-conductor-inputs-and-ticks {
                 .l-time-range-w {
+                    .title {
+                        width: 30px;
+                    }
                     &.start-w {
                         display: none;
                     }

diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -14,6 +14,7 @@
                   ng-submit="tcController.updateBoundsFromForm(formModel)">
                 <span class="l-time-range-w start-w">
                     <span class="l-time-range-input-w start-date">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,
@@ -44,6 +45,7 @@
                 <span class="l-time-range-w end-w">
                     <span class="l-time-range-input-w end-date"
                           ng-controller="ToggleController as t2">
+                        <span class="title"></span>
                         <mct-control key="'datetime-field'"
                                      structure="{
                                          format: timeSystemModel.format,