[Frontend] Styling for Time Conductor v2

Fixes #933 In-progress: fixed SVG text color, field styling for fixed vs. real-time, markup cleanup
nasa · Jul 13, 2016 · 06af84c · 06af84c
1 parent 5238aa2
commit 06af84c
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 123 deletions.
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
@@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (21px, 18px, 20px);
+$ueTimeControlH: (25px, 18px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;
@@ -108,6 +108,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.7em;
+$inputTextP: 3px 5px;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;

diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
@@ -66,7 +66,7 @@ input, textarea {
 input[type="text"],
 input[type="search"] {
 	vertical-align: baseline;
-	padding: 3px 5px;
+	padding: $inputTextP;
 }
 
 h1, h2, h3 {

diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -1,18 +1,18 @@
 @mixin toiLineHovEffects() {
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
+    &:before,
+    &:after {
+        background-color: $timeControllerToiLineColorHov;
+    }
 }
 
 .l-time-conductor {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$r1H: nth($ueTimeControlH,1);
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
+    $minW: 500px;
+    $knobHOffset: 0px;
+    $rangeValPad: $interiorMargin;
+    $rangeValOffset: $sliderKnobW + $interiorMargin;
+    $r1H: nth($ueTimeControlH, 1);
+    $r2H: nth($ueTimeControlH, 2);
+    $r3H: nth($ueTimeControlH, 3);
 
     // Glyphs Todo: replace with refactored CSS approach when that is merged into master
     $glyphIconFixed: '\e604';
@@ -24,57 +24,75 @@
     min-width: $minW;
     position: relative;
 
-	>.l-row-elem {
+    > .l-row-elem {
         // First order row elements
-		box-sizing: border-box;
+        box-sizing: border-box;
         width: 100%;
         position: relative;
-        &:not(:first-child) {
-            margin-top: $interiorMargin;
+    }
+
+    .mode-selector .s-menu-btn,
+    .time-delta {
+        &:before {
+            @extend .ui-symbol;
+            margin-right: $interiorMarginSm;
         }
-	}
+    }
+
+    .time-delta {
+        &:before {
+            color: $colorTimeCondKeyBg;
+        }
+    }
 
     .l-time-conductor-inputs-holder,
     .l-time-conductor-ticks {
         font-size: 0.8rem;
     }
 
-	.l-time-conductor-inputs-holder {
-        $inputW: 180px;
-        $ticksBlockerFadeW: 25px;
+    .l-time-conductor-inputs-holder {
+        $trInputW: 180px;
+        $hmInputW: 80px;
+        $ticksBlockerFadeW: 50px;
         $iconCalendarW: 16px;
         $wBgColor: $colorBodyBg;
-        //$wBgColor: green;
-        $wBgW: $inputW + $interiorMargin + $iconCalendarW;
 
         height: $r1H;
         z-index: 1;
-        .l-time-range-input-w {
+        .l-time-range-w {
             // Wraps a datetime text input field
+            height: 100%;
             position: absolute;
-            width: $wBgW + $ticksBlockerFadeW;
-            &.start-date {
-                @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
+            &.start-w {
+                @include background-image(linear-gradient(270deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-right: $ticksBlockerFadeW;
             }
-            &.end-date {
-                @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
+            &.end-w {
+                @include background-image(linear-gradient(90deg, transparent, $wBgColor $ticksBlockerFadeW));
+                padding-left: $ticksBlockerFadeW;
                 right: 0;
                 text-align: right;
             }
             input[type="text"] {
-                width: $inputW;
+                @include trans-prop-nice(padding, 250ms);
+            }
+            .time-range-input input {
+                width: $trInputW;
+            }
+            .hrs-min-input input {
+                width: $hmInputW;
             }
             .icon-calendar {
                 margin-top: 4px;
             }
         }
-	}
+    }
 
-	.l-time-conductor-ticks {
+    .l-time-conductor-ticks {
         $c: $colorTick;
-		height: $r1H;
+        height: $r1H;
         mct-conductor-axis {
-            @include transform(translateY(3px));
+            //@include transform(translateY(1px));
             display: block;
             position: relative;
             width: 100%;
@@ -85,38 +103,50 @@
             width: 100%;
             svg {
                 text-rendering: geometricPrecision;
-                width: 100%; height: 100%;
+                width: 100%;
+                height: 100%;
                 > g {
                     font-size: 0.9em;
                 }
-                path {display: none;}
-                line {stroke: $c;}
-                text { fill: $c; }
+                path {
+                    display: none;
+                }
+                line {
+                    stroke: $c;
+                }
+                text {
+                    fill: $c;
+                }
             }
         }
-	}
+    }
     .l-data-visualization {
         background: rgba($colorTick, 0.3);
         height: $r2H;
     }
 
-    .mode-selector .s-menu-btn {
-        &:before {
-            @extend .ui-symbol;
-            margin-right: $interiorMarginSm;
-            content: $glyphIconFixed;
-        }
+    .l-time-conductor-controls {
+        margin-top: $interiorMargin;
     }
 
     // Realtime, latest modes
     &.realtime-mode,
     &.latest-mode {
         .l-time-conductor-inputs-holder {
             .l-time-range-input-w {
-                input:not(:hover) {
+                input[type="text"]:not(.error) {
                     background: transparent;
                     box-shadow: none;
                     border-radius: 0;
+                    padding-left: 0;
+                    padding-right: 0;
+                    &:hover {
+                        @include nice-input();
+                        padding: $inputTextP;
+                    }
+                }
+                &.start-date {
+                    pointer-events: none;
                 }
                 .icon-calendar {
                     display: none;
@@ -128,21 +158,42 @@
         }
 
         .l-data-visualization {
-            background: rgba($colorTimeCondKey, 0.5) !important
+            background: rgba($colorTimeCondKeyBg, 0.5) !important
         }
         .mode-selector .s-menu-btn {
-            @include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
+            @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
+        }
+    }
+    &.fixed-mode {
+        $i: $glyphIconFixed;
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.realtime-mode {
+        $i: $glyphIconRealtime;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
+        }
+    }
+    &.latest-mode {
+        $i: $glyphIconLatest;
+        .time-delta:before {
+            content: $i;
+        }
+        .mode-selector .s-menu-btn:before {
+            content: $i;
         }
     }
-
-    &.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
-    &.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
 }
 
 .s-time-range-val {
-	border-radius: $controlCr;
-	background-color: $colorInputBg;
-	padding: 1px 1px 0 $interiorMargin;
+    border-radius: $controlCr;
+    background-color: $colorInputBg;
+    padding: 1px 1px 0 $interiorMargin;
 }
 
 /******************************************************************** MOBILE */
@@ -178,7 +229,9 @@
                     margin-right: 0;
                 }
                 .l-time-range-inputs-elem {
-                    &.lbl { display: none; }
+                    &.lbl {
+                        display: none;
+                    }
                 }
             }
         }

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorBodyFg, 0.2);
 
 // Time Conductor
-$colorTimeCondKey: #1d7a96;
+$colorTimeCondKeyBg: #1d7a96;
+$colorTimeCondKeyFg: #fff;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -210,4 +210,5 @@ $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
 
 // Time Conductor
-$colorTimeCondKey: #0092b3;
+$colorTimeCondKeyBg: #0092b3;
+$colorTimeCondKeyFg: #fff;