[Frontend] Styling for Time Conductor v2

Fixes #933 Color adjusts, mini super-menu size and font tweaks, glyphs added to selector, SVG style fixes in progress
nasa · Jul 11, 2016 · 64ce8a2 · 64ce8a2
1 parent bf0e85a
commit 64ce8a2
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 20 deletions.
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -202,7 +202,7 @@
                     margin-bottom: $interiorMargin * 2;
                 }
                 &.description {
-                    color: $colorCreateMenuText;
+                    color: pushBack($colorCreateMenuText, 20%);
                     font-size: 0.8em;
                     line-height: 1.5em;
                 }
@@ -211,15 +211,21 @@
 	}
 
     &.mini {
-        width: 350px;
-        height: 250px;
+        width: 400px;
+        height: 300px;
         .pane {
+            &.menu-items {
+                font-size: 0.8em;
+            }
             &.menu-item-description {
                 padding: $interiorMargin * 3;
                 .desc-area {
                     &.icon {
                         font-size: 4em;
                     }
+                    &.title {
+                        font-size: 1em;
+                    }
                 }
             }
         }

diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -14,10 +14,14 @@
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
 
+    // Glyphs Todo: replace with refactored CSS approach when that is merged into master
+    $glyphIconFixed: '\e604';
+    $glyphIconRealtime: '\43';
+    $glyphIconLatest: '\44';
+
     border-top: 1px solid $colorInteriorBorder;
     padding-top: $interiorMargin;
     min-width: $minW;
-    font-size: 0.8rem;
     position: relative;
 
 	>.l-row-elem {
@@ -30,29 +34,37 @@
         }
 	}
 
+    .l-time-conductor-inputs-holder,
+    .l-time-conductor-ticks {
+        font-size: 0.8rem;
+    }
+
 	.l-time-conductor-inputs-holder {
-        $inputW: 200px;
+        $inputW: 180px;
         $ticksBlockerFadeW: 25px;
+        $iconCalendarW: 16px;
+        $wBgColor: $colorBodyBg;
+        //$wBgColor: green;
+        $wBgW: $inputW + $interiorMargin + $iconCalendarW;
+
         height: $r1H;
         z-index: 1;
         .l-time-range-input-w {
             // Wraps a datetime text input field
             position: absolute;
-            width: $inputW + $ticksBlockerFadeW;
+            width: $wBgW + $ticksBlockerFadeW;
             &.start-date {
-                @include background-image(linear-gradient(90deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
+                @include background-image(linear-gradient(90deg, $wBgColor $wBgW, transparent 100%));
             }
             &.end-date {
-                @include background-image(linear-gradient(270deg, $colorBodyBg $inputW + $interiorMargin, transparent 100%));
+                @include background-image(linear-gradient(270deg, $wBgColor $wBgW, transparent 100%));
                 right: 0;
                 text-align: right;
             }
             input[type="text"] {
                 width: $inputW;
             }
             .icon-calendar {
-                position: absolute;
-                margin-left: -16px;
                 margin-top: 4px;
             }
         }
@@ -61,8 +73,8 @@
 	.l-time-conductor-ticks {
         $c: $colorTick;
 		height: $r1H;
-        margin-top: 0 !important;
         mct-conductor-axis {
+            @include transform(translateY(3px));
             display: block;
             position: relative;
             width: 100%;
@@ -72,10 +84,12 @@
             position: relative;
             width: 100%;
             svg {
-                stroke: $c;
+                text-rendering: geometricPrecision;
+                color: transparent;
+                fill: $c !important; // Todo: figure out why this isn't working
                 width: 100%; height: 100%;
                 > g {
-                    font-size: 0.8em;
+                    font-size: 0.9em;
                 }
                 path {display: none;}
                 line {stroke: $c;}
@@ -86,11 +100,44 @@
         background: rgba($colorTick, 0.3);
         height: $r2H;
     }
-	.l-time-domain-selector {
-		position: absolute;
-		right: 0px;
-		top: $interiorMargin;
-	}
+
+    .mode-selector .s-menu-btn {
+        &:before {
+            @extend .ui-symbol;
+            margin-right: $interiorMarginSm;
+            content: $glyphIconFixed;
+        }
+    }
+
+    // Realtime, latest modes
+    &.realtime-mode,
+    &.latest-mode {
+        .l-time-conductor-inputs-holder {
+            .l-time-range-input-w {
+                input:not(:hover) {
+                    background: transparent;
+                    box-shadow: none;
+                    border-radius: 0;
+                }
+                .icon-calendar {
+                    display: none;
+                }
+                &.end-date {
+                    display: none;
+                }
+            }
+        }
+
+        .l-data-visualization {
+            background: rgba($colorTimeCondKey, 0.5) !important
+        }
+        .mode-selector .s-menu-btn {
+            @include btnSubtle($colorTimeCondKey, pullForward($colorTimeCondKey, $ltGamma));
+        }
+    }
+
+    &.realtime-mode .mode-selector .s-menu-btn:before { content: $glyphIconRealtime; }
+    &.latest-mode .mode-selector .s-menu-btn:before { content: $glyphIconLatest; }
 }
 
 .s-time-range-val {

diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -207,4 +207,7 @@ $colorAboutLink: #84b3ff;
 
 // Loading
 $colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
+$colorLoadingBg: rgba($colorBodyFg, 0.2);
+
+// Time Conductor
+$colorTimeCondKey: #1d7a96;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -52,7 +52,7 @@ $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
-$colorTick: rgba(black, 0.2);
+$colorTick: pullForward($colorBodyBg, 30%);
 
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -185,6 +185,7 @@ $scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
 // Splitter
 $splitterD: 16px; // splitterD and $splitterHandleD should both be odd, or even
 $splitterHandleD: 2px;
+$splitterDSm: 16px; // Smaller splitter, used inside elements like a Timeline view
 $colorSplitterBg: pullForward($colorBodyBg, 10%);
 $splitterShdw: none;
 $splitterEndCr: none;
@@ -207,3 +208,6 @@ $colorAboutLink: #84b3ff;
 // Loading
 $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
+
+// Time Conductor
+$colorTimeCondKey: #0092b3;