Merge remote-tracking branch 'origin/open889' into open922

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

@@ -145,3 +145,8 @@
 .flex-justify-end {
     @include justify-content(flex-end);
 }
+
+/********************************************* POPUPS */
+.t-popup {
+    z-index: 75;
+}

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, 18px, 20px);
 // 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

@@ -139,6 +139,17 @@
     background-size: $d $d;
 }
 
+@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
+    @include background-image(linear-gradient($angle,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $bgsize $bgsize;
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     @include background-image(linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -322,13 +333,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;
@@ -396,11 +396,11 @@ input[type="search"] {
         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 {
@@ -426,7 +426,6 @@ input[type="search"] {
     @include user-select(none);
     font-size: 0.8rem;
     padding: $interiorMarginLg !important;
-    width: 230px;
     .l-month-year-pager {
         $pagerW: 20px;
         height: $r1H;
@@ -518,6 +517,19 @@ input[type="search"] {
     }
 }
 
+@include phone {
+    .l-datetime-picker {
+        padding: $interiorMargin !important;
+    }
+    .l-calendar {
+        ul.l-cal-row {
+            li {
+                padding: 2px $interiorMargin;
+            }
+        }
+    }
+}
+
 /******************************************************** TEXTAREA */
 textarea {
     @include nice-textarea($colorInputBg, $colorInputFg);

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

@@ -10,25 +10,24 @@
 	$knobHOffset: 0px;
 	$knobM: ($sliderKnobW + $knobHOffset) * -1;
 	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW;
+	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$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;
+        &:not(:first-child) {
+            margin-top: $interiorMargin;
+        }
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
@@ -37,14 +36,21 @@
 	}
 
 	.l-time-range-inputs-holder {
-		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
-		padding-top: $interiorMargin;
 		border-top: 1px solid $colorInteriorBorder;
+        padding-top: $interiorMargin;
+        &.l-flex-row,
+        .l-flex-row {
+            @include align-items(center);
+            .flex-elem {
+                height: auto;
+                line-height: normal;
+            }
+        }
 		.type-icon {
 			font-size: 120%;
 			vertical-align: middle;
 		}
-		.l-time-range-input,
+		.l-time-range-input-w,
 		.l-time-range-inputs-elem {
 			margin-right: $interiorMargin;
 			.lbl {
@@ -52,13 +58,27 @@
 			}
 			.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;
+            }
+        }
 	}
 
 	.l-time-range-slider-holder {
-		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
+		height: $r2H;
 		.range-holder {
 			box-shadow: none;
 			background: none;
@@ -73,24 +93,13 @@
 					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: 2px;
+						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 {
@@ -126,9 +135,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;
 				}
@@ -138,16 +147,29 @@
 
 	.knob {
 		z-index: 2;
+        &:before {
+            $mTB: 2px;
+            $grippyW: 3px;
+            $mLR: ($sliderKnobW - $grippyW)/2;
+            @include bgStripes($c: pullForward($sliderColorKnob, 20%), $a: 1, $bgsize: 4px, $angle: 0deg);
+            content: '';
+            display: block;
+            position: absolute;
+            top: $mTB; right: $mLR; bottom: $mTB; left: $mLR;
+        }
 		.range-value {
 			@include trans-prop-nice-fade(.25s);
-			padding: 0 $rangeValOffset;
+            font-size: 0.7rem;
 			position: absolute;
 			height: $r2H;
 			line-height: $r2H;
-			white-space: nowrap;
+            white-space: nowrap;
+            z-index: 1;
 		}
-		&:hover .range-value {
+		&:hover {
-			color: $sliderColorKnobHov;
+            .range-value {
+                color: $sliderColorKnobHov;
+            }
 		}
 		&.knob-l {
 			margin-left: $knobM;
@@ -170,7 +192,7 @@
 	.l-time-domain-selector {
 		position: absolute;
 		right: 0px;
-		bottom: 46px;
+		top: $interiorMargin;
 	}
 
 }
@@ -181,174 +203,64 @@
 	padding: 1px 1px 0 $interiorMargin;
 }
 
+/******************************************************************** MOBILE */
+
 @include phoneandtablet {
-	.l-time-controller, .l-time-range-inputs-holder {
+    .l-time-controller {
-		min-width: 0px;
+        min-width: 0;
-	}
+        .l-time-range-slider-holder,
-
+        .l-time-range-ticks-holder {
-	.l-time-controller {
+            display: none;
-
+        }
-		.l-time-domain-selector {
+    }
-			select {
-				height: 25px;
-				margin-bottom: 0px;
-			}
-		}
-
-		.l-time-range-slider-holder, .l-time-range-ticks-holder {
-			display: none;
-		}
-
-		.time-range-start, .time-range-end, {
-			width: 100%;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				display: block;
-				.s-btn {
-					padding-right: 18px;
-					white-space: nowrap;
-					input {
-						width: 100%;
-					}
-				}
-			}
-			.l-time-range-inputs-elem {
-
-			}
-		}
-	}
 }
 
 @include phone {
-	.l-time-controller {
+    .l-time-controller {
-		height: 48px;
+        .l-time-range-inputs-holder {
-
+            &.l-flex-row,
-		.l-time-range-inputs-holder {
+            .l-flex-row {
-			bottom: 24px;
+                @include align-items(flex-start);
-		}
+            }
-
+            .l-time-range-inputs-elem {
-		.l-time-domain-selector {
+                &.type-icon {
-			width: 33%;
+                    margin-top: 3px;
-			bottom: -9px;
+                }
-		}
+            }
-
+            .t-inputs-w {
-		.l-time-range-inputs-holder {
+                @include flex-direction(column);
-			.l-time-range-input {
+                .l-time-range-input-w:not(:first-child) {
-				margin-bottom: 5px;
+                    &:not(:first-child) {
-				.s-btn {
+                        margin-top: $interiorMargin;
-					width: 66%;
+                    }
-				}
+                    margin-right: 0;
-			}
+                }
-			.l-time-range-inputs-elem {
+                .l-time-range-inputs-elem {
-				&.ui-symbol {
+                    &.lbl { display: none; }
-					display: none;
+                }
-				}
+            }
-
+        }
-				&.lbl {
+    }
-					width: 33%;
-					right: 0px;
-					top: 5px;
-					display: block;
-					height: 25px;
-					margin: 0;
-					line-height: 25px;
-					position: absolute;
-				}
-			}
-		}
-	}
 }
 
-
+@include phonePortrait {
-@include tablet {
+    .l-time-controller {
-	.l-time-controller {
+        .l-time-range-inputs-holder {
-		height: 17px;
+            .t-inputs-w {
-
+                @include flex(1 1 auto);
-		.l-time-range-inputs-holder {
+                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
-			bottom: -7px;
+                .flex-elem {
-			left: -5px;
+                    @include flex(1 1 auto);
-		}
+                    width: 100%;
-
+                }
-		.l-time-domain-selector {
+                input[type="text"] {
-			width: 23%;
+                    width: 100%;
-			right: -4px;
+                }
-			bottom: -10px;
+            }
-		}
+        }
-
+    }
-		.l-time-range-inputs-holder {
+    .l-time-domain-selector {
-			.l-time-range-input {
+        right: auto;
-				float: left;
+        left: 20px;
-				.s-btn {
+    }
-					width: 100%;
-					padding-left: 4px;
-				}
-			}
-		}
-	}
-}
-
-@include tabletLandscape {
-	.l-time-controller {
-		height: 17px;
-
-		.l-time-range-inputs-holder {
-			bottom: -7px;
-		}
-
-		.l-time-domain-selector {
-			width: 23%;
-			right: auto;
-			bottom: -10px;
-			left: 391px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-inputs-elem {
-				&.ui-symbol, &.lbl {
-					display: block;
-					float: left;
-					line-height: 25px;
-				}
-			}
-		}
-	}
-
-	.pane-tree-hidden .l-time-controller {
-		.l-time-domain-selector {
-			left: 667px;
-		}
-		.l-time-range-inputs-holder {
-			padding-left: 277px;
-		}
-	}
-}
-@include tabletPortrait {
-	.l-time-controller {
-		height: 17px;
-
-		.l-time-range-inputs-holder {
-			bottom: -7px;
-			left: -5px;
-		}
-
-		.l-time-domain-selector {
-			width: 23%;
-			right: -4px;
-			bottom: -10px;
-		}
-
-		.l-time-range-inputs-holder {
-			.l-time-range-input {
-				width: 38%;
-				float: left;
-			}
-			.l-time-range-inputs-elem {
-				&.ui-symbol, &.lbl {
-					display: 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/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>
@@ -38,8 +37,7 @@
         <div mct-click-elsewhere="picker.active = false">
             <mct-control key="'datetime-picker'"
                          ng-model="pickerModel"
-                         field="'value'"
+                         field="'value'">
-                         options="{ hours: true }">
             </mct-control>
         </div>
     </mct-popup>

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

@@ -19,42 +19,43 @@
  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"
+    <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">&#x43;</span>
+        <span class="l-time-range-inputs-elem ui-symbol type-icon flex-elem">&#x43;</span>
-        <span class="l-time-range-input">
+        <span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
-            <mct-control key="'datetime-field'"
+            <span class="l-time-range-input-w flex-elem">
-                         structure="{
+                <mct-control key="'datetime-field'"
-                             format: parameters.format,
+                             structure="{
-                             validate: trCtrl.validateStart
+                                 format: parameters.format,
-                         }"
+                                 validate: trCtrl.validateStart
-                         ng-model="formModel"
+                             }"
-                         ng-blur="trCtrl.updateBoundsFromForm()"
+                             ng-model="formModel"
-                         field="'start'"
+                             ng-blur="trCtrl.updateBoundsFromForm()"
-                         class="time-range-start">
+                             field="'start'"
-            </mct-control>
+                             class="time-range-start">
+                </mct-control>
+            </span>
+
+            <span class="l-time-range-inputs-elem lbl flex-elem">to</span>
+
+            <span class="l-time-range-input-w flex-elem" ng-controller="ToggleController as t2">
+                <mct-control key="'datetime-field'"
+                             structure="{
+                                 format: parameters.format,
+                                 validate: trCtrl.validateEnd
+                             }"
+                             ng-model="formModel"
+                             ng-blur="trCtrl.updateBoundsFromForm()"
+                             field="'end'"
+                             class="time-range-end">
+                </mct-control>
+            </span>
         </span>
-
-        <span class="l-time-range-inputs-elem lbl">to</span>
-
-        <span class="l-time-range-input" ng-controller="ToggleController as t2">
-            <mct-control key="'datetime-field'"
-                         structure="{
-                             format: parameters.format,
-                             validate: trCtrl.validateEnd
-                         }"
-                         ng-model="formModel"
-                         ng-blur="trCtrl.updateBoundsFromForm()"
-                         field="'end'"
-                         class="time-range-end">
-            </mct-control>&nbsp;
-        </span>
-
         <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 +86,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/general/src/directives/MCTPopup.js

@@ -49,10 +49,7 @@ define(
                     position = [rect.left, rect.top],
                     popup = popupService.display(div, position);
 
-                // TODO: Handle in CSS;
+                div.addClass('t-popup');
-                //       https://github.com/nasa/openmctweb/issues/298
-                div.css('z-index', 75);
-
                 transclude(function (clone) {
                     div.append(clone);
                 });

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

@@ -32,11 +32,12 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.1);
 $sliderColorRange: rgba($sliderColorBase, 0.3);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.5);
-$sliderColorKnob: rgba($sliderColorBase, 0.6);
+$sliderColorKnob: $sliderColorBase;
-$sliderColorKnobHov: $sliderColorBase;
+$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 
@@ -69,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

@@ -32,11 +32,12 @@ $sliderColorBase: $colorKey;
 $sliderColorRangeHolder: rgba(black, 0.07);
 $sliderColorRange: rgba($sliderColorBase, 0.2);
 $sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: rgba($sliderColorBase, 0.5);
+$sliderColorKnob: pushBack($sliderColorBase, 20%);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
+$sliderColorRangeValHovBg: $sliderColorRange;
 $sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: nth($ueTimeControlH,2)/2;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 
@@ -69,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;