[Frontend] Time Controller Markup and Styling

open #1515
open #117
Significant re-org in menus.scss continued:
Refactored s-menu to s-menu-btn;
moved look-related style def's into .s-menu;
.menu now extends .s-menu;

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

@@ -58,7 +58,7 @@
 	display: inline-block;
 }
 
-.s-menu .invoke-menu,
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }

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

@@ -205,7 +205,7 @@ label.checkbox.custom {
 	}
 }
 
-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
 	margin-left: 5px;
 }
 

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

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-.s-menu {
+.s-menu-btn {
 	// Formerly .btn-menu
 	@extend .s-btn;
 	span.l-click-area {
@@ -66,13 +66,17 @@
 	position: relative;
 }
 
-.menu {
+.s-menu {
 	@include border-radius($basicCr);
 	@include containerSubtle($colorMenuBg, $colorMenuFg);
 	@include boxShdw($shdwMenu);
 	@include txtShdw($shdwMenuText);
-	display: block; // set to block via jQuery
 	padding: $interiorMarginSm 0;
+}
+
+.menu {
+	@extend .s-menu;
+	display: block;
 	position: absolute;
 	z-index: 10;
 	ul {
@@ -221,7 +225,6 @@
 
 .context-menu-holder,
 .menu-holder {
-	pointer-events: none;
 	position: absolute;
 	z-index: 70;
 	.context-menu-wrapper {
@@ -240,6 +243,7 @@
 }
 
 .context-menu-holder {
+	pointer-events: none;
 	height: 200px;
 	width: 170px;
 }

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

@@ -47,7 +47,7 @@
 	}
 	&.frame-template {
 		.s-btn,
-		.s-menu {
+		.s-menu-btn {
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
@@ -56,7 +56,7 @@
 			}
 		}
 
-		.s-menu:after {
+		.s-menu-btn:after {
 			font-size: 8px;
 		}
 

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

@@ -301,9 +301,9 @@
 
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
-.top-bar .s-menu,
+.top-bar .s-menu-btn,
 .tool-bar .s-btn,
-.tool-bar .s-menu {
+.tool-bar .s-menu-btn {
 	$h: $btnToolbarH;
 	height: $h;
 	line-height: $h;

platform/commonUI/general/res/templates/controls/datetime-picker.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div ng-controller="DateTimePickerController" class="menu l-datetime-picker s-datetime-picker">
+<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
 	<div class="holder">
 	    <div class="l-calendar">
 	        <div style="text-align: center;">

platform/commonUI/general/res/templates/controls/switcher.html

@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element s-menu"
+	    class="view-switcher menu-element s-menu-btn"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >

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

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
+<!-- MINE -->
 <div class="l-time-controller" ng-controller="TimeRangeController">
 	<div class="l-time-range-inputs-holder">
 		<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
@@ -29,7 +29,7 @@
 		        <span class="val">{{startOuterText}}</span>
 	            <a class="ui-symbol icon icon-calendar"></a>
 	            <mct-popup ng-if="t1.isActive()">
-		            <div mct-click-elsewhere="t1.setState(false)" class="menu-holder go-up">
+		            <div mct-click-elsewhere="t1.setState(false)">
 			            <mct-control key="'datetime-picker'"
 			                         ng-model="ngModel.outer"
 			                         field="'start'"
@@ -48,7 +48,7 @@
 			    <span class="val">{{endOuterText}}</span>
 	            <a class="ui-symbol icon icon-calendar"></a>
 	            <mct-popup ng-if="t2.isActive()">
-		            <div mct-click-elsewhere="t2.setState(false)" class="menu-holder go-up">
+		            <div mct-click-elsewhere="t2.setState(false)" class="xmenu-holder go-up">
 			            <mct-control key="'datetime-picker'"
 			                         ng-model="ngModel.outer"
 			                         field="'end'"
@@ -101,3 +101,80 @@
 		</div>
 	</div>
 </div>
+
+<!-- VICTOR's -->
+<!--
+<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>
+
+		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>
+
+
+	</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>-->