From 9b11684ae917fd6be75adde9f8c3f4249ef9c087 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 15 Nov 2016 10:54:00 -0800
Subject: [PATCH] [Frontend] Styling for controls

Fixes #1324
CSS, markup, WIP adding reset button
---
 .../commonUI/general/res/sass/_global.scss    |  5 ++++
 .../general/res/sass/controls/_controls.scss  |  5 ++--
 .../general/res/sass/features/_imagery.scss   |  5 ++--
 .../themes/espresso/res/sass/_constants.scss  |  1 +
 .../themes/snow/res/sass/_constants.scss      |  1 +
 .../imagery/res/templates/imagery.html        | 23 +++++++++++--------
 6 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 964d609c4f..272f09f4db 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -175,6 +175,11 @@ a.disabled {
 	display: none !important;
 }
 
+.hide-nice {
+    opacity: 0;
+    pointer-events: none;
+}
+
 .off {
     visibility: hidden;
     opacity: 0;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index b7680c11c7..1385f52054 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -122,17 +122,18 @@
     // Default position is upper right
     $p: $interiorMargin;
     position: absolute;
-    top: $p; right: $p; bottom: auto; left: $p;
+    top: $p; right: $p; bottom: auto;
     text-align: right;
     z-index: 5;
 }
 
 .s-local-controls {
+    @include trans-prop-nice(opacity);
     font-size: 0.7rem;
     &.s-wrapper-transluc {
         // Semi-opaque wrapper to visually distinguish a control
         // from the background
-        background: rgba($colorBodyFg, 0.2);
+        background: rgba($colorTransLucBg, 0.5);
         box-sizing: border-box;
         border-radius: $controlCr;
     }
diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index 5cd123058a..81a32020f3 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -1,5 +1,6 @@
 .l-image-main-wrapper,
-.l-image-thumbs-wrapper {
+.l-image-thumbs-wrapper,
+.image-main {
 	@include absPosDefault(0, false);
 }
 
@@ -32,7 +33,7 @@
 
 /*************************************** MAIN IMAGE */
 
-.l-image-main,
+.image-main,
 .l-image-thumb-item .l-thumb {
 	background-size: contain;
 	background-position: center;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 54cc0a2cdd..4638281975 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -50,6 +50,7 @@ $sliderKnobW: 15px;
 $sliderKnobR: 2px;
 $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
+$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
 // General Colors
 $colorAlt1: #ffc700;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 99dace8787..7ebe58b9cc 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -50,6 +50,7 @@ $sliderKnobW: 15px;
 $sliderKnobR: 2px;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
+$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
 
 // General Colors
 $colorAlt1: #776ba2;
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 8df37ec1c2..37f6966c07 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -3,24 +3,29 @@
         ng-mouseenter="showLocalControls = true;"
         ng-mouseleave="showLocalControls = false;">
         <div class="l-local-controls s-local-controls s-wrapper-transluc"
-            ng-show="showLocalControls">
-            <input class="icon-contrast" type="range"
-                   min="0"
-                   max="200"
-                   ng-model="filters.contrast">
-            </input>
-
+            ng-class="{ 'hide-nice': !showLocalControls }">
             <input class="icon-brightness" type="range"
                    min="0"
-                   max="200"
+                   max="1000"
                    ng-model="filters.brightness">
             </input>
+            <input class="icon-contrast" type="range"
+                   min="0"
+                   max="1000"
+                   ng-model="filters.contrast">
+            </input>
+            <a class="s-button icon-refresh" ng-click="
+            filters.brightness = 100;
+            filters.contrast = 100
+            "></a>
         </div>
 
         <div class="l-image-main s-image-main flex-elem grows"
-            ng-class="{ paused: imagery.paused(), stale:false }"
+             ng-class="{ paused: imagery.paused(), stale:false }">
+            <div class="image-main"
             mct-background-image="imagery.getImageUrl()"
             filters="filters">
+            </div>
         </div>
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">