Fix Imagery brightness and contrast controls (#3473)

* Fix imagery #3467

- Move location of imagery controls in markup;
- Refine vertical placement;

* Fix imagery #3467

- Fix Firefox-related slider problems: bring over slider fixes and
markup from branch `imagery-view-layers`;

* Fix imagery #3467

- Fix linting problem;

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -7,46 +7,52 @@
     @mouseover="focusElement"
 >
     <div class="c-imagery__main-image-wrapper has-local-controls">
-        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover l-flex-row c-imagery__lc">
+        <div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover c-image-controls__controls">
-            <span class="holder flex-elem grows c-imagery__lc__sliders">
+            <span class="c-image-controls__sliders">
-                <input v-model="filters.brightness"
+                <div class="c-image-controls__slider-wrapper icon-brightness">
-                       class="icon-brightness"
+                    <input v-model="filters.brightness"
-                       type="range"
+                           type="range"
-                       min="0"
+                           min="0"
-                       max="500"
+                           max="500"
-                >
+                    >
-                <input v-model="filters.contrast"
+                </div>
-                       class="icon-contrast"
+                <div class="c-image-controls__slider-wrapper icon-contrast">
-                       type="range"
+                    <input v-model="filters.contrast"
-                       min="0"
+                           type="range"
-                       max="500"
+                           min="0"
-                >
+                           max="500"
+                    >
+                </div>
             </span>
-            <span class="holder flex-elem t-reset-btn-holder c-imagery__lc__reset-btn">
+            <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
                 <a class="s-icon-button icon-reset t-btn-reset"
                    @click="filters={brightness: 100, contrast: 100}"
                 ></a>
             </span>
         </div>
-        <div class="main-image s-image-main c-imagery__main-image has-local-controls"
+        <div class="c-imagery__main-image__bg"
              :class="{'paused unnsynced': isPaused,'stale':false }"
-             :style="{'background-image': imageUrl ? `url(${imageUrl})` : 'none',
-                      'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
-             :data-openmct-image-timestamp="time"
-             :data-openmct-object-keystring="keyString"
         >
-            <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
+            <div class="c-imagery__main-image__image"
-                <button class="c-nav c-nav--prev"
+                 :style="{
-                        title="Previous image"
+                     'background-image': imageUrl ? `url(${imageUrl})` : 'none',
-                        :disabled="isPrevDisabled"
+                     'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`
-                        @click="prevImage()"
+                 }"
-                ></button>
+                 :data-openmct-image-timestamp="time"
-                <button class="c-nav c-nav--next"
+                 :data-openmct-object-keystring="keyString"
-                        title="Next image"
+            ></div>
-                        :disabled="isNextDisabled"
+        </div>
-                        @click="nextImage()"
+        <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
-                ></button>
+            <button class="c-nav c-nav--prev"
-            </div>
+                    title="Previous image"
+                    :disabled="isPrevDisabled"
+                    @click="prevImage()"
+            ></button>
+            <button class="c-nav c-nav--next"
+                    title="Next image"
+                    :disabled="isNextDisabled"
+                    @click="nextImage()"
+            ></button>
         </div>
 
         <div class="c-imagery__control-bar">
@@ -58,7 +64,7 @@
                     class="c-imagery__age icon-timer"
                 >{{ formattedDuration }}</div>
             </div>
-            <div class="h-local-controls flex-elem">
+            <div class="h-local-controls">
                 <button
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': isPaused}"

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

@@ -19,13 +19,24 @@
     }
 
     &__main-image {
-        background-position: center;
+        &__bg,
-        background-repeat: no-repeat;
+        &__image {
-        background-size: contain;
+            height: 100%;
-        height: 100%;
+        }
 
-        &.unnsynced{
+        &__bg {
-            @include sUnsynced();
+            background-color: $colorPlotBg;
+            border: 1px solid transparent;
+
+            &.unnsynced{
+                @include sUnsynced();
+            }
+        }
+
+        &__image {
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
         }
     }
 
@@ -138,11 +149,6 @@
     }
 }
 
-.s-image-main {
-    background-color: $colorPlotBg;
-    border: 1px solid transparent;
-}
-
 /*************************************** IMAGERY LOCAL CONTROLS*/
 .c-imagery {
     .h-local-controls--overlay-content {
@@ -152,7 +158,7 @@
         background: $colorLocalControlOvrBg;
         border-radius: $basicCr;
         max-width: 200px;
-        min-width: 100px;
+        min-width: 70px;
         width: 35%;
         align-items: center;
         padding: $interiorMargin $interiorMarginLg;
@@ -173,6 +179,7 @@
     &__lc {
         &__reset-btn {
             $bc: $scrollbarTrackColorBg;
+
             &:before,
             &:after {
                 border-right: 1px solid $bc;
@@ -195,6 +202,46 @@
     }
 }
 
+.c-image-controls {
+    // Brightness/contrast
+
+    &__controls {
+        // Sliders and reset element
+        display: flex;
+        align-items: center;
+        margin-right: $interiorMargin; // Need some extra space due to proximity to close button
+    }
+
+    &__sliders {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+
+        > * + * {
+            margin-top: 11px;
+        }
+    }
+
+    &__slider-wrapper {
+        // A wrapper is needed to add the type icon to left of each range input
+        display: flex;
+        align-items: center;
+
+        &:before {
+            color: rgba($colorMenuFg, 0.5);
+            margin-right: $interiorMarginSm;
+        }
+
+        input[type='range'] {
+            width: 100px;
+        }
+    }
+
+    &__btn-reset {
+        flex: 0 0 auto;
+    }
+}
+
 /*************************************** BUTTONS */
 .c-button.pause-play {
     // Pause icon set by default in markup
@@ -211,14 +258,13 @@
 }
 
 .c-imagery__prev-next-buttons {
-    //background: rgba(deeppink, 0.2);
     display: flex;
     width: 100%;
     justify-content: space-between;
     pointer-events: none;
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-75%);
 
     .c-nav {
         pointer-events: all;

src/styles/_controls.scss

@@ -866,20 +866,33 @@ select {
 
 
 /******************************************************** SLIDERS AND RANGE */
-@mixin sliderKnobRound() {
+@mixin sliderKnobRound($h: 12px) {
-    $h: 12px;
     @include themedButton();
     cursor: pointer;
     width: $h;
     height: $h;
     border-radius: 50% !important;
-    transform: translateY(-42%);
+}
+
+@mixin sliderTrack($bg: $scrollbarTrackColorBg, $knobH: 12px, $trackH: 3px) {
+    border-radius: 2px;
+    $breakPointPx: floor(($knobH - $trackH) / 2);
+    $bp1: $breakPointPx;
+    $bp2: $breakPointPx + $trackH;
+    box-sizing: border-box;
+    // For cross-browser compatibility, the track needs to be the same height as the knob.
+    height: $knobH;
+    // Gradient visually adds a horizontal line smaller than the knob
+    background: linear-gradient(0deg, rgba($bg,0) $bp1, $bg $bp1, $bg $bp2, rgba($bg,0) $bp2);
 }
 
 input[type="range"] {
     // HTML5 range inputs
+    $knobH: 11px;
+    $trackH: 3px;
     -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. */
     }
@@ -887,28 +900,26 @@ input[type="range"] {
     // Thumb
     &::-webkit-slider-thumb {
         -webkit-appearance: none;
-        @include sliderKnobRound();
+        @include sliderKnobRound($knobH);
     }
     &::-moz-range-thumb {
         border: none;
-        @include sliderKnobRound();
+        @include sliderKnobRound($knobH);
     }
     &::-ms-thumb {
         border: none;
-        @include sliderKnobRound();
+        @include sliderKnobRound($knobH);
     }
 
     // Track
     &::-webkit-slider-runnable-track {
         width: 100%;
-        height: 3px;
+        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-        @include sliderTrack();
     }
 
     &::-moz-range-track {
         width: 100%;
-        height: 3px;
+        @include sliderTrack($knobH: $knobH, $trackH: $trackH);
-        @include sliderTrack();
     }
 }