Closes #7936

- Significant improvements for Time Strip imagery view ahead of user-settable swimlane heights.
- Imagery container height, image height and width no longer set in code.
- Imagery swimlane now uses styles and hover behavior consistent with events.

Author: charlesh88

src/plugins/imagery/components/ImageryTimeView.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div ref="imagery" class="c-imagery-tsv c-timeline-holder">
+  <div ref="imagery" class="c-imagery-tsv js-imagery-tsv">
     <div ref="imageryHolder" class="c-imagery-tsv__contents u-contents"></div>
   </div>
 </template>
@@ -37,8 +37,6 @@ import { PREVIEW_ACTION_KEY } from '@/ui/preview/PreviewAction.js';
 import imageryData from '../../imagery/mixins/imageryData.js';
 
 const PADDING = 1;
-const ROW_HEIGHT = 100;
-const IMAGE_SIZE = 85;
 const IMAGE_WIDTH_THRESHOLD = 25;
 const CONTAINER_CLASS = 'c-imagery-tsv-container';
 const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items';
@@ -73,9 +71,11 @@ export default {
   mounted() {
     this.previewAction = this.openmct.actions.getAction(PREVIEW_ACTION_KEY);
 
-    this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas'));
-    this.canvas.height = 0;
-    this.canvasContext = this.canvas.getContext('2d');
+    // Why are we doing this? This element causes scroll problems in the swimlane.
+    // this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas'));
+    // this.canvas.height = 0;
+    // this.canvas.width = 10;
+    // this.canvasContext = this.canvas.getContext('2d');
     this.setDimensions();
 
     this.setScaleAndPlotImagery = this.setScaleAndPlotImagery.bind(this);
@@ -207,8 +207,8 @@ export default {
     setDimensions() {
       const imageryHolder = this.$refs.imagery;
       this.width = this.getClientWidth();
-
       this.height = Math.round(imageryHolder.getBoundingClientRect().height);
+      this.imageHeight = this.height - 10;
     },
     setScale(timeSystem) {
       if (!this.width) {
@@ -233,7 +233,6 @@ export default {
       return imageObj.time <= this.viewBounds.end && imageObj.time >= this.viewBounds.start;
     },
     getImageryContainer() {
-      let containerHeight = 100;
       let containerWidth = this.imageHistory.length ? this.width : 200;
       let imageryContainer;
 
@@ -271,7 +270,6 @@ export default {
 
         imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`);
         imageryContainer.style.maxWidth = `${containerWidth}px`;
-        imageryContainer.style.height = `${containerHeight}px`;
       }
 
       return imageryContainer;
@@ -380,24 +378,18 @@ export default {
       //create image vertical tick indicator
       let imageTickElement = document.createElement('div');
       imageTickElement.classList.add('c-imagery-tsv__image-handle');
-      imageTickElement.style.width = '2px';
-      imageTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
       imageWrapper.appendChild(imageTickElement);
 
       //create placeholder - this will also hold the actual image
       let imagePlaceholder = document.createElement('div');
       imagePlaceholder.classList.add('c-imagery-tsv__image-placeholder');
-      imagePlaceholder.style.width = `${IMAGE_SIZE}px`;
-      imagePlaceholder.style.height = `${IMAGE_SIZE}px`;
       imageWrapper.appendChild(imagePlaceholder);
 
       //create image element
       let imageElement = document.createElement('img');
       this.setNSAttributesForElement(imageElement, {
         src: image.thumbnailUrl || image.url
       });
-      imageElement.style.width = `${IMAGE_SIZE}px`;
-      imageElement.style.height = `${IMAGE_SIZE}px`;
       this.setImageDisplay(imageElement, showImagePlaceholders);
 
       //handle mousedown event to show the image in a large view

src/plugins/imagery/components/imagery-view.scss

@@ -509,45 +509,90 @@
 
 /*************************************** IMAGERY IN TIMESTRIP VIEWS */
 .c-imagery-tsv {
-  div.c-imagery-tsv__image-wrapper {
+  $m: $interiorMargin;
+  @include abs();
+
+  &-container {
+    background: $colorPlotBg;
+    box-shadow: inset $colorPlotAreaBorder 0 0 0 1px; // Using box-shadow instead of border to not affect box size
+    position: absolute;
+    top: $m; right: 0; bottom: $m; left: 0;
+  }
+
+  .c-imagery-tsv__image-wrapper {
+    $m: $interiorMarginSm;
     cursor: pointer;
     position: absolute;
-    top: 0;
+    top: $m; bottom: $m;
     display: flex;
     z-index: 1;
-    margin-top: 5px;
 
     img {
       align-self: flex-end;
     }
+
     &:hover {
       z-index: 2;
 
-      [class*='__image-handle'] {
-        background-color: $colorBodyFg;
+      .c-imagery-tsv {
+        &__image-handle {
+          box-shadow: rgba($colorEventLine, 0.5) 0 0 0px 4px;
+          transition: none;
+        }
+
+        &__image-placeholder img {
+          filter: none;
+        }
       }
 
       img {
+        // img can be `display: none` when there's not enough space between tick lines
         display: block !important;
       }
     }
   }
 
-  &__no-items {
-    fill: $colorBodyFg !important;
+  &__image-placeholder {
+    background-color: deeppink; //pushBack($colorBodyBg, 0.3);
+    $m: $interiorMargin;
+    display: block;
+    position: absolute;
+    top: $m; right: auto; bottom: $m; left: 0;
+
+    img {
+      filter: brightness(0.8);
+      height: 100%;
+    }
   }
 
+
   &__image-handle {
-    background-color: rgba($colorBodyFg, 0.5);
+    $lineW: $eventLineW;
+    $hitAreaW: 7px;
+    background-color: $colorEventLine;
+    transition: box-shadow 250ms ease-out;
+    top: 0; bottom: 0;
+    width: $lineW;
+    z-index: 3;
+
+    &:before {
+      // Extend hit area
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0; bottom: 0;
+      z-index: 0;
+      width: $hitAreaW;
+      transform: translateX(($hitAreaW - $lineW) * -0.5);
+    }
   }
 
-  &__image-placeholder {
-    background-color: pushBack($colorBodyBg, 0.3);
-    display: block;
-    align-self: flex-end;
+  &__no-items {
+    fill: $colorBodyFg !important;
   }
 }
 
+// DON'T THINK THIS IS BEING USED
 .c-image-canvas {
   pointer-events: auto; // This allows the image element to receive a browser-level context click
   position: absolute;