From cae85f3e30c32c79ca19c5e7ebb3750e09962a3f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Mon, 9 May 2016 10:16:54 -0700
Subject: [PATCH] [Frontend] Mods to slider .range-value elems

open #889
- Text smaller, line breaks;
- Height adjustments
- Increased with of slider area;
---
 .../commonUI/general/res/sass/_constants.scss |  2 +-
 .../general/res/sass/controls/_controls.scss  |  4 +--
 .../res/sass/controls/_time-controller.scss   | 27 +++++++++++--------
 .../themes/espresso/res/sass/_constants.scss  |  3 ++-
 .../themes/snow/res/sass/_constants.scss      |  3 ++-
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 659025960f..59fe5ed65c 100644
--- 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: (33px, 20px, 20px);
+$ueTimeControlH: (33px, 23px, 15px);
 // Panes
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index a2bb0b73bb..7177e87abe 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -404,11 +404,11 @@ body.desktop .object-header {
         left: auto;
     }
     .knob-l {
-        @include border-left-radius($sliderKnobW);
+        @include border-left-radius($sliderKnobR);
         cursor: w-resize;
     }
     .knob-r {
-        @include border-right-radius($sliderKnobW);
+        @include border-right-radius($sliderKnobR);
         cursor: e-resize;
     }
     .range {
diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index f6201d60cf..b9d7e26b0e 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -11,7 +11,7 @@
 	$knobM: ($sliderKnobW + $knobHOffset) * -1;
 	$rangeValPad: $interiorMargin;
 	$rangeValOffset: $sliderKnobW;
-	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$timeRangeSliderLROffset: 80px + ($sliderKnobW * 2);
 	$r1H: nth($ueTimeControlH,1);
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
@@ -76,22 +76,23 @@
 					&:before,
 					&:after {
 						background-color: $myC;
-						content: "";
+						//content: "";
 						position: absolute;
 					}
 					&:before {
 						// Vert line
+                        content: "";
 						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
-						width: 2px;
+						width: 1px;
 					}
-					&:after {
+/*					&:after {
 						// Circle element
 						border-radius: $myW;
 						@include transform(translateY(-50%));
 						top: 50%; right: 0; bottom: auto; left: 0;
 						width: auto;
 						height: $myW;
-					}
+					}*/
 				}
 				&:hover .toi-line {
 					@include toiLineHovEffects;
@@ -126,9 +127,9 @@
 					@include webkitProp(transform, translateX(-50%));
 					color: $colorPlotLabelFg;
 					display: inline-block;
-					font-size: 0.9em;
+					font-size: 0.7rem;
 					position: absolute;
-					top: 8px;
+					top: 5px;
 					white-space: nowrap;
 					z-index: 2;
 				}
@@ -140,14 +141,18 @@
 		z-index: 2;
 		.range-value {
 			@include trans-prop-nice-fade(.25s);
+            //background: rgba(red, 0.4);
+            font-size: 0.7rem;
 			padding: 0 $rangeValOffset;
 			position: absolute;
 			height: $r2H;
-			line-height: $r2H;
-			white-space: nowrap;
+			line-height: $r2H/2;
+            z-index: 1;
 		}
-		&:hover .range-value {
-			color: $sliderColorKnobHov;
+		&:hover {
+            .range-value {
+                color: $sliderColorKnobHov;
+            }
 		}
 		&.knob-l {
 			margin-left: $knobM;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 729a813a12..a17f8040c0 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6);
 $sliderColorKnobHov: $sliderColorBase;
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 0d8430a7ec..fbb6cc8d87 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -36,7 +36,8 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;