[Front-end] Fixes for Hyperlinks

Fixes #1710 Converted to span to confine clickable area to text only; Link now uses `overflow: hidden` in frame; Normalized font-size when .s-button;
Merge pull request #1699 from nasa/imagery-issue-1676
2017-09-14 11:05:05 -07:00 · 2017-09-12 11:28:40 -07:00 · 2017-09-11 16:35:14 -07:00 · 2017-09-11 12:51:04 -07:00 · 2017-09-11 12:01:04 -07:00 · 2017-09-11 11:41:19 -07:00
17 changed files with 217 additions and 100 deletions
--- a/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-16px.json
@@ -2,7 +2,7 @@
  "metadata": {
    "name": "openmct-symbols-16px",
    "lastOpened": 0,
-    "created": 1502487054429
+    "created": 1505151140023
  },
  "iconSets": [
    {
@@ -636,13 +636,29 @@
          "code": 921670,
          "tempChar": ""
        },
+        {
+          "order": 138,
+          "id": 115,
+          "name": "icon-import",
+          "prevSize": 24,
+          "code": 921671,
+          "tempChar": ""
+        },
+        {
+          "order": 136,
+          "id": 116,
+          "name": "icon-export",
+          "prevSize": 24,
+          "code": 921672,
+          "tempChar": ""
+        },
        {
          "order": 37,
          "prevSize": 24,
          "name": "icon-activity",
          "id": 32,
          "code": 921856,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 36,
@@ -650,7 +666,7 @@
          "name": "icon-activity-mode",
          "id": 31,
          "code": 921857,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 52,
@@ -658,7 +674,7 @@
          "name": "icon-autoflow-tabular",
          "id": 47,
          "code": 921858,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 55,
@@ -666,7 +682,7 @@
          "name": "icon-clock",
          "id": 50,
          "code": 921859,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 58,
@@ -674,7 +690,7 @@
          "name": "icon-database",
          "id": 53,
          "code": 921860,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 57,
@@ -682,7 +698,7 @@
          "name": "icon-database-query",
          "id": 52,
          "code": 921861,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 17,
@@ -690,7 +706,7 @@
          "name": "icon-dataset",
          "id": 12,
          "code": 921862,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 22,
@@ -698,7 +714,7 @@
          "name": "icon-datatable",
          "id": 17,
          "code": 921863,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 59,
@@ -706,7 +722,7 @@
          "name": "icon-dictionary",
          "id": 54,
          "code": 921864,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 62,
@@ -714,7 +730,7 @@
          "name": "icon-folder",
          "id": 57,
          "code": 921865,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 66,
@@ -722,7 +738,7 @@
          "name": "icon-image",
          "id": 61,
          "code": 921872,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 68,
@@ -730,7 +746,7 @@
          "name": "icon-layout",
          "id": 63,
          "code": 921873,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 77,
@@ -738,7 +754,7 @@
          "name": "icon-object",
          "id": 72,
          "code": 921874,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 78,
@@ -746,7 +762,7 @@
          "name": "icon-object-unknown",
          "id": 73,
          "code": 921875,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 79,
@@ -754,7 +770,7 @@
          "name": "icon-packet",
          "id": 74,
          "code": 921876,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 80,
@@ -762,7 +778,7 @@
          "name": "icon-page",
          "id": 75,
          "code": 921877,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 135,
@@ -770,7 +786,7 @@
          "name": "icon-plot-overlay",
          "prevSize": 24,
          "code": 921878,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 113,
@@ -778,7 +794,7 @@
          "name": "icon-plot-stacked",
          "prevSize": 24,
          "code": 921879,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 10,
@@ -786,7 +802,7 @@
          "name": "icon-session",
          "id": 5,
          "code": 921880,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 24,
@@ -794,7 +810,7 @@
          "name": "icon-tabular",
          "id": 19,
          "code": 921881,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 7,
@@ -802,7 +818,7 @@
          "name": "icon-tabular-lad",
          "id": 2,
          "code": 921888,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 6,
@@ -810,7 +826,7 @@
          "name": "icon-tabular-lad-set",
          "id": 1,
          "code": 921889,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 8,
@@ -818,7 +834,7 @@
          "name": "icon-tabular-realtime",
          "id": 3,
          "code": 921890,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 23,
@@ -826,7 +842,7 @@
          "name": "icon-tabular-scrolling",
          "id": 18,
          "code": 921891,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 112,
@@ -834,7 +850,7 @@
          "name": "icon-telemetry",
          "id": 86,
          "code": 921892,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 90,
@@ -842,7 +858,7 @@
          "name": "icon-telemetry-panel",
          "id": 85,
          "code": 921893,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 93,
@@ -850,7 +866,7 @@
          "name": "icon-timeline",
          "id": 88,
          "code": 921894,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 116,
@@ -858,7 +874,7 @@
          "name": "icon-timer-v1.5",
          "prevSize": 24,
          "code": 921895,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 11,
@@ -866,7 +882,7 @@
          "name": "icon-topic",
          "id": 6,
          "code": 921896,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 115,
@@ -874,7 +890,7 @@
          "name": "icon-box-with-dashed-lines",
          "id": 29,
          "code": 921897,
-          "tempChar": ""
+          "tempChar": ""
        },
        {
          "order": 126,
@@ -882,7 +898,7 @@
          "name": "icon-summary-widget",
          "prevSize": 24,
          "code": 921904,
-          "tempChar": ""
+          "tempChar": ""
        }
      ],
      "metadata": {
@@ -2683,6 +2699,52 @@
            ]
          }
        },
+        {
+          "id": 115,
+          "paths": [
+            "M832 192.4v639.4c0 0.2-0.2 0.2-0.4 0.4h-319.6v192h320c105.6 0 192-86.4 192-192v-640.2c0-105.6-86.4-192-192-192h-320v192h319.6c0.2 0 0.4 0.2 0.4 0.4z",
+            "M192 704v192l384-384-384-384v192h-192v384z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "grid": 16,
+          "tags": [
+            "icon-import"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 116,
+          "paths": [
+            "M192 831.66v-639.32l0.34-0.34h319.66v-192h-320c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h320v-192h-319.66z",
+            "M1024 512l-384-384v192h-192v384h192v192l384-384z"
+          ],
+          "attrs": [
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 16,
+          "tags": [
+            "icon-export"
+          ],
+          "colorPermutations": {
+            "1161751207457516161751": [
+              {},
+              {}
+            ]
+          }
+        },
        {
          "paths": [
            "M576 64h-256l320 320h-290.256c-44.264-76.516-126.99-128-221.744-128h-128v512h128c94.754 0 177.48-51.484 221.744-128h290.256l-320 320h256l448-448-448-448z"
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.eot
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.svg
@@ -85,6 +85,8 @@
 <glyph unicode="&#xe1044;" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
 <glyph unicode="&#xe1045;" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
 <glyph unicode="&#xe1046;" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
+<glyph unicode="&#xe1047;" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
+<glyph unicode="&#xe1048;" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
 <glyph unicode="&#xe1100;" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
 <glyph unicode="&#xe1101;" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
 <glyph unicode="&#xe1102;" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.ttf
--- a/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
+++ b/platform/commonUI/general/res/fonts/symbols/openmct-symbols-16px.woff
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/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;
--- a/platform/commonUI/general/res/sass/_glyphs.scss
+++ b/platform/commonUI/general/res/sass/_glyphs.scss
@@ -113,6 +113,8 @@ $glyph-icon-grid-snap-to: '\e1043';
 $glyph-icon-grid-snap-no: '\e1044';
 $glyph-icon-frame-show: '\e1045';
 $glyph-icon-frame-hide: '\e1046';
+$glyph-icon-import: '\e1047';
+$glyph-icon-export: '\e1048';
 $glyph-icon-activity: '\e1100';
 $glyph-icon-activity-mode: '\e1101';
 $glyph-icon-autoflow-tabular: '\e1102';
@@ -225,6 +227,8 @@ $glyph-icon-summary-widget: '\e1130';
 .icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
 .icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
 .icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
+.icon-import {  @include glyphBefore($glyph-icon-import); }
+.icon-export {  @include glyphBefore($glyph-icon-export); }
 .icon-activity {  @include glyphBefore($glyph-icon-activity); }
 .icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
 .icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -72,11 +72,13 @@
    }
 }

+// Hyperlink objects
 .s-hyperlink {
-    // Hyperlink objects
+    .label {
+        font-size: 0.8rem !important;
+    }
    &:not(.s-button) {
        color: $colorKey;
-        font-size: 0.8rem;
        &:hover { color: $colorKeyHov; }
    }
 }
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/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,9 @@

 .l-image-thumbs-wrapper {
 	top: auto;
-	height: $imageThumbsWrapperH;
+	min-height: $imageThumbsWrapperH;
+	max-height: 60%;
+	box-sizing: border-box;
 }

 .l-date,
@@ -82,9 +83,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 +92,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 +112,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 +186,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 +197,8 @@
 			}
 		}
 	}
-	.l-image-thumbs-wrapper {
+	.l-image-thumbs-wrapper,
+    mct-splitter {
 		display: none;
 	}
 }
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -122,7 +122,10 @@

    /********************************************************** OBJECT TYPES */
    .t-object-type-hyperlink {
-        .s-hyperlink.s-button {
+        .object-holder {
+            overflow: hidden;
+        }
+        .l-hyperlink.s-button {
            // When a hyperlink is a button in a frame, make it expand to fill out to the object-holder
            @extend .abs;
            .label {
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -117,9 +117,7 @@ define(

                // Apply styles to child elements
                function updateChildren(children) {
-                    if (alias) {
-                        position = userWidthPreference || position;
-                    }
+                    position = userWidthPreference || position;

                    // Pick out correct elements to update, flowing from
                    // selected anchor edge.
@@ -182,7 +180,9 @@ define(
                }

                function setUserWidthPreference(value) {
-                    userWidthPreference = value;
+                    if (alias) {
+                        userWidthPreference = value;
+                    }
                }

                function persistToLocalStorage(value) {
--- a/platform/features/hyperlink/res/templates/hyperlink.html
+++ b/platform/features/hyperlink/res/templates/hyperlink.html
@@ -19,10 +19,10 @@
 this source code distribution or the Licensing information page available
 at runtime from the About dialog for additional information.
 -->
-<a class="s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
+<a class="l-hyperlink s-hyperlink" ng-controller="HyperlinkController as hyperlink" href="{{domainObject.getModel().url}}"
   ng-attr-target="{{hyperlink.openNewTab() ? '_blank' : undefined}}"
   ng-class="{
       's-button': hyperlink.isButton()
   }">
-    <div class="label">{{domainObject.getModel().displayText}}</div>
+    <span class="label">{{domainObject.getModel().displayText}}</span>
 </a>
--- a/platform/features/imagery/bundle.js
+++ b/platform/features/imagery/bundle.js
@@ -25,14 +25,12 @@ define([
    "./src/controllers/ImageryController",
    "./src/directives/MCTBackgroundImage",
    "text!./res/templates/imagery.html",
-    "text!./res/templates/imageryTimeline.html",
    'legacyRegistry'
 ], function (
    ImageryViewPolicy,
    ImageryController,
    MCTBackgroundImage,
    imageryTemplate,
-    imageryTimelineTemplate,
    legacyRegistry
 ) {

@@ -50,17 +48,6 @@ define([
                        "telemetry"
                    ],
                    "editable": false
-                },
-                {
-                    "name": "Historical Imagery",
-                    "key": "historical-imagery",
-                    "cssClass": "icon-image",
-                    "template": imageryTimelineTemplate,
-                    "priority": "preferred",
-                    "needs": [
-                        "telemetry"
-                    ],
-                    "editable": false
                }
            ],
            "policies": [
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/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 class='abs' 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></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)"  ng-init="imagery.scrollToBottom()">
+            <img class="l-thumb" 
+                ng-src={{imagery.getImageUrl(image)}}>
+            <div class="l-time">{{imagery.getTime(image)}}</div>
+        </div>
+    </div>
+    </mct-split-pane>
 </div>
--- a/platform/features/imagery/res/templates/imageryTimeline.html
+++ b/platform/features/imagery/res/templates/imageryTimeline.html
@@ -1,8 +0,0 @@
-
-<div class="l-image-thumbs-wrapper" ng-controller="ImageryController as imagery">
-	<div class="l-image-thumb-item" ng-repeat="image in imageHistory track by $index">
-		<img class="l-thumb" ng-init="imagery.scrollToRight()"
-			ng-src={{imagery.getImageUrl(image)}} >
-			<div class="l-time">{{imagery.getTime(image)}}</div>
-	</div>
-</div>
--- a/platform/features/imagery/src/controllers/ImageryController.js
+++ b/platform/features/imagery/src/controllers/ImageryController.js
@@ -48,9 +48,8 @@ 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 = [];
            this.$scope.filters = {
                brightness: 100,
@@ -63,6 +62,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);

@@ -80,10 +80,10 @@ define(
                    var metadata = this.openmct
                        .telemetry
                        .getMetadata(this.domainObject);
-                    var timeKey = this.openmct.time.timeSystem().key;
+                    this.timeKey = this.openmct.time.timeSystem().key;
                    this.timeFormat = this.openmct
                        .telemetry
-                        .getValueFormatter(metadata.value(timeKey));
+                        .getValueFormatter(metadata.value(this.timeKey));
                    this.imageFormat = this.openmct
                        .telemetry
                        .getValueFormatter(metadata.valuesForHints(['image'])[0]);
@@ -161,7 +161,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 +170,6 @@ define(
                this.nextDatum = datum;
                return;
            }
-
            this.time = this.timeFormat.format(datum);
            this.imageUrl = this.imageFormat.format(datum);

@@ -185,8 +184,7 @@ define(
        ImageryController.prototype.updateHistory = function (datum) {
            if (this.$scope.imageHistory.length === 0 ||
                !_.isEqual(this.$scope.imageHistory.slice(-1)[0], datum)) {
-
-                var index = _.sortedIndex(this.$scope.imageHistory, datum, 'utc');
+                var index = _.sortedIndex(this.$scope.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
                this.$scope.imageHistory.splice(index, 0, datum);
                return true;
            }
@@ -196,8 +194,12 @@ define(

        ImageryController.prototype.onScroll = function (event) {
            this.$window.requestAnimationFrame(function () {
+                var thumbnailWrapperHeight = this.scrollable[0].offsetHeight;
+                var thumbnailWrapperWidth = this.scrollable[0].offsetWidth;
                if (this.scrollable[0].scrollLeft <
-                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - 20) {
+                    (this.scrollable[0].scrollWidth - this.scrollable[0].clientWidth) - (thumbnailWrapperWidth) ||
+                    this.scrollable[0].scrollTop <
+                    (this.scrollable[0].scrollHeight - this.scrollable[0].clientHeight) - (thumbnailWrapperHeight)) {
                    this.autoScroll = false;
                } else {
                    this.autoScroll = true;
@@ -205,12 +207,16 @@ define(
            }.bind(this));
        };

-        ImageryController.prototype.scrollToRight = function () {
+        /**
+         *  Force history imagery div to scroll to bottom.
+         */
+        ImageryController.prototype.scrollToBottom = function () {
            if (this.autoScroll) {
-                this.scrollable[0].scrollLeft = this.scrollable[0].scrollWidth;
+                this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
            }
        };

+
        /**
         * Get the time portion (hours, minutes, seconds) of the
         * timestamp associated with the incoming image telemetry
@@ -243,16 +249,38 @@ define(
         * @returns {boolean} the current state
         */
        ImageryController.prototype.paused = function (state) {
-                if (arguments.length > 0 && state !== this.isPaused) {
-                    this.isPaused = state;
-                    if (this.nextDatum) {
-                        this.updateValues(this.nextDatum);
-                        delete this.nextDatum;
-                    }
+            if (arguments.length > 0 && state !== this.isPaused) {
+                this.unselectAllImages();
+                this.isPaused = state;
+                if (this.nextDatum) {
+                    this.updateValues(this.nextDatum);
+                    delete this.nextDatum;
                }
-                return this.isPaused;
-            };
+                this.autoScroll = true;
+            }
+            return this.isPaused;
+        };

+        /**
+         * Set the selected image on the state for the large imagery div to use.
+         * @param {object} [image] the image object to get url from.
+         */
+        ImageryController.prototype.setSelectedImage = function (image) {
+            this.imageUrl = this.getImageUrl(image);
+            this.time = this.getTime(image);
+            this.paused(true);
+            this.unselectAllImages();
+            image.selected = true;
+        };
+
+        /**
+         * Loop through the history imagery data to set all images to unselected.
+         */
+        ImageryController.prototype.unselectAllImages = function () {
+            for (var i = 0; i < this.$scope.imageHistory.length; i++) {
+                this.$scope.imageHistory[i].selected = false;
+            }
+        };
        return ImageryController;
    }
 );
--- a/platform/features/imagery/test/controllers/ImageryControllerSpec.js
+++ b/platform/features/imagery/test/controllers/ImageryControllerSpec.js
@@ -226,6 +226,28 @@ define(
                    expect(controller.updateHistory(mockDatum)).toBe(false);
                    expect(controller.updateHistory(mockDatum)).toBe(false);
                });
+
+                describe("user clicks on imagery thumbnail", function () {
+                    var mockDatum = { utc: 1434600258123, url: 'some/url', selected: false};
+
+                    it("pauses and adds selected class to imagery thumbnail", function () {
+                        controller.setSelectedImage(mockDatum);
+                        expect(controller.paused()).toBeTruthy();
+                        expect(mockDatum.selected).toBeTruthy();
+                    });
+
+                    it("unselects previously selected image", function () {
+                        $scope.imageHistory = [{ utc: 1434600258123, url: 'some/url', selected: true}];
+                        controller.unselectAllImages();
+                        expect($scope.imageHistory[0].selected).toBeFalsy();
+                    });
+
+                    it("updates larger image url and time", function () {
+                        controller.setSelectedImage(mockDatum);
+                        expect(controller.getImageUrl()).toEqual(controller.getImageUrl(mockDatum));
+                        expect(controller.getTime()).toEqual(controller.timeFormat.format(mockDatum.utc));
+                    });
+                });
            });

            it("initially shows an empty string for date/time", function () {
Author	SHA1	Message	Date
Charles Hacskaylo	9fe1923189	[Front-end] Fixes for Hyperlinks Fixes #1710 Converted to span to confine clickable area to text only; Link now uses `overflow: hidden` in frame; Normalized font-size when .s-button;	2017-09-14 11:05:05 -07:00
Pete Richards	54b975f242	Merge pull request #1699 from nasa/imagery-issue-1676 Imagery issue #1676	2017-09-12 11:28:40 -07:00
Deep Tailor	7f75e089e8	remove workaround for Imagery Thumbnail resizing from MCTSplitPane and add box sizing to thumbs wrapper to fix phantom resizing	2017-09-11 16:35:14 -07:00
Charles Hacskaylo	8e8c66280f	Fix for Issue #1676 Add history imagery under large imagery view. Allow users to click on history imagery thumbs to set main image and pause the imagery view. Allow users to unpause and continue imagery stream. Users can adjust the height of the imagery panes, and the user selected height is persisted.	2017-09-11 12:51:04 -07:00
Pete Richards	d3d874e209	Merge pull request #1702 from nasa/glyphs-update-import-export [Glyphs] Add import and export icons	2017-09-11 12:01:04 -07:00
Charles Hacskaylo	ce561e1598	[Glyphs] Add import and export icons For #1695	2017-09-11 11:41:19 -07:00