[Frontend] Ported over all /platform changes from warp1222

WTD-1222

platform/commonUI/general/res/css/forms.css

@@ -302,8 +302,7 @@ label.form-control.checkbox input {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 22, ../sass/forms/_text-input.scss */
-input[type="text"],
+input[type="text"] {
-input[type="date"] {
   -moz-appearance: none;
   -webkit-appearance: none;
   -moz-border-radius: 3px;
@@ -322,32 +321,10 @@ input[type="date"] {
   outline: none;
   padding: 0 3px; }
   /* line 33, ../sass/forms/_mixins.scss */
-  input[type="text"].error,
+  input[type="text"].error {
-  input[type="date"].error {
     background: rgba(255, 0, 0, 0.5); }
-  /* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
+  /* line 29, ../sass/forms/_text-input.scss */
-  input[type="text"]:-moz-placeholder,
+  input[type="text"].numeric {
-  input[type="date"]:-moz-placeholder {
-    color: gray;
-    font-style: italic; }
-  /* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
-  input[type="text"]::-moz-placeholder,
-  input[type="date"]::-moz-placeholder {
-    color: gray;
-    font-style: italic; }
-  /* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
-  input[type="text"]:-ms-input-placeholder,
-  input[type="date"]:-ms-input-placeholder {
-    color: gray;
-    font-style: italic; }
-  /* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */
-  input[type="text"]::-webkit-input-placeholder,
-  input[type="date"]::-webkit-input-placeholder {
-    color: gray;
-    font-style: italic; }
-  /* line 34, ../sass/forms/_text-input.scss */
-  input[type="text"].numeric,
-  input[type="date"].numeric {
     text-align: right; }
 
 /*****************************************************************************
@@ -397,7 +374,7 @@ input[type="date"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 148, ../sass/_mixins.scss */
+  /* line 173, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;

platform/commonUI/general/res/css/items.css

@@ -119,7 +119,7 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 148, ../sass/_mixins.scss */
+    /* line 173, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -210,7 +210,7 @@
       background-image: -webkit-linear-gradient(#33ccff, #0099cc);
       background-image: linear-gradient(#33ccff, #0099cc);
       color: #80dfff; }
-      /* line 156, ../sass/_mixins.scss */
+      /* line 181, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2ZDlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;

platform/commonUI/general/res/css/tree.css

@@ -86,7 +86,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 208, ../sass/_mixins.scss */
+  /* line 233, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;

platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg>
 <metadata>
-Created by FontForge 20090622 at Mon May  4 20:21:42 2015
+Created by FontForge 20090622 at Fri Jun  5 15:37:46 2015
  By deploy user
 Copyright 2015 Adobe Systems Incorporated. All rights reserved.
 </metadata>
@@ -62,8 +62,10 @@ q52 -180 95 -231q42 53 88 212z" />
 d="M193 787v-193h-193v193h193zM193 491v-195h-193v195h193zM193 193v-193h-193v193h193zM671 732v-82h-388v82h388zM671 435v-81h-388v81h388zM671 138v-82h-388v82h388z" />
     <glyph glyph-name="eight" unicode="8" horiz-adv-x="636" 
 d="M625 735v-318h-625v318h625zM625 315v-315h-625v315h625z" />
-    <glyph glyph-name="nine" unicode="9" horiz-adv-x="636" 
+    <glyph glyph-name="nine" unicode="9" 
-d="M267 735v-319h-267v319h267zM267 315v-315h-267v315h267zM630 735v-319h-267v319h267zM630 315v-315h-267v315h267z" />
+d="M328 469q0 -20 -13.5 -33.5t-33.5 -13.5h-234q-20 0 -33.5 13.5t-13.5 33.5v234q0 19 14 33t33 14h234q20 0 33.5 -13.5t13.5 -33.5v-234zM750 469q0 -20 -13.5 -33.5t-33.5 -13.5h-234q-20 0 -33.5 13.5t-13.5 33.5v234q0 20 13.5 33.5t33.5 13.5h234q19 0 33 -14
+t14 -33v-234zM328 47q0 -20 -13.5 -33.5t-33.5 -13.5h-234q-19 0 -33 14t-14 33v234q0 20 13.5 33.5t33.5 13.5h234q20 0 33.5 -13.5t13.5 -33.5v-234zM750 47q0 -19 -14 -33t-33 -14h-234q-20 0 -33.5 13.5t-13.5 33.5v234q0 20 13.5 33.5t33.5 13.5h234q20 0 33.5 -13.5
+t13.5 -33.5v-234z" />
     <glyph glyph-name="colon" unicode=":" horiz-adv-x="625" 
 d="M625 -19l-397 397l397 397v-794zM173 756v-735h-173v735h173z" />
     <glyph glyph-name="semicolon" unicode=";" horiz-adv-x="624" 
@@ -163,8 +165,8 @@ d="M123 367l-123 123v147l123 -123l220 221v-147zM123 0l-123 123v147l123 -123l220
 d="M123 93l-123 123v147l123 -123l220 220v-147zM485 262v71h313v-71h-313z" />
     <glyph glyph-name="l" unicode="l" horiz-adv-x="617" 
 d="M551 386h66v-386h-617v386h63v106q0 100 72 171.5t173 71.5q99 0 171 -71.5t72 -171.5v-106zM173 492v-106h267v106q0 56 -38.5 94.5t-93.5 38.5q-56 0 -95.5 -39t-39.5 -94z" />
-    <glyph glyph-name="m" unicode="m" horiz-adv-x="804" 
+    <glyph glyph-name="m" unicode="m" horiz-adv-x="751" 
-d="M804 729v-156h-804v156h804zM804 445v-160h-804v160h804zM804 158v-158h-804v158h804z" />
+d="M751 563h-751v188h751v-188zM751 282h-751v187h751v-187zM751 0h-751v188h751v-188z" />
     <glyph glyph-name="n" unicode="n" horiz-adv-x="738" 
 d="M690 697q48 -50 48 -88q0 -18 -10 -26l-243 -243l-3 -3l-4 -2l-227 -78l77 228l2 4l3 3l242 243q22 19 57 3q29 -14 58 -41zM461 371l1 2l-3 50l-34 2h-9v10v28l-51 6l-2 -1l-32 -97l33 -33zM249 512l-134 -389l304 104v-215q-136 -8 -246.5 29t-172.5 93v561
 q48 -42 125 -75.5t172 -43.5l-24 -25l-17 -17z" />
@@ -232,6 +234,19 @@ d="M748 750l-375 -750l-374 750h749z" />
 d="M-1 0l375 750l374 -750h-749z" />
     <glyph glyph-name="icircumflex" unicode="&#xee;" horiz-adv-x="748" 
 d="M748 750l-375 -375l-374 375h749zM748 375l-375 -374l-374 374h749z" />
+    <glyph glyph-name="idieresis" unicode="&#xef;" 
+d="M0 749l750 -375l-750 -374v749z" />
+    <glyph glyph-name="ntilde" unicode="&#xf1;" 
+d="M283 751v-751h-188v751h188zM658 751v-751h-188v751h188z" />
+    <glyph glyph-name="ograve" unicode="&#xf2;" horiz-adv-x="751" 
+d="M469 563h-102q-74 0 -126.5 -52.5t-52.5 -126.5v-102h-94q-38 0 -66 27.5t-28 65.5v282q0 38 28 66t66 28h281q39 0 66.5 -28t27.5 -66v-94zM657 469q38 0 66 -27.5t28 -66.5v-281q0 -38 -28 -66t-66 -28h-282q-38 0 -65.5 28t-27.5 66v281q0 39 27.5 66.5t65.5 27.5h282
+z" />
+    <glyph glyph-name="oacute" unicode="&#xf3;" horiz-adv-x="751" 
+d="M216 375l187 -187h-309q-38 0 -66 27.5t-28 66.5v375q0 38 28 66t66 28h375q39 0 66.5 -28t27.5 -66v-309l-188 187zM751 422v-422h-422v94h234l-281 281l93 94l282 -281v234h94z" />
+    <glyph glyph-name="ocircumflex" unicode="&#xf4;" horiz-adv-x="751" 
+d="M610 751q58 0 99.5 -41.5t41.5 -99.5v-469q0 -59 -41.5 -100t-99.5 -41h-469q-59 0 -100 41t-41 100v469q0 58 41 99.5t100 41.5h469zM610 282v328h-328l93 -94l-234 -375l375 234z" />
+    <glyph glyph-name="odieresis" unicode="&#xf6;" 
+d="M328 562v-375h-328v375h328zM750 562v-375h-328v375h328z" />
     <glyph glyph-name="fraction" unicode="&#x2044;" horiz-adv-x="761" 
 d="M380 751q158 0 269.5 -111.5t111.5 -268.5q0 -133 -82.5 -236.5t-209.5 -134.5l-4 491l-176 -490q-126 31 -207.5 134.5t-81.5 235.5q0 157 111.5 268.5t268.5 111.5zM168 488l55 20l-34 94l-56 -20zM410 530v100h-59v-100h59zM593 488l34 94l-55 20l-34 -94z" />
     <glyph glyph-name="H.002" horiz-adv-x="803" 

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

@@ -19,6 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+// Features
+$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
+
 // Margins, spacing, radii
 $bodyMargin: 10px;
 $interiorMargin: 5px;
@@ -34,9 +38,12 @@ $colorBodyBg: #333;
 $colorBodyFg: #999;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
+$colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
+$colorPausedBg: #c56f01;
+$colorPausedFg: #fff;
 $colorCheck: $colorKey;
 $colorCreateBtn: $colorKey;
 $colorInteriorBorder: lighten($colorBodyBg, 10%);
@@ -50,7 +57,11 @@ $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
 $colorTelemFresh: #fff;
 $colorTelemStale: #888;
-$styleTelemState: italic;
+$styleTelemStale: italic;
+$colorInfoBubbleFg: #666;
+$colorInfoBubbleBg: #ddd;
+$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
+$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 
 // Ratios
 $ltGamma: 20%;
@@ -124,3 +135,13 @@ $tickLblH: 15px;
 $tickLblW: 50px;
 $tickH: $ticksH - $tickLblVMargin - $tickLblH;
 $tickW: 1px;
+
+// Imagery
+$imageMainControlBarH: 20px;
+$imageThumbsD: 120px;
+$imageThumbsWrapperH: $imageThumbsD * 1.4;
+$imageThumbPad: 1px;
+
+// Bubbles
+$bubbleArwSize: 10px;
+$bubblePad: $interiorMargin;

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

@@ -44,7 +44,7 @@ a.disabled {
 }
 
 @include keyframes(pulse) {
-	0%   { opacity: 0.2; }
+	0%   { opacity: 0.5; }
 	100% { opacity: 1; }
 }
 
@@ -57,5 +57,5 @@ a.disabled {
 }
 
 .pulse {
-	@include pulse(1000ms);
+	@include pulse(750ms);
 }

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

@@ -117,6 +117,13 @@ span {
 	display: none !important;
 }
 
+.paused {
+	&:not(.s-btn) {
+		border-color: $colorPausedBg !important;
+		color: $colorPausedBg !important;
+	}
+}
+
 .sep {
 	color: rgba(#fff, 0.2);
 }

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

@@ -45,7 +45,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "controls/time-controller";
+@import "features/imagery";
 @import "forms/mixins";
 @import "forms/elems";
 @import "forms/validation";

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

@@ -62,6 +62,31 @@
 	border-right: $size/$ratio solid transparent;
 }
 
+@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
+	//$size: $size*2;
+	width: 0;
+	height: 0;
+	$slopedB: $size/$ratio solid transparent;
+	$straightB: $size solid $color;
+	@if $dir == "up" {
+		border-left: $slopedB;
+		border-right: $slopedB;
+		border-bottom: $straightB;
+	} @else if $dir == "right" {
+		border-top: $slopedB;
+		border-bottom: $slopedB;
+		border-left: $straightB;
+	} @else if $dir == "down"  {
+		border-left: $slopedB;
+		border-right: $slopedB;
+		border-top: $straightB;
+	} @else {
+		border-top: $slopedB;
+		border-bottom: $slopedB;
+		border-right: $straightB;
+	}
+}
+
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
 	@include background-image(linear-gradient(-45deg,
 		rgba($c, $a) 25%, transparent 25%,

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

@@ -19,25 +19,28 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-$pad: $interiorMargin * 2;
+$pad: $interiorMargin * 1.5;
 
 /*********************************** TYPE STYLES */
 .t-btn {
 	cursor: pointer;
 }
 
-
 /*********************************** STYLE STYLES */
 .s-btn {
-	$base: lighten($colorBodyBg, 20%);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
 	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
 	line-height: 1.2em;
-	padding: 0 $pad;
 	text-decoration: none;
 	&.s-very-subtle {
 		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
+		&.paused {
+			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
+			.icon:before {
+				content:"\0000EF";
+			}
+		}
 	}
 }
 
@@ -47,9 +50,20 @@ $pad: $interiorMargin * 2;
 	.icon {
 		color: $colorKey;
 	}
+	&.paused {
+		.icon {
+			color: $colorPausedFg;
+		}
+	}
 
-	&:not(.disabled):hover .icon {
+	&:not(.disabled) {
-		color: lighten($colorKey, $ltGamma);
+		&:not(.paused) {
+			&:hover {
+				.icon {
+					color: lighten($colorKey, $ltGamma);
+				}
+			}
+		}
 	}
 
 	&.labeled {
@@ -61,8 +75,22 @@ $pad: $interiorMargin * 2;
 			margin-left: $interiorMargin;
 		}
 	}
-}
 
+	&.pause-play {
+		&.paused {
+			@include pulse(500ms);
+		}
+		.icon:before {
+			content:"\0000F1";
+		}
+	}
+
+	&.show-thumbs {
+		.icon:before {
+			content:"\000039";
+		}
+	}
+}
 
 /*********************************** LAYOUT STYLES */
 span.l-btn,
@@ -71,3 +99,13 @@ a.l-btn,
 a.l-btn span {
 	display: inline-block;
 }
+
+.l-btn {
+	padding: 0 $pad;
+	&.sm {
+		padding: 0 $interiorMargin;
+	}
+	&.vsm {
+		padding: 0 $interiorMargin/2;
+	}
+}

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

@@ -436,62 +436,52 @@ label.checkbox.custom {
 }
 
 /******************************************************** SLIDERS */
-.wrapper-slider {
+
-	position: relative;
-}
 .slider {
-	//$knobH: 70%; //14px;
+	$knobH: 100%; //14px;
 	$knobW: 12px;
-	$slotH: 80%;
+	$slotH: 50%;
-	$rangeO: 0.3;
 	.slot {
-		//		@include border-radius($basicCr * .75);
+//		@include border-radius($basicCr * .75);
 		@include sliderTrack();
-		height: auto;
+		height: $slotH;
 		width: auto;
 		position: absolute;
-		//top: ($knobH - $slotH) / 2;
+		top: ($knobH - $slotH) / 2;
-		top: (100% - $slotH)/2;
 		right: 0;
-		bottom: (100% - $slotH)/2;
+		bottom: auto;
 		left: 0;
-		z-index: 0;
-		.range {
-			background: rgba($colorKey, $rangeO);
-			cursor: ew-resize;
-			position: absolute;
-			top: 0;
-			right: auto;
-			bottom: 0;
-			left: auto;
-			height: auto;
-			width: auto;
-			z-index: 1;
-			&:hover {
-				background: rgba($colorKey, $rangeO + 0.2);
-			}
-		}
 	}
 	.knob {
 		@include btnSubtle();
 		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
-		@include border-radius(2px);
 		cursor: ew-resize;
 		position: absolute;
-		height: auto;
+		height: $knobH;
 		width: $knobW;
 		top: 0;
-		bottom: 0;
+		auto: 0;
+		bottom: auto;
 		left: auto;
-		z-index: 2;
-		&.knob-l { margin-left: $knobW / -2; }
-		&.knob-r { margin-right: $knobW / -2; }
 		&:before {
 			top: 1px;
 			bottom: 3px;
-			//left: ($knobW / 2) - 1;
+			left: ($knobW / 2) - 1;
-			//margin-left: -1px;
+		}
-			left: 45%;
+
+	}
+	.range {
+		background: rgba($colorKey, 0.6);
+		cursor: ew-resize;
+		position: absolute;
+		top: 0;
+		right: auto;
+		bottom: 0;
+		left: auto;
+		height: auto;
+		width: auto;
+		&:hover {
+			background: rgba($colorKey, 0.7);
 		}
 	}
 }

platform/commonUI/general/res/sass/features/_imagery.scss

@@ -0,0 +1,170 @@
+.l-image-main-wrapper,
+.l-image-main,
+.l-image-main-controlbar,
+.l-image-main-controlbar .left,
+.l-image-main-controlbar .right,
+.l-image-thumbs-wrapper {
+	@include absPosDefault(0, false);
+}
+
+/*************************************** MAIN LAYOUT */
+.l-image-main-wrapper {
+	//@include test();
+	@if $enableImageryThumbs == true {
+		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
+	}
+	min-height: 100px;
+	min-width: 150px;
+	.l-image-main {
+		background-color: rgba(#fff, 0.1);
+		bottom: $imageMainControlBarH + $interiorMargin;
+	}
+	.l-image-main-controlbar {
+		top: auto;
+		height: $imageMainControlBarH;
+	}
+}
+
+.l-image-thumbs-wrapper {
+	//@include test(red);
+	top: auto;
+	height: $imageThumbsWrapperH;
+}
+
+.l-date,
+.l-time,
+.l-timezone {
+	display: inline-block;
+}
+
+/*************************************** MAIN IMAGE */
+
+.l-image-main,
+.l-image-thumb-item .l-thumb {
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.l-image-main-controlbar {
+	//@include test();
+	font-size: 0.8em;
+	line-height: $imageMainControlBarH;
+	.left, .right {
+		direction: rtl;
+		overflow: hidden;
+	}
+	.left {
+		//@include test(red);
+		text-align: left;
+		width: 75% !important;
+	}
+	.right {
+		//@include test(green);
+		min-width: 40px;
+		width: 25% !important;
+		z-index: 2;
+	}
+	.l-date,
+	.l-time {
+		color: #fff;
+	}
+	.l-mag {
+		direction: ltr;
+		display: inline-block;
+		//white-space: nowrap;
+		&:before {
+			content: "\000049";
+		}
+	}
+	.s-mag {
+		color: darken($colorBodyFg, 20%);
+	}
+	.l-btn.show-thumbs {
+		display: none;
+	}
+}
+
+.s-image-main {
+	border: 1px solid transparent;
+	&.paused {
+		border-color: $colorPausedBg;
+	}
+}
+
+/*************************************** THUMBS */
+
+.l-image-thumb-item {
+}
+
+.l-image-thumbs-wrapper {
+	//@include test(green);
+	direction: rtl;
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding-bottom: $interiorMargin;
+	white-space: nowrap;
+	z-index: 70;
+}
+
+.l-image-thumb-item {
+	@include single-transition(background-color, 0.25s);
+	@include box-sizing(border-box);
+	padding: 1px;
+	position: relative;
+	.l-thumb,
+	.l-date,
+	.l-time {
+		display: inline-block;
+	}
+	.l-date,
+	.l-time {
+		padding: 2px 3px;
+	}
+	cursor: pointer;
+	direction: ltr;
+	display: inline-block;
+	font-size: 0.8em;
+	margin-left: $interiorMarginSm;
+	text-align: left;
+	width: $imageThumbsD + $imageThumbPad*2;
+	white-space: normal;
+	&:hover {
+		background: rgba(#fff, 0.2);
+		.l-date,
+		.l-time {
+			color: #fff;
+		}
+	}
+	&.selected {
+		background: $colorKeySelectedBg;
+		.l-date,
+		.l-time {
+			color: #fff;
+		}
+	}
+	.l-thumb {
+		background-color: rgba(#fff, 0.1);
+		height: $imageThumbsD;
+		width: $imageThumbsD;
+		margin-top: 0;
+	}
+}
+
+/*************************************** WHEN IN FRAME */
+.frame .t-imagery {
+	.l-image-main-wrapper {
+		bottom: 0;
+		.l-image-main-controlbar {
+			font-size: 0.7em;
+		}
+		@if $enableImageryThumbs == true {
+			.l-btn.show-thumbs {
+				display: inline-block;
+			}
+		}
+	}
+	.l-image-thumbs-wrapper {
+		display: none;
+	}
+}

platform/commonUI/general/res/sass/forms/_text-input.scss

@@ -19,18 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-input[type="text"],
+input[type="text"] {
-input[type="date"] {
 	@include nice-input();
-	@include input-placeholder {
+    &.filter {
-		color: darken($colorBodyFg, 10%);
+        &.ng-dirty {
-		font-style: italic;
+//            background: red;
-	}
+        }
-	&.filter {
+    }
-		&.ng-dirty {
-			//            background: red;
-		}
-	}
 	&.numeric {
 		text-align: right;
 	}

platform/commonUI/general/res/sass/helpers/_bubbles.scss

@@ -21,18 +21,33 @@
  *****************************************************************************/
 //************************************************* LAYOUT
 
-$infoBubbleFg: #666;
+.l-bubble-wrapper {
-$infoBubbleBg: #ddd;
-
-.l-infobubble-wrapper {
-	$arwSize: 5px;
-	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
 	position: absolute;
 	z-index: 70;
+	.l-bubble {
+		padding: $bubblePad $bubblePad*2;
+		.l-btn.close {
+			padding: 0 2px;
+			position: absolute;
+			right: $interiorMargin;
+			top: $interiorMargin;
+		}
+	}
+	.arw {
+		position: absolute;
+		&.arw-up {
+			bottom: 100%;
+
+		}
+		&.arw-down {
+			top: 100%;
+		}
+	}
+
 	.l-infobubble {
 		display: inline-block;
 		max-width: 250px;
-		padding: 5px 10px;
+		//padding: 5px 10px;
 		&:before {
 			content:"";
 			position: absolute;
@@ -71,57 +86,82 @@ $infoBubbleBg: #ddd;
 	}
 
 	&.arw-left {
-		margin-left: $arwSize*2;
+		margin-left: $bubbleArwSize*2;
 		.l-infobubble::before {
 			right: 100%;
-			border-top: $arwSize solid transparent;
+			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-			border-bottom: $arwSize solid transparent;
-			border-right: ($arwSize * 1.5) solid $infoBubbleBg;
 		}
 	}
 
 	&.arw-right {
-		margin-right: $arwSize*2;
+		margin-right: $bubbleArwSize*2;
 		.l-infobubble::before {
 			left: 100%;
-			border-top: $arwSize solid transparent;
+			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-			border-bottom: $arwSize solid transparent;
-			border-left: ($arwSize * 1.5) solid $infoBubbleBg;
 		}
 	}
 
 	&.arw-top {
 		.l-infobubble::before {
-			top: $arwSize * 2;
+			top: $bubbleArwSize * 2;
 		}
 	}
 
 	&.arw-btm {
 		.l-infobubble::before {
-			bottom: $arwSize * 2;
+			bottom: $bubbleArwSize * 2;
 		}
 	}
 
 	&.arw-down {
-		margin-bottom: $arwSize*2;
+
-		.l-infobubble::before {
+	}
-			left: 50%;
+}
-			top: 100%;
+
-			margin-left: -1 * $arwSize;
+.l-thumbsbubble-wrapper {
-			border-left: $arwSize solid transparent;
+	$closeBtnD: 15px;
-			border-right: $arwSize solid transparent;
+	position: absolute;
-			border-top: ($arwSize * 1.5) solid $infoBubbleBg;
+	height: $imageThumbsWrapperH + $bubblePad*2 + $interiorMargin;
+	width: 100%;
+	.l-thumbsbubble {
+		@include absPosDefault();
+		.l-image-thumbs-wrapper {
+			height: auto;
+			top: $bubblePad !important; right: $closeBtnD + ($interiorMargin*2); bottom: $bubblePad !important; left: $bubblePad;
 		}
 	}
+	.arw {
+		//left: 50%;
+		//margin-left: $bubbleArwSize / -2;
+		z-index: 2;
+	}
+	&.arw-up .arw.arw-down,
+	&.arw-down .arw.arw-up { display: none; }
 }
 
 //************************************************* LOOK AND FEEL
 
-.s-infobubble {
+.s-bubble-wrapper {
-	$emFg: darken($infoBubbleFg, 20%);
+	//@include box-shadow(rgba(black, 0.4) 0 1px 5px);
+}
+
+.s-bubble {
 	@include border-radius($basicCr);
-	background: $infoBubbleBg;
+	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
-	color: $infoBubbleFg;
+}
+
+.l-thumbsbubble-wrapper {
+	.arw-up {
+		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+	}
+	.arw-down {
+		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+	}
+}
+.s-infobubble {
+	$emFg: darken($colorInfoBubbleFg, 20%);
+	background: $colorInfoBubbleBg;
+	color: $colorInfoBubbleFg;
 	font-size: 0.8rem;
 	.title {
 		color: $emFg;
@@ -129,7 +169,7 @@ $infoBubbleBg: #ddd;
 	}
 	tr {
 		td {
-			border-top: 1px solid darken($infoBubbleBg, 10%);
+			border-top: 1px solid darken($colorInfoBubbleBg, 10%);
 			font-size: 0.9em;
 		}
 		&:first-child td {
@@ -139,5 +179,9 @@ $infoBubbleBg: #ddd;
 	.value {
 		color: $emFg;
 	}
-
+}
+
+.s-thumbsbubble {
+	background: $colorThumbsBubbleBg;
+	color: $colorThumbsBubbleFg;
 }

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -99,7 +99,7 @@ ul.tree {
 
 			&.selected {
 				$c: #fff;
-				background: #005177;
+				background: $colorKeySelectedBg;
 				color: $c;
 				.view-control {
 					color: $colorItemTreeIcon;

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

@@ -70,23 +70,19 @@
     &.abs {
 	    text-wrap: none;
 	    white-space: nowrap;
-        &.left,
+    }
-        .left {
+    &.left,
-            width: 45%;
+    .left {
-            right: auto;
+        width: 45% !important;
-        }
+        right: auto !important;
-        &.right,
+    }
-        .right {
+    &.right,
-            width: 45%;
+    .right {
-            left: auto;
+        width: 45% !important;
-            right: 0;
+        left: auto !important;
-            text-align: right;
+        text-align: right;
-            .icon.major {
+        .icon.major {
-                margin-left: $interiorMargin * 3;
+            margin-left: $interiorMargin * 3;
-            }
-//            .icon.major {
-//                margin-left: $interiorMargin;
-//            }
         }
     }
 }

platform/features/static-markup/res/markup.html

@@ -19,27 +19,133 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<h1>Static Markup Sandbox</h1>
+<!-- FAKE DATA AND VARS -->
+<div ng-init="images=[
+{date:'2020/04/27',time:'16:03:43',url:'http://www.hacskaylo.com/wedding/images/moon-surface-with-ice.jpg',selected:true},
+{date:'2020/04/27',time:'16:03:14',url:'http://www.lpi.usra.edu/lunar/lunar_flyovers/schrodinger/schrodinger.png',selected:false},
+{date:'2020/04/27',time:'16:02:49',url:'http://www.arcadiastreet.com/cgvistas/images/luna_southern_hemisphere_1280.jpg',selected:false},
+{date:'2020/04/27',time:'16:02:36',url:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0AIRCUQQ40JIImjwlp_uYAT7ftyqJcbYBytKpvp7iIFUkLbA6',selected:false},
+{date:'2020/04/27',time:'16:02:29',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false},
+{date:'2020/04/27',time:'16:02:07',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false},
+{date:'2020/04/27',time:'16:01:37',url:'http://www.lpi.usra.edu/lunar/lunar_flyovers/schrodinger/schrodinger.png',selected:false},
+{date:'2020/04/27',time:'16:01:25',url:'http://www.arcadiastreet.com/cgvistas/images/luna_southern_hemisphere_1280.jpg',selected:false},
+{date:'2020/04/27',time:'16:01:03',url:'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0AIRCUQQ40JIImjwlp_uYAT7ftyqJcbYBytKpvp7iIFUkLbA6',selected:false},
+{date:'2020/04/27',time:'16:01:02',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false},
+{date:'2020/04/27',time:'16:00:57',url:'http://www.virtualmicroscope.org/sites/default/files/styles/large_carousel/public/800-15499_a15pan1463033.jpg?itok=NMQhLnuY',selected:false},
+{date:'2020/04/27',time:'16:00:27',url:'http://www.arcadiastreet.com/cgvistas/images/luna_southern_hemisphere_1280.jpg',selected:false}
+];
+clipped=true;
+showThumbsBubble=false;
+"></div>
 
-<h2>Plot limits</h2>
+<div class="t-imagery">
-<div ng-init="limits=[
+	<!-- Main image -->
+	<div class="l-image-main-wrapper">
+		<div
+			class="l-image-main s-image-main"
+			ng-class="{ paused:paused, stale:false }"
+			style="background-image:url('http://www.hacskaylo.com/wedding/images/moon-surface-with-ice.jpg');"
+			></div>
+		<div class="l-image-main-controlbar bar">
+			<div class="left">
+				<a
+					class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
+					ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
+					><span class="ui-symbol icon"></span></a>
+				<span class="l-timezone">UTC</span>
+				<span class="l-time">16:03:43</span>
+				<span class="l-date">2020/04/27</span>
+			</div>
+			<div class="right">
+				<a
+					class="t-btn l-btn s-btn s-icon-btn s-very-subtle pause-play sm"
+					ng-click="paused = (paused)? false:true"
+					ng-class="{ paused:paused }"
+					><span class="ui-symbol icon"></span></a>
+                <a href=""
+	                class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
+	                ng-click="clipped = false"
+	                ng-show="clipped === true"
+	                title="117%: Click to reset"
+	                ></a>
+			</div>
+		</div>
+	</div>
+
+	<!-- IMAGE THUMBNAILS DISABLED, DON'T INCLUDE THIS MARKUP -->
+	<!-- To enable thumbs, change scss constant $enableImageryThumbs in /platform/commonUI/general/res/sass/_constants.scss to true, recompile CSS, and delete style="display:none;" from following markup -->
+	<div class="l-image-thumbs-wrapper" style="display: none;">
+		<div
+			class="l-image-thumb-item s-image-thumb-item"
+			ng-repeat="thumb in images"
+			ng-class="{ selected : thumb.selected }"
+			>
+			<div class="l-thumb" style="background-image:url('{{thumb.url}}')"></div>
+			<div class="l-date">{{thumb.date}}</div>
+			<div class="l-time">{{thumb.time}}</div><span class="l-timezone">UTC</span>
+		</div>
+	</div>
+</div>
+
+<!-- IMAGE THUMBNAILS DISABLED, DON'T INCLUDE THIS MARKUP -->
+<!-- NOTE: CANONICAL VERSION OF THIS MARKUP IS IN /platform/commonUI/inspect/res/thumbsbubble.html -->
+<div
+	class="l-bubble-wrapper s-bubble-wrapper l-thumbsbubble-wrapper"
+	ng-class="{ 'arw-up':true }"
+	ng-style="{ top: '258px' }"
+    ng-show="showThumbsBubble === true"
+	>
+	<div
+		class="arw arw-up"
+		ng-style="{ left: '215px' }"
+		></div>
+	<div class="l-bubble s-bubble l-thumbsbubble s-thumbsbubble">
+		<a
+			ng-click="showThumbsBubble = false"
+			class="s-btn l-btn normal ui-symbol close"
+			>x</a>
+		<div class="l-image-thumbs-wrapper">
+			<div
+				class="l-image-thumb-item s-image-thumb-item"
+				ng-repeat="thumb in images"
+				ng-class="{ selected : thumb.selected }"
+				>
+				<div class="l-thumb" style="background-image:url('{{thumb.url}}')"></div>
+				<div class="l-date">{{thumb.date}}</div>
+				<div class="l-time">{{thumb.time}}</div>
+			</div>
+		</div>
+	</div>
+	<div
+		class="arw arw-down"
+		ng-style="{ left: '613px' }"
+		></div>
+</div>
+
+<!-- DON'T INCLUDE THIS MARKUP -->
+<div class="hidden">
+	<h2>Plot limits</h2>
+
+	<div ng-init="limits=[
 				{type: 'upr', severity: 'red', top: 0, bottom: 90},
 				{type: 'upr', severity: 'yellow', top: 10, bottom: 80},
 				{type: 'lwr', severity: 'yellow', top: 70, bottom: 20},
 				{type: 'lwr', severity: 'red', top: 80, bottom: 0}
 	        ]"></div>
-<div style="width: 1000px; height: 500px">
+	<div style="width: 1000px; height: 500px">
-    <div class="gl-plot" style="height: 100%;">
+		<div class="gl-plot" style="height: 100%;">
-        <div class="gl-plot-display-area">
+			<div class="gl-plot-display-area">
-	        <div
+				<div
-		        ng-repeat="limit in limits"
+					ng-repeat="limit in limits"
-		        ng-show="1"
+					ng-show="1"
-		        class="t-limit l-limit s-limit-{{limit.type}}-{{limit.severity}}"
+					class="t-limit l-limit s-limit-{{limit.type}}-{{limit.severity}}"
-		        style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
+					style="top: {{limit.top}}%; bottom: {{limit.bottom}}%"
-		        ></div>
+					></div>
-        </div>
+			</div>
-    </div>
+		</div>
-</div>
+	</div>
 
-<h2>Animation</h2>
+	<h2>Animation</h2>
-<div class="pulse" style="background: #cc0000; color: #fff; padding: 10px;">This should pulse</div>
+
+	<div class="pulse" style="background: #cc0000; color: #fff; padding: 10px;">This should pulse</div>
+</div>