[Merge] Merged latest from imagery-issue-1676

Fixes #1676
Minor conflict in imagery.scss resolved;
Tweak to remove min-height from image-main-wrapper;

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

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 /************************** FEATURES */
-$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
+$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
 
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
 $bodyMargin: 10px;
@@ -82,7 +82,7 @@ $tabularTdPadTB: 2px;
 /*************** Imagery */
 $imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
-$imageThumbsWrapperH: $imageThumbsD * 1.4;
+$imageThumbsWrapperH: 155px;
 $imageThumbPad: 1px;
 /*************** Ticks */
 $ticksH: 25px;

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

@@ -9,7 +9,6 @@
 	@if $enableImageryThumbs == true {
 		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
 	}
-	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
 		background-color: $colorPlotBg;
@@ -22,7 +21,8 @@
 
 .l-image-thumbs-wrapper {
 	top: auto;
-	height: $imageThumbsWrapperH;
+	min-height: $imageThumbsWrapperH;
+	max-height: 60%;
 }
 
 .l-date,
@@ -82,9 +82,8 @@
 /*************************************** THUMBS */
 
 .l-image-thumbs-wrapper {
-	//@include test(green);
-	overflow-x: auto;
-	overflow-y: hidden;
+	overflow-x: hidden;
+	overflow-y: auto;
 	padding-bottom: $interiorMargin;
 	white-space: nowrap;
 }
@@ -92,8 +91,17 @@
 .l-image-thumb-item {
 	@include transition(background-color, 0.25s);
 	box-sizing: border-box;
+    cursor: pointer;
+    direction: ltr;
+    display: inline-block;
+    float: left;
+    font-size: 0.8em;
 	padding: 1px;
-	position: relative;
+    margin-left: $interiorMarginSm;
+    position: relative;
+    text-align: left;
+    width: $imageThumbsD + $imageThumbPad*2;
+    white-space: normal;
 	.l-thumb,
 	.l-date,
 	.l-time {
@@ -103,14 +111,7 @@
 	.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: $colorThumbHoverBg;
 		.l-date,
@@ -184,7 +185,8 @@
 /*************************************** WHEN IN FRAME */
 .frame .t-imagery {
 	.l-image-main-wrapper {
-		bottom: 0;
+		bottom: 0 !important;
+        height: 100% !important;
 		.l-image-main-controlbar {
 			font-size: 0.7em;
 		}
@@ -194,7 +196,8 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper {
+	.l-image-thumbs-wrapper,
+    mct-splitter {
 		display: none;
 	}
 }

platform/commonUI/general/src/directives/MCTSplitPane.js

@@ -126,7 +126,7 @@ define(
 
                     splitterSize = getSize(splitter[0]);
                     first.css(anchor.edge, "0px");
-                    first.css(anchor.dimension, (userWidthPreference || position) + 'px');
+                    first.css(anchor.dimension, (userWidthPreference|| position) + 'px');
 
                     // Get actual size (to obey min-width etc.)
                     firstSize = getSize(first[0]);
@@ -136,7 +136,7 @@ define(
 
                     last.css(anchor.edge, firstSize + splitterSize + 'px');
                     last.css(anchor.opposite, "0px");
-                    position = firstSize + splitterSize;
+                    position = anchor.edge === 'bottom' ? firstSize + (0.75 * splitterSize) : firstSize + splitterSize;
                 }
 
                 // Update positioning of contained elements
@@ -162,17 +162,17 @@ define(
                 // Getter-setter for the pixel offset of the splitter,
                 // relative to the current edge.
                 function getSetPosition(value) {
-                    var prior = position;
                     if (typeof value === 'number') {
                         position = value;
                         enforceExtrema();
                         updateElementPositions();
 
                         // Pass change up so this state can be shared
-                        if (positionParsed.assign && position !== prior) {
+                        if (positionParsed.assign) {
                             positionParsed.assign($scope, position);
                         }
-                    }
+                    } 
+
                     return position;
                 }
 
@@ -218,7 +218,7 @@ define(
                 $scope.$on('$destroy', function () {
                     $interval.cancel(activeInterval);
                 });
-
+                
 
                 // Interface exposed by controller, for mct-splitter to user
                 return {

platform/features/imagery/res/templates/imagery.html

@@ -1,5 +1,6 @@
 <div class="t-imagery" ng-controller="ImageryController as imagery">
-    <div class="l-image-main-wrapper l-flex-col"
+    <mct-split-pane anchor="bottom" alias="imagery">
+    <div class="split-pane-component l-image-main-wrapper l-flex-col"
         ng-mouseenter="showLocalControls = true;"
         ng-mouseleave="showLocalControls = false;">
         <div class="l-local-controls s-local-controls s-wrapper-transluc l-flex-row"
@@ -55,4 +56,14 @@
             </div>
         </div>
     </div>
+    <mct-splitter class="mobile-hide"></mct-splitter>
+    <div class="split-pane-component l-image-thumbs-wrapper">
+        <div class="l-image-thumb-item" ng-class="{selected: image.selected}" ng-repeat="image in imageHistory track by $index" 
+            ng-click="imagery.setSelectedImage(image)">
+            <img class="l-thumb" ng-init="imagery.scrollToBottom()"
+                ng-src={{imagery.getImageUrl(image)}}>
+            <div class="l-time">{{imagery.getTime(image)}}</div>
+        </div>
+    </div>
+    </mct-split-pane>
 </div>

platform/features/imagery/src/controllers/ImageryController.js

@@ -48,7 +48,7 @@ define(
             this.zone = "";
             this.imageUrl = "";
             this.requestCount = 0;
-            this.scrollable = $(element[0]);
+            this.scrollable = $(".l-image-thumbs-wrapper");
             this.autoScroll = openmct.time.clock() ? true : false;
 
             this.$scope.imageHistory = [];
@@ -63,6 +63,7 @@ define(
             this.updateHistory = this.updateHistory.bind(this);
             this.onBoundsChange = this.onBoundsChange.bind(this);
             this.onScroll = this.onScroll.bind(this);
+            this.setSelectedImage = this.setSelectedImage.bind(this);
 
             this.subscribe(this.$scope.domainObject);
 
@@ -161,7 +162,7 @@ define(
 
         /**
          * Updates displayable values to match those of the most
-         * recently recieved datum.
+         * recently received datum.
          * @param {object} [datum] the datum
          * @private
          */
@@ -170,7 +171,7 @@ define(
                 this.nextDatum = datum;
                 return;
             }
-
+            
             this.time = this.timeFormat.format(datum);
             this.imageUrl = this.imageFormat.format(datum);
 
@@ -197,7 +198,9 @@ define(
         ImageryController.prototype.onScroll = function (event) {
             this.$window.requestAnimationFrame(function () {
                 if (this.scrollable[0].scrollLeft <
-                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - 20) {
+                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - 20 ||
+                    this.scrollable[0].scrollTop <
+                    (this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - 20) {
                     this.autoScroll = false;
                 } else {
                     this.autoScroll = true;
@@ -211,6 +214,13 @@ define(
             }
         };
 
+        ImageryController.prototype.scrollToBottom = function () {
+            if (this.autoScroll) {
+                this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
+            }
+        };
+
+
         /**
          * Get the time portion (hours, minutes, seconds) of the
          * timestamp associated with the incoming image telemetry
@@ -244,14 +254,30 @@ define(
          */
         ImageryController.prototype.paused = function (state) {
                 if (arguments.length > 0 && state !== this.isPaused) {
+                    this.unselectAllImages(this.$scope);
                     this.isPaused = state;
                     if (this.nextDatum) {
                         this.updateValues(this.nextDatum);
                         delete this.nextDatum;
                     }
+                    this.autoScroll = true;
                 }
                 return this.isPaused;
-            };
+        };
+
+        ImageryController.prototype.setSelectedImage = function (image) {
+            this.imageUrl = image.url;
+            this.time = this.timeFormat.format(image.utc);
+            this.paused(true);
+            this.unselectAllImages(this.$scope);
+            image.selected = true;
+        };
+
+        ImageryController.prototype.unselectAllImages = function ($scope) {
+            for(var i = 0; i < $scope.imageHistory.length; i++){
+                this.$scope.imageHistory[i].selected = false;
+            }
+        }
 
         return ImageryController;
     }