From 43a804eef493a3ffd070ba5c1dba190d08fc7a42 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 15 Jul 2016 07:54:32 -0700
Subject: [PATCH] [Frontend] Styling for Time Conductor v2

Fixes #933
WIP: Added zoom current range indicator;
tweaks to style
---
 .../general/res/sass/controls/_controls.scss   | 18 ++++++++++++++----
 .../res/sass/controls/_time-conductor.scss     | 18 ++++++++++++------
 .../res/templates/time-conductor.html          |  5 +++--
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 379a05a2e0..b47ee8dc78 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -430,25 +430,35 @@ input[type="search"] {
     //border-radius: 50% !important;
 }
 
+@mixin sliderKnobRound() {
+    $h: 12px;
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    border-radius: 50% !important;
+}
+
 input[type="range"] {
     // HTML5 range inputs
 
     -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
     background: transparent; /* Otherwise white in Chrome */
     &:focus {
-        outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+        outline: none; /* Removes the blue border. */
     }
 
     // Thumb
     &::-webkit-slider-thumb {
         -webkit-appearance: none;
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
     &::-moz-range-thumb {
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
     &::-ms-thumb {
-        @include sliderKnob();
+        @include sliderKnobRound();
     }
 
     // Track
diff --git a/platform/commonUI/general/res/sass/controls/_time-conductor.scss b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
index 47dc3b340b..f112feb993 100644
--- a/platform/commonUI/general/res/sass/controls/_time-conductor.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-conductor.scss
@@ -119,7 +119,8 @@
     }
 
     .l-time-conductor-inputs-holder,
-    .l-time-conductor-ticks {
+    .l-time-conductor-ticks,
+    .l-time-conductor-zoom-w {
         font-size: 0.8rem;
     }
 
@@ -203,11 +204,16 @@
     .l-time-conductor-controls {
         align-items: center;
         margin-top: $interiorMargin;
-        .time-conductor-zoom {
-            //@include test();
-            min-width: 100px;
-            height: $r3H;
-            width: 25%;
+        .l-time-conductor-zoom-w {
+            @include justify-content(flex-end);
+            .time-conductor-zoom {
+                height: $r3H;
+                min-width: 100px;
+                width: 20%;
+            }
+            .time-conductor-zoom-current-range {
+                color: $colorTick;
+            }
         }
 
     }
diff --git a/platform/features/conductor-v2/res/templates/time-conductor.html b/platform/features/conductor-v2/res/templates/time-conductor.html
index b05e057f9d..4eaaa28f0b 100644
--- a/platform/features/conductor-v2/res/templates/time-conductor.html
+++ b/platform/features/conductor-v2/res/templates/time-conductor.html
@@ -105,8 +105,9 @@
                     ]}">
             </mct-control>
             <!-- Zoom control -->
-            <div class="l-time-conductor-zoom-w grows flex-elem contents-align-right">
-                <input class="time-conductor-zoom" type="range" />
+            <div class="l-time-conductor-zoom-w grows flex-elem l-flex-row">
+                <span class="time-conductor-zoom-current-range flex-elem flex-fixed holder">Mars Minutes</span>
+                <input class="time-conductor-zoom flex-elem" type="range" />
             </div>
         </div>