[Frontend] Time Conductor v2 styling

Fixes #933 Redo TC icon to use font symbol, added new symbol for brackets to font files; font anti-aliasing mod for .ui-symbol class; layout tweaks; mobile tweaks.
nasa · Jul 21, 2016 · da7c636 · da7c636
1 parent b392633
commit da7c636
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 36 deletions.
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
@@ -30,6 +30,7 @@
 
 .ui-symbol {
     font-family: 'symbolsfont';
+    -webkit-font-smoothing: antialiased;
 	&.type-icon {
 		color: $colorObjHdrIc;
 	}

diff --git a/platform/features/conductor-v2/res/sass/time-conductor.scss b/platform/features/conductor-v2/res/sass/time-conductor.scss
@@ -45,40 +45,27 @@
 
 .time-conductor-icon {
     $c: $colorObjHdrIc;
-    $d: 20px;
-    background: $c;
-    border-radius: 4px;
+    $d: 18px;
     height: $d !important;
     width: $d;
     position: relative;
 
-    // Icon shape: brackets
-    &:before,
-    &:after {
-        content: '';
-        background: $colorBodyBg;
-        position: absolute;
-    }
     &:before {
-        $in: 7px;
-        left: $in;
-        top: 0;
-        right: $in;
-        bottom: 0;
-
-    }
-    &:after {
-        $in: 4px;
-        left: $in;
-        top: $in;
-        right: $in;
-        bottom: $in;
+        @extend .ui-symbol;
+        color: $c;
+        content: '\e624';
+        font-size: $d;
+        line-height: normal;
+        display: block;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
     }
 
     // Clock hands
     div[class*="hand"] {
         $handW: 2px;
-        $handH: 8px;
+        $handH: $d * 0.4; //8px;
         @include transform(translate(-50%, -50%));
         @include animation-iteration-count(infinite);
         @include animation-timing-function(linear);
@@ -260,15 +247,11 @@
         }
     }
 
-    .l-data-visualization {
-        background: $colorTimeCondDataVisRtBg !important
-    }
-
     // Real-time, latest modes
     &.realtime-mode,
     &.latest-mode {
         .time-conductor-icon {
-            background: $colorTimeCondKeyBg;
+            &:before { color: $colorTimeCondKeyBg; }
             div[class*="hand"] {
                 @include animation-name(clock-hands);
                 &:before {
@@ -308,6 +291,10 @@
             }
         }
 
+        .l-data-visualization {
+            background: $colorTimeCondDataVisRtBg !important
+        }
+
         .mode-selector .s-menu-btn {
             @include btnSubtle($colorTimeCondKeyBg, pullForward($colorTimeCondKeyBg, $ltGamma), $colorTimeCondKeyFg);
         }
@@ -383,8 +370,15 @@
 @include phone {
     .l-time-conductor {
         min-width: 0;
-        .l-time-conductor-inputs-and-ticks mct-conductor-axis {
-            display: none;
+        .l-time-conductor-inputs-and-ticks {
+            .l-time-conductor-inputs-holder {
+                .l-time-range-w {
+                    background-image: none !important;
+                }
+            }
+            mct-conductor-axis {
+                display: none;
+            }
         }
     }
 }
@@ -413,6 +407,14 @@
                     &:not(:first-child) {
                         margin-top: $interiorMargin;
                     }
+                }
+            }
+        }
+
+        // Fixed mode
+        &.fixed-mode {
+            .l-time-conductor-inputs-and-ticks {
+                .l-time-range-w {
                     .title {
                         width: 30px;
                     }
@@ -425,9 +427,6 @@
         &.latest-mode {
             .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
@@ -9,7 +9,7 @@
 
     <div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
         <!-- Holds inputs and ticks -->
-        <div class="l-time-conductor-inputs-and-ticks l-row-elem l-flex-row flex-elem no-margin">
+        <div class="l-time-conductor-inputs-and-ticks l-row-elem flex-elem no-margin">
             <form class="l-time-conductor-inputs-holder"
                   ng-submit="tcController.updateBoundsFromForm(formModel)">
                 <span class="l-time-range-w start-w">
@@ -80,7 +80,7 @@
         </div>
 
         <!-- Holds data availability, time of interest -->
-        <div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
+        <div class="l-data-visualization l-row-elem flex-elem"></div>
 
         <!-- Holds time system and session selectors, and zoom control -->
         <div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">