squash merge open933 into integration-1089, resolve merge conflicts.

2016-10-12 13:47:56 -07:00
parent 7b218c7f02
commit 65043d0ff3
76 changed files with 4955 additions and 358 deletions
--- a/platform/commonUI/general/res/sass/_animations.scss
+++ b/platform/commonUI/general/res/sass/_animations.scss
@@ -0,0 +1,91 @@
+@include keyframes(rotation) {
+    100% { @include transform(rotate(360deg)); }
+}
+
+@include keyframes(rotation-centered) {
+    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
+}
+
+@include keyframes(clock-hands) {
+    0% { @include transform(translate(-50%, -50%) rotate(0deg)); }
+    100% { @include transform(translate(-50%, -50%) rotate(360deg));  }
+}
+
+@include keyframes(clock-hands-sticky) {
+    0% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    7% {
+        @include transform(translate(-50%, -50%) rotate(0deg));
+    }
+    8% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    15% {
+        @include transform(translate(-50%, -50%) rotate(30deg));
+    }
+    16% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    24% {
+        @include transform(translate(-50%, -50%) rotate(60deg));
+    }
+    25% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    32% {
+        @include transform(translate(-50%, -50%) rotate(90deg));
+    }
+    33% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    40% {
+        @include transform(translate(-50%, -50%) rotate(120deg));
+    }
+    41% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    49% {
+        @include transform(translate(-50%, -50%) rotate(150deg));
+    }
+    50% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    57% {
+        @include transform(translate(-50%, -50%) rotate(180deg));
+    }
+    58% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    65% {
+        @include transform(translate(-50%, -50%) rotate(210deg));
+    }
+    66% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    74% {
+        @include transform(translate(-50%, -50%) rotate(240deg));
+    }
+    75% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    82% {
+        @include transform(translate(-50%, -50%) rotate(270deg));
+    }
+    83% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    90% {
+        @include transform(translate(-50%, -50%) rotate(300deg));
+    }
+    91% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    99% {
+        @include transform(translate(-50%, -50%) rotate(330deg));
+    }
+    100% {
+        @include transform(translate(-50%, -50%) rotate(360deg));
+    }
+}
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -108,6 +108,9 @@
        &.grows {
            @include flex(1 1 auto);
        }
+        &.contents-align-right {
+            text-align: right;
+        }
    }
    .flex-container {
        // Apply to wrapping elements, mct-includes, etc.
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -49,7 +49,6 @@ $uePaneMiniTabFontSize: 8px;
 $uePaneMiniTabCollapsedW: 18px;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
-$ueTimeControlH: (33px, 18px, 20px);
 /*************** Panes */
 $ueBrowseLeftPaneTreeMinW: 150px;
 $ueBrowseLeftPaneTreeMaxW: 35%;
@@ -112,6 +111,7 @@ $bubbleMaxW: 300px;
 $reqSymbolW: 15px;
 $reqSymbolM: $interiorMargin * 2;
 $reqSymbolFontSize: 0.75em;
+$inputTextP: 3px 5px;
 /*************** Wait Spinner Defaults */
 $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
--- a/platform/commonUI/general/res/sass/_data-status.scss
+++ b/platform/commonUI/general/res/sass/_data-status.scss
@@ -4,4 +4,3 @@
 		@include s-stale();
 	}
 }
-
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -39,20 +39,20 @@
    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
 }

-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0) {
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
    @include keyframes($animName) {
        from { #{propName}: $propValStart; }
        to { #{$propName}: $propValEnd; }
    }
-    @include animToParams($animName, $dur: 500ms, $delay: 0)
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
 }

-@mixin animToParams($animName, $dur: 500ms, $delay: 0) {
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
    @include animation-name($animName);
    @include animation-duration($dur);
    @include animation-delay($delay);
    @include animation-fill-mode(both);
-    @include animation-direction(normal);
-    @include animation-iteration-count(1);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
    @include animation-timing-function(ease-in-out);
 }
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -82,7 +82,7 @@ input, textarea {
 input[type="text"],
 input[type="search"] {
 	vertical-align: baseline;
-	padding: 3px 5px;
+	padding: $inputTextP;
 }

 h1, h2, h3 {
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -30,6 +30,7 @@

 .ui-symbol {
    font-family: 'symbolsfont';
+    -webkit-font-smoothing: antialiased;
 }

 .ui-symbol.icon {
@@ -70,10 +71,21 @@
    line-height: inherit;
    position: relative;
    &.l-icon-link {
-        .t-item-icon-glyph {
+        &:after {
+            color: $colorIconLink;
+            content: $glyph-icon-link;
+            height: auto; width: auto;
+            position: absolute;
+            left: 0; top: 0; right: 0; bottom: 20%;
+            @include transform-origin(bottom left);
+            @include transform(scale(0.3));
+            z-index: 2;
+        }
+
+/*        .t-item-icon-glyph {
            &:after {
                color: $colorIconLink;
-                content: $glyph-icon-link;
+                content: '\e921'; //$glyph-icon-link;
                height: auto; width: auto;
                position: absolute;
                left: 0; top: 0; right: 0; bottom: 20%;
@@ -81,6 +93,6 @@
                @include transform(scale(0.3));
                z-index: 2;
            }
-        }
+        }*/
    }
 }
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -22,6 +22,7 @@
@import "effects";
@import "global";
@import "glyphs";
+@import "animations";
@import "archetypes";
@import "about";
@import "text";
@@ -41,7 +42,6 @@
@import "controls/lists";
@import "controls/menus";
@import "controls/messages";
-@import "controls/time-controller";
@import "mobile/controls/menus";

 /********************************* FORMS */
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -185,21 +185,15 @@
 }

@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    //$b: 1px solid lighten($bg, 30%);
    border-radius: 2px;
    box-sizing: border-box;
    @include boxIncised(0.7);
    background-color: $bg;
-    //border-bottom: $b;
-    //border-right: $b;
 }

@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    //&:before {
-    //@include trans-prop-nice("border-color", 25ms);
    content: '';
    display: block;
-    //height: auto;
    pointer-events: none;
    position: absolute;
    z-index: 2;
@@ -274,16 +268,6 @@
    text-shadow: rgba(black, $sVal) 0 3px 7px;
 }

-@function pullForward($c, $p: 20%) {
-    // For dark interfaces, lighter things come forward
-    @return lighten($c, $p);
-}
-
-@function pushBack($c, $p: 20%) {
-    // For dark interfaces, darker things move back
-    @return darken($c, $p);
-}
-
@function percentToDecimal($p) {
 	@return $p / 100%;
 }
@@ -304,7 +288,6 @@
 	border-radius: $controlCr;
 	box-sizing: border-box;
 	color: $fg;
-	//display: inline-block;
 }

@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -296,8 +296,6 @@ input[type="search"] {
    .title-label {
        color: $colorObjHdrTxt;
        @include ellipsize();
-        @include webkitProp(flex, '0 1 auto');
-        padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
    }

    .context-available-w {
@@ -308,6 +306,10 @@ input[type="search"] {
        font-size: 0.7em;
        @include flex(0 0 1);
    }
+
+    .t-object-alert {
+        display: none;
+    }
 }

 /******************************************************** PROGRESS BAR */
@@ -441,6 +443,63 @@ input[type="search"] {
    }
 }

+@mixin sliderKnob() {
+    $h: 16px;
+    cursor: pointer;
+    width: floor($h/1.75);
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    //border-radius: 50% !important;
+}
+
+@mixin sliderKnobRound() {
+    $h: 12px;
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    margin-top: 1 + floor($h/2) * -1;
+    @include btnSubtle(pullForward($colorBtnBg, 10%));
+    border-radius: 50% !important;
+}
+
+input[type="range"] {
+    // HTML5 range inputs
+
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    &:focus {
+        outline: none; /* Removes the blue border. */
+    }
+
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnobRound();
+    }
+    &::-moz-range-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+    &::-ms-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+}
+
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
    $r1H: 15px;
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -178,7 +178,7 @@
 	}
 	.pane {
 		box-sizing: border-box;
-		&.left {
+		&.menu-items {
 			border-right: 1px solid pullForward($colorMenuBg, 10%);
 			left: 0;
 			padding-right: $interiorMargin;
@@ -194,38 +194,53 @@
 				}
 			}
 		}
-		&.right {
+		&.menu-item-description {
 			left: auto;
 			right: 0;
 			padding: $interiorMargin * 5;
 			width: $prw;
+            .desc-area {
+                &.icon {
+                    color: $colorCreateMenuLgIcon;
+                    font-size: 8em;
+                    margin-bottom: $interiorMargin * 3;
+                    position: relative;
+                    text-align: center;
+                }
+                &.title {
+                    color: $colorCreateMenuText;
+                    font-size: 1.2em;
+                    margin-bottom: $interiorMargin * 2;
+                }
+                &.description {
+                    color: pushBack($colorCreateMenuText, 20%);
+                    font-size: 0.8em;
+                    line-height: 1.5em;
+                }
+            }
 		}
 	}
-	.menu-item-description {
-		.desc-area {
-			&.icon {
-				$h: 150px;
-				color: $colorCreateMenuLgIcon;
-				position: relative;
-				font-size: 8em;
-				left: 0;
-				height: $h;
-				line-height: $h;
-				margin-bottom: $interiorMargin * 5;
-				text-align: center;
-			}
-			&.title {
-				color: $colorCreateMenuText;
-				font-size: 1.2em;
-				margin-bottom: 0.5em;
-			}
-			&.description {
-				color: $colorCreateMenuText;
-				font-size: 0.8em;
-				line-height: 1.5em;
-			}
-		}
-	}
+
+    &.mini {
+        width: 400px;
+        height: 300px;
+        .pane {
+            &.menu-items {
+                font-size: 0.8em;
+            }
+            &.menu-item-description {
+                padding: $interiorMargin * 3;
+                .desc-area {
+                    &.icon {
+                        font-size: 4em;
+                    }
+                    &.title {
+                        font-size: 1em;
+                    }
+                }
+            }
+        }
+    }
 }
 .context-menu {
 	font-size: 0.80rem;
@@ -262,3 +277,7 @@
 	right: 0;
 	width: auto;
 }
+
+.menus-up .menu {
+    bottom: $btnStdH; top: auto;
+}
--- a/platform/commonUI/general/res/sass/controls/_messages.scss
+++ b/platform/commonUI/general/res/sass/controls/_messages.scss
@@ -345,3 +345,29 @@ body.desktop .t-message-single {
 body.desktop .t-message-list {
    .message-contents .l-message { margin-right: $interiorMarginLg; }
 }
+
+// Alert elements in views
+.s-unsynced {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+    @include animTo($animName: pulsePaused, $propName: border-color, $propValStart: rgba($c, 0.8), $propValEnd: rgba($c, 0.5), $dur: $animPausedPulseDur, $dir: alternate, $count: infinite);
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @extend .s-unsynced;
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
+            &.t-alert-unsynced {
+                @extend .icon-alert-triangle;
+                color: $colorPausedBg;
+            }
+        }
+    }
+}
+
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -1,266 +0,0 @@
-@mixin toiLineHovEffects() {
-	&:before,
-	&:after {
-		background-color: $timeControllerToiLineColorHov;
-	}
-}
-
-.l-time-controller {
-	$minW: 500px;
-	$knobHOffset: 0px;
-	$knobM: ($sliderKnobW + $knobHOffset) * -1;
-	$rangeValPad: $interiorMargin;
-	$rangeValOffset: $sliderKnobW + $interiorMargin;
-	$timeRangeSliderLROffset: 150px + ($sliderKnobW * 2);
-	$r1H: nth($ueTimeControlH,1); // Not currently used
-	$r2H: nth($ueTimeControlH,2);
-	$r3H: nth($ueTimeControlH,3);
-
-    min-width: $minW;
-    font-size: 0.8rem;
-
-	.l-time-range-inputs-holder,
-	.l-time-range-slider-holder,
-	.l-time-range-ticks-holder
-	{
-		box-sizing: border-box;
-        position: relative;
-        &:not(:first-child) {
-            margin-top: $interiorMargin;
-        }
-	}
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		@include absPosDefault(0, visible);
-		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
-	}
-
-	.l-time-range-inputs-holder {
-		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-w,
-		.l-time-range-inputs-elem {
-			margin-right: $interiorMargin;
-			.lbl {
-				color: $colorPlotLabelFg;
-			}
-			.ui-symbol.icon {
-				font-size: 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;
-		.range-holder {
-			box-shadow: none;
-			background: none;
-			border: none;
-			.range {
-				.toi-line {
-					$myC: $timeControllerToiLineColor;
-					$myW: 8px;
-					@include transform(translateX(50%));
-					position: absolute;
-					top: 0; right: 0; bottom: 0px; left: auto;
-					width: $myW;
-					height: auto;
-					z-index: 2;
-					&:before {
-						// Vert line
-                        background-color: $myC;
-                        position: absolute;
-                        content: "";
-						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
-						width: 1px;
-					}
-				}
-				&:hover .toi-line {
-					@include toiLineHovEffects;
-				}
-			}
-		}
-		&:not(:active) {
-			.knob,
-			.range {
-				@include transition-property(left, right);
-				@include transition-duration(500ms);
-				@include transition-timing-function(ease-in-out);
-			}
-		}
-	}
-
-	.l-time-range-ticks-holder {
-		height: $r3H;
-		.l-time-range-ticks {
-			border-top: 1px solid $colorTick;
-			.tick {
-				background-color: $colorTick;
-				border:none;
-				height: 5px;
-				width: 1px;
-				margin-left: -1px;
-				position: absolute;
-				&:first-child {
-					margin-left: 0;
-				}
-				.l-time-range-tick-label {
-					@include webkitProp(transform, translateX(-50%));
-					color: $colorPlotLabelFg;
-					display: inline-block;
-					font-size: 0.7rem;
-					position: absolute;
-					top: 5px;
-					white-space: nowrap;
-					z-index: 2;
-				}
-			}
-		}
-	}
-
-	.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);
-            font-size: 0.7rem;
-			position: absolute;
-			height: $r2H;
-			line-height: $r2H;
-            white-space: nowrap;
-            z-index: 1;
-		}
-		&:hover {
-            .range-value {
-                color: $sliderColorKnobHov;
-            }
-		}
-		&.knob-l {
-			margin-left: $knobM;
-			.range-value {
-				text-align: right;
-				right: $rangeValOffset;
-			}
-		}
-		&.knob-r {
-			margin-right: $knobM;
-			.range-value {
-				left: $rangeValOffset;
-			}
-			&:hover + .range-holder .range .toi-line {
-				@include toiLineHovEffects;
-			}
-		}
-	}
-
-	.l-time-domain-selector {
-		position: absolute;
-		right: 0px;
-		top: $interiorMargin;
-	}
-
-}
-
-.s-time-range-val {
-	border-radius: $controlCr;
-	background-color: $colorInputBg;
-	padding: 1px 1px 0 $interiorMargin;
-}
-
-/******************************************************************** MOBILE */
-
-@include phoneandtablet {
-    .l-time-controller {
-        min-width: 0;
-        .l-time-range-slider-holder,
-        .l-time-range-ticks-holder {
-            display: none;
-        }
-    }
-}
-
-@include phone {
-    .l-time-controller {
-        .l-time-range-inputs-holder {
-            &.l-flex-row,
-            .l-flex-row {
-                @include align-items(flex-start);
-            }
-            .l-time-range-inputs-elem {
-                &.type-icon {
-                    margin-top: 3px;
-                }
-            }
-            .t-inputs-w {
-                @include flex-direction(column);
-                .l-time-range-input-w:not(:first-child) {
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                    margin-right: 0;
-                }
-                .l-time-range-inputs-elem {
-                    &.lbl { display: none; }
-                }
-            }
-        }
-    }
-}
-
-@include phonePortrait {
-    .l-time-controller {
-        .l-time-range-inputs-holder {
-            .t-inputs-w {
-                @include flex(1 1 auto);
-                padding-top: 25px; // Make room for the ever lovin' Time Domain Selector
-                .flex-elem {
-                    @include flex(1 1 auto);
-                    width: 100%;
-                }
-                input[type="text"] {
-                    width: 100%;
-                }
-            }
-        }
-    }
-    .l-time-domain-selector {
-        right: auto;
-        left: 20px;
-    }
-}
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -74,7 +74,7 @@
 .s-image-main {
 	border: 1px solid transparent;
 	&.paused {
-		border-color: $colorPausedBg;
+		@extend .s-unsynced;
 	}
 }

--- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
+++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
@@ -19,15 +19,6 @@
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-@include keyframes(rotation) {
-    100% { @include transform(rotate(360deg)); }
-}
-
-@include keyframes(rotation-centered) {
-    0%   { @include transform(translate(-50%, -50%) rotate(0deg)); }
-    100% { @include transform(translate(-50%, -50%) rotate(360deg)); }
-}
-
@mixin  spinner($b: 5px, $c: $colorKey) {
    @include transform-origin(center);
    @include animation-name(rotation-centered);
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -128,7 +128,7 @@
        line-height: $ueTopBarH;
    }

-    .primary-pane {
+    .t-object.primary-pane {
        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
        z-index: 4;
    }
@@ -212,6 +212,8 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
        .holder-object {
            top: $bodyMargin;
            bottom: $interiorMargin;
+            // Clip element that have min-widths
+            overflow: hidden;
        }
        .holder-inspector {
            top: $bodyMargin;