[Frontend] Time Controller Markup and Styling

open #1515
open #117
Styling for boundary inputs and
slider;

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

@@ -41,6 +41,9 @@
 			font-size: 1.65em;
 		}
 	}
+	&.icon-calendar:after {
+		content: "\e605";
+	}
 }
 
 .bar .ui-symbol {

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -299,18 +299,24 @@ label.checkbox.custom {
 	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		@include sliderTrack();
-		height: $slotH;
+		//@include sliderTrack();
+		//height: $slotH;
 		width: auto;
 		position: absolute;
-		top: ($knobH - $slotH) / 2;
+		//top: ($knobH - $slotH) / 2;
+		top: 0;
 		right: 0;
-		bottom: auto;
+		bottom: 0;
 		left: 0;
 	}
 	.knob {
-		@include btnSubtle();
-		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		//@include btnSubtle();
+		//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorKnob;
+		&:hover {
+			background-color: $sliderColorKnobHov;
+		}
 		cursor: ew-resize;
 		position: absolute;
 		height: $knobH;
@@ -319,15 +325,16 @@ label.checkbox.custom {
 		auto: 0;
 		bottom: auto;
 		left: auto;
-		&:before {
-			top: 1px;
-			bottom: 3px;
-			left: ($knobW / 2) - 1;
-		}
+		//&:before {
+		//	top: 1px;
+		//	bottom: 3px;
+		//	left: ($knobW / 2) - 1;
+		//}
 
 	}
 	.range {
-		background: rgba($colorKey, 0.6);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorRange;
 		cursor: ew-resize;
 		position: absolute;
 		top: 0;
@@ -337,7 +344,7 @@ label.checkbox.custom {
 		height: auto;
 		width: auto;
 		&:hover {
-			background: rgba($colorKey, 0.7);
+			background-color: $sliderColorRangeHov;
 		}
 	}
 }

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

@@ -1,8 +1,8 @@
 .l-time-controller {
-	$inputTxtW: 90px;
-	$knobW: 9px;
+	$timeRangeSliderLROffset: 125px;
+	//$sliderKnobW: 9px;
 	$r1H: 20px;
-	$r2H: 30px;
+	$r2H: 20px;
 	$r3H: 10px;
 
 	position: relative;
@@ -28,23 +28,33 @@
 	}
 
 	.l-time-range-inputs-holder {
+		//@include test(red);
 		height: $r1H;
+		.l-time-range-input {
+			//display: inline-block;
+			margin-right: $interiorMarginLg;
+			.ui-symbol.icon {
+				font-size: 11px;
+				width: 11px;
+			}
+		}
 	}
 
 	.l-time-range-slider,
 	.l-time-range-ticks {
-		left: $inputTxtW; right: $inputTxtW;
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 
 	}
 
 	.l-time-range-slider-holder {
+		//@include test(green);
 		height: $r2H;
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			height: 75%;
-		}
+			//height: 75%;
+		}   
 	}
 
 	.l-time-range-ticks-holder {
@@ -74,31 +84,42 @@
 	}
 
 	.knob {
-		width: $knobW;
+		width: $sliderKnobW;
 		.range-value {
-			$w: 75px;
+			//$w: 75px;
 			//@include test();
+			//@include verticalCenter();
 			position: absolute;
-			top: 50%;
-			margin-top: -7px; // Label is 13px high
+			height: $r2H;
+			line-height: $r2H;
+			//top: 50%;
+			//margin-top: -7px; // Label is 13px high
 			white-space: nowrap;
-			width: $w;
+			//width: $w;
 		}
 		&:hover .range-value {
 			color: $colorKey;
 		}
 		&.knob-l {
-			margin-left: $knobW / -2;
+			//margin-left: $sliderKnobW / -2;
 			.range-value {
 				text-align: right;
-				right: $knobW + $interiorMargin;
+				right: $sliderKnobW + $interiorMargin;
 			}
 		}
 		&.knob-r {
-			margin-right: $knobW / -2;
+			//margin-right: $sliderKnobW / -2;
 			.range-value {
-				left: $knobW + $interiorMargin;
+				left: $sliderKnobW + $interiorMargin;
 			}
 		}
 	}
+}
+
+
+.s-time-range-val {
+	//@include test();
+	@include border-radius($controlCr);
+	background-color: $colorInputBg;
+	padding: 1px 1px 0 $interiorMargin;
 }

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

@@ -20,77 +20,89 @@
  at runtime from the About dialog for additional information.
 -->
 
+
+
 <div class="l-time-controller" ng-controller="TimeRangeController">
-    <div class="l-time-range-inputs-holder">
-        Start: {{startOuterText}}
-        <span ng-controller="ToggleController as t">
-            <a class="ui-symbol" ng-click="t.toggle()">p</a>
-            <mct-popup ng-if="t.isActive()">
-                <div style="background: #222;"
-                     mct-click-elsewhere="t.setState(false)">
-                    <mct-control key="'datetime-picker'"
-                                 ng-model="ngModel.outer"
-                                 field="'start'"
-                                 options="{ hours: true }">
-                    </mct-control>
-                </div>
-            </mct-popup>
-        </span>
+	<div class="l-time-range-inputs-holder">
+	    <span class="l-time-range-input">
+	        Start:
+		    <span class="s-time-range-val time-range-start">
+		        <span class="val">{{startOuterText}}</span>
+		        <span ng-controller="ToggleController as t1">
+		            <a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()"></a>
+		            <mct-popup ng-if="t1.isActive()">
+			            <div style="background: #222;"
+			                 mct-click-elsewhere="t1.setState(false)">
+				            <mct-control key="'datetime-picker'"
+				                         ng-model="ngModel.outer"
+				                         field="'start'"
+				                         options="{ hours: true }">
+				            </mct-control>
+			            </div>
+		            </mct-popup>
+		        </span>
+		    </span>
+	    </span>
 
-        End: {{endOuterText}}
-        <span ng-controller="ToggleController as t2">
-            <a class="ui-symbol" ng-click="t2.toggle()">p</a>
-            <mct-popup ng-if="t2.isActive()">
-                <div style="background: #222;"
-                     mct-click-elsewhere="t2.setState(false)">
-                    <mct-control key="'datetime-picker'"
-                                 ng-model="ngModel.outer"
-                                 field="'end'"
-                                 options="{ hours: true }">
-                    </mct-control>
-                </div>
-            </mct-popup>
-        </span>
+	    <span class="l-time-range-input">
+			End:
+		    <span class="s-time-range-val time-range-end">
+			    <span class="val">{{endOuterText}}</span>
+		        <span ng-controller="ToggleController as t2">
+		            <a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()"></a>
+		            <mct-popup ng-if="t2.isActive()">
+			            <div style="background: #222;"
+			                 mct-click-elsewhere="t2.setState(false)">
+				            <mct-control key="'datetime-picker'"
+				                         ng-model="ngModel.outer"
+				                         field="'end'"
+				                         options="{ hours: true }">
+				            </mct-control>
+			            </div>
+		            </mct-popup>
+		        </span>
+		    </span>&nbsp;
+	    </span>
 
 
-    </div>
+	</div>
 
-    <div class="l-time-range-slider-holder">
-        <div class="l-time-range-slider">
-            <div class="slider"
-                 mct-resize="spanWidth = bounds.width">
-                <div class="slot range-holder">
-                    <div class="range"
-                         mct-drag-down="startMiddleDrag()"
-                         mct-drag="middleDrag(delta[0])"
-                         ng-style="{ left: startInnerPct, right: endInnerPct}">
-                    </div>
-                </div>
-                <div class="knob knob-l"
-                     mct-drag-down="startLeftDrag()"
-                     mct-drag="leftDrag(delta[0])"
-                     ng-style="{ left: startInnerPct }">
-                    <div class="range-value">{{startInnerText}}</div>
-                </div>
-                <div class="knob knob-r"
-                     mct-drag-down="startRightDrag()"
-                     mct-drag="rightDrag(delta[0])"
-                     ng-style="{ right: endInnerPct }">
-                    <div class="range-value">{{endInnerText}}</div>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="l-time-range-slider-holder">
+		<div class="l-time-range-slider">
+			<div class="slider"
+			     mct-resize="spanWidth = bounds.width">
+				<div class="slot range-holder">
+					<div class="range"
+					     mct-drag-down="startMiddleDrag()"
+					     mct-drag="middleDrag(delta[0])"
+					     ng-style="{ left: startInnerPct, right: endInnerPct}">
+					</div>
+				</div>
+				<div class="knob knob-l"
+				     mct-drag-down="startLeftDrag()"
+				     mct-drag="leftDrag(delta[0])"
+				     ng-style="{ left: startInnerPct }">
+					<div class="range-value">{{startInnerText}}</div>
+				</div>
+				<div class="knob knob-r"
+				     mct-drag-down="startRightDrag()"
+				     mct-drag="rightDrag(delta[0])"
+				     ng-style="{ right: endInnerPct }">
+					<div class="range-value">{{endInnerText}}</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-    <div class="l-time-range-ticks-holder">
-        <div class="l-time-range-ticks">
-            <div
-                ng-repeat="tick in ticks"
-                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
-                class="tick tick-x"
-                >
-                <span class="l-time-range-tick-label">{{tick}}</span>
-            </div>
-        </div>
-    </div>
+	<div class="l-time-range-ticks-holder">
+		<div class="l-time-range-ticks">
+			<div
+				ng-repeat="tick in ticks"
+				ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
+				class="tick tick-x"
+				>
+				<span class="l-time-range-tick-label">{{tick}}</span>
+			</div>
+		</div>
+	</div>
 </div>