[Frontend] Layout and positioning fixes for TC controls

open #889
IN PROGRESS
- Smaller font used on range value;
- More space allocated to left and right
for slider range values;
- Style tweaks to slider look;
- Layout and style of datetime inputs
fixed;
- Input error colors fixed, moved to
theme constants;

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

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

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

@@ -63,9 +63,10 @@ input, textarea {
 	font-family: Helvetica, Arial, sans-serif;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="search"] {
 	vertical-align: baseline;
-	padding: 3px 5px !important;
+	padding: 3px 5px;
 }
 
 h1, h2, h3 {

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

@@ -322,13 +322,13 @@
 	color: $fg;
 	outline: none;
 	&.error {
-		background: rgba(red, 0.5);
+		background-color: $colorFormFieldErrorBg;
+        color: $colorFormFieldErrorFg;
 	}
 }
 
 @mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg) {
 	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
 }
 
 @mixin contextArrow() {

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

@@ -29,7 +29,7 @@
     .accordion-head {
         $op: 0.2;
         border-radius: $basicCr * 0.75;
-        box-sizing: "border-box";
+        box-sizing: border-box;
         background: rgba($colorBodyFg, $op);
         cursor: pointer;
         font-size: 0.75em;

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

@@ -10,8 +10,8 @@
 	$knobHOffset: 0px;
 	$knobM: ($sliderKnobW + $knobHOffset) * -1;
 	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW;
+	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$timeRangeSliderLROffset: 80px + ($sliderKnobW * 2);
+	$timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
 	$r1H: nth($ueTimeControlH,1);
 	$r2H: nth($ueTimeControlH,2);
 	$r3H: nth($ueTimeControlH,3);
@@ -38,7 +38,6 @@
 
 	.l-time-range-inputs-holder {
 		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
-		//padding-top: $interiorMargin;
 		border-top: 1px solid $colorInteriorBorder;
         &.l-flex-row {
             @include align-items(center);
@@ -51,7 +50,7 @@
 			font-size: 120%;
 			vertical-align: middle;
 		}
-		.l-time-range-input,
+		.l-time-range-input-w,
 		.l-time-range-inputs-elem {
 			margin-right: $interiorMargin;
 			.lbl {
@@ -59,7 +58,21 @@
 			}
 			.ui-symbol.icon {
 				font-size: 11px;
-				width: 11px;
+			}
+		}
+        .l-time-range-input-w {
+            // Wraps a datetime text input field
+            position: relative;
+            input[type="text"] {
+                width: 200px;
+                &.picker-icon {
+                    padding-right: 20px;
+                }
+            }
+            .icon-calendar {
+                position: absolute;
+                right: 5px;
+                top: 5px;
             }
         }
 	}
@@ -80,26 +93,14 @@
 					width: $myW;
 					height: auto;
 					z-index: 2;
-					&:before,
-					&:after {
-						background-color: $myC;
-						//content: "";
-						position: absolute;
-					}
 					&:before {
 						// Vert line
+                        background-color: $myC;
+                        position: absolute;
                         content: "";
 						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
 						width: 1px;
 					}
-/*					&: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;
@@ -149,10 +150,10 @@
 		.range-value {
 			@include trans-prop-nice-fade(.25s);
             font-size: 0.7rem;
-			padding: 0 $rangeValOffset;
 			position: absolute;
 			height: $r2H;
-			line-height: $r2H/2;
+			line-height: $r2H;
+            white-space: nowrap;
             z-index: 1;
 		}
 		&:hover {
@@ -181,7 +182,7 @@
 	.l-time-domain-selector {
 		position: absolute;
 		right: 0px;
-		bottom: 43px;
+		bottom: $r2H + $r3H + $interiorMargin;
 	}
 
 }
@@ -272,7 +273,6 @@
 	}
 }
 
-
 @include tablet {
 	.l-time-controller {
 		height: 17px;

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

@@ -19,18 +19,17 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<span class="s-btn"
+<span ng-controller="DateTimeFieldController">
-      ng-controller="DateTimeFieldController">
     <input type="text"
            ng-model="textValue"
            ng-blur="restoreTextValue(); ngBlur()"
            ng-class="{
                         error: textInvalid ||
                             (structure.validate &&
-                                !structure.validate(ngModel[field]))
+                                !structure.validate(ngModel[field])),
+                        'picker-icon': structure.format === 'utc' || !structure.format
                      }">
-    </input>
+    </input><a class="ui-symbol icon icon-calendar"
-    <a class="ui-symbol icon icon-calendar"
        ng-if="structure.format === 'utc' || !structure.format"
        ng-click="picker.active = !picker.active">
     </a>

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

@@ -23,7 +23,7 @@
     <form class="l-time-range-inputs-holder l-flex-row"
           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 flex-elem">
+        <span class="l-time-range-input-w flex-elem">
             <mct-control key="'datetime-field'"
                          structure="{
                              format: parameters.format,
@@ -38,7 +38,7 @@
 
         <span class="l-time-range-inputs-elem lbl flex-elem">to</span>
 
-        <span class="l-time-range-input flex-elem" ng-controller="ToggleController as t2">
+        <span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
             <mct-control key="'datetime-field'"
                          structure="{
                              format: parameters.format,
@@ -48,7 +48,7 @@
                          ng-blur="trCtrl.updateBoundsFromForm()"
                          field="'end'"
                          class="time-range-end">
-            </mct-control>&nbsp;
+            </mct-control>
         </span>
 
         <input type="submit" class="hidden">

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

@@ -70,8 +70,10 @@ $colorCreateMenuText: $colorMenuFg;
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
 $colorFormValid: #33cc33;
-$colorFormError: #cc0000;
+$colorFormError: #990000;
 $colorFormInvalid: #ff3300;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#fff, 0.1);
 $colorInputBg: rgba(#000, 0.1);

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

@@ -36,7 +36,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 5px; //nth($ueTimeControlH,2)/2;
+$sliderKnobW: 10px;
 $sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
@@ -70,8 +70,10 @@ $colorCreateMenuText: $colorBodyFg;
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: #33cc33;
-$colorFormError: #cc0000;
+$colorFormError: #990000;
 $colorFormInvalid: #ff2200;
+$colorFormFieldErrorBg: $colorFormError;
+$colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;