[Frontend] Flex; Tweaks to slider knobs

open #889
- Converted TC elements to use flex
layout instead of abs pos;
- Knob size increased;
- Knob grippies added;

platform/commonUI/general/res/sass/_constants.scss

@@ -48,7 +48,7 @@ $uePaneMiniTabW: 10px;
 $uePaneMiniTabCollapsedW: 11px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (33px, 15px, 15px);
+$ueTimeControlH: (33px, 18px, 20px);
 // Panes
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;

platform/commonUI/general/res/sass/controls/_time-controller.scss

@@ -12,23 +12,23 @@
 	$rangeValPad: $interiorMargin;
 	$rangeValOffset: $sliderKnobW + $interiorMargin;
 	$timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
-	$r1H: nth($ueTimeControlH,1);
+	$r1H: nth($ueTimeControlH,1); // Not currently used
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
 
-    display: block;
-	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
     min-width: $minW;
     font-size: 0.8rem;
 
-
 	.l-time-range-inputs-holder,
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		@include absPosDefault(0, visible);
 		box-sizing: border-box;
-		top: auto;
+        position: relative;
+		//top: auto;
+        &:not(:first-child) {
+            margin-top: $interiorMargin;
+        }
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
@@ -37,8 +37,8 @@
 	}
 
 	.l-time-range-inputs-holder {
-		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
 		border-top: 1px solid $colorInteriorBorder;
+        padding-top: $interiorMargin;
         &.l-flex-row {
             @include align-items(center);
             .flex-elem {
@@ -78,7 +78,7 @@
 	}
 
 	.l-time-range-slider-holder {
-		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
+		height: $r2H;
 		.range-holder {
 			box-shadow: none;
 			background: none;

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -194,7 +194,7 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     .holder.holder-treeview-elements {
         top: $bodyMargin;
         right: 0;
-        bottom: $bodyMargin;
+        bottom: $interiorMargin;
         left: $bodyMargin;
         .create-btn-holder {
             &.s-status-editing {
@@ -215,17 +215,17 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
         left: 0;
         .holder-object {
             top: $bodyMargin;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
         }
         .holder-inspector {
             top: $bodyMargin;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }
         .holder-elements {
             top: 0;
-            bottom: $bodyMargin;
+            bottom: $interiorMargin;
             left: $bodyMargin;
             right: $bodyMargin;
         }

platform/commonUI/general/res/templates/controls/time-controller.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div ng-controller="TimeRangeController as trCtrl">
+<div ng-controller="TimeRangeController as trCtrl" class="l-flex-col">
-    <form class="l-time-range-inputs-holder l-flex-row"
+    <form class="l-time-range-inputs-holder l-flex-row flex-elem"
           ng-submit="trCtrl.updateBoundsFromForm()">
         <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
         <span class="l-time-range-input-w flex-elem">
@@ -54,7 +54,7 @@
         <input type="submit" class="hidden">
     </form>
 
-    <div class="l-time-range-slider-holder">
+    <div class="l-time-range-slider-holder flex-elem">
         <div class="l-time-range-slider">
             <div class="slider"
                  mct-resize="spanWidth = bounds.width">
@@ -85,7 +85,7 @@
         </div>
     </div>
 
-    <div class="l-time-range-ticks-holder">
+    <div class="l-time-range-ticks-holder flex-elem">
         <div class="l-time-range-ticks">
             <div
                 ng-repeat="tick in ticks track by $index"

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -32,8 +32,8 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
-$sliderColorKnob: pushBack($sliderColorBase, 15%);
+$sliderColorKnob: $sliderColorBase;
-$sliderColorKnobHov: $sliderColorBase;
+$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
 $sliderKnobW: 15px;