From d43bff1445ca0b171bc27e02b54974afca8a736a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 21 Jul 2016 17:07:49 -0700
Subject: [PATCH] [Frontend] Fixed colors

Fixes #1047
WIP: fixed colors  and style defs related to clickable
icons
---
 .../general/res/sass/controls/_controls.scss       | 14 ++++++--------
 .../themes/espresso/res/sass/_constants.scss       |  4 ++--
 .../commonUI/themes/snow/res/sass/_constants.scss  |  4 ++--
 platform/features/clock/res/templates/timer.html   |  2 +-
 .../features/timeline/res/sass/_timelines.scss     |  5 +----
 .../res/templates/tabular-swimlane-cols-tree.html  |  4 ++--
 6 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index a9af90e7b4..14c17bf0a6 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -74,16 +74,14 @@
 
 .s-clickable-icon {
     // Clickable icon elements that have hover
+    // .s-toggles means the element is capable of having .active applied to it
     @extend .ui-symbol;
     color: $colorClickIcon;
-    &.active {
-        color: $colorClickIconActive;
-        //&:hover {
-        //    color: rgba($colorClickIconActive, 0.7);
-        //}
-    }
-     &:hover {
-        color: $colorClickIconHov;
+    &:hover { color: $colorClickIconHov; }
+    &.s-toggles {
+        color: rgba($colorClickIcon, 0.5) !important;
+        &.active { color: $colorClickIconActive !important; }
+        &:hover { color: rgba($colorClickIconHov, 0.5) !important; }
     }
 }
 
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 85b846a088..ba08aa0b83 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -29,9 +29,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
-$colorClickIcon: pullForward($colorBodyBg, 10%);
+$colorClickIcon: $colorBodyFg;
 $colorClickIconActive: $colorKey;
-$colorClickIconHov: rgba($colorClickIconActive, 0.4);
+$colorClickIconHov: $colorClickIconActive;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 $shdwBtns: rgba(black, 0.2) 0 1px 2px;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 393319a9a2..641c353941 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -29,9 +29,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: #007fbc;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
-$colorClickIcon: pullForward($colorBodyBg, 10%);
+$colorClickIcon: $colorBodyFg;
 $colorClickIconActive: $colorKey;
-$colorClickIconHov: rgba($colorClickIconActive, 0.4);
+$colorClickIconHov: $colorClickIconActive;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 $shdwBtns: none;
diff --git a/platform/features/clock/res/templates/timer.html b/platform/features/clock/res/templates/timer.html
index 267f622900..ea79f5d642 100644
--- a/platform/features/clock/res/templates/timer.html
+++ b/platform/features/clock/res/templates/timer.html
@@ -23,7 +23,7 @@
 	<div class="l-elem-wrapper l-flex-row">
 		<a ng-click="timer.clickButton()"
 			title="{{timer.buttonText()}}"
-			class="flex-elem control {{timer.buttonCssClass()}}"></a>
+			class="flex-elem control s-clickable-icon {{timer.buttonCssClass()}}"></a>
 	    <span class="flex-elem l-value {{timer.signClass()}}">
 	        <span class="value"
 		        ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}
diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss
index 5f0f4e7a48..122a0426b1 100644
--- a/platform/features/timeline/res/sass/_timelines.scss
+++ b/platform/features/timeline/res/sass/_timelines.scss
@@ -302,12 +302,9 @@
 
         .l-swimlanes-holder .l-cols {
             .l-col-icon,
-            .l-col-icon a {
+            .l-col-icon a:not(.s-toggles) {
                 color: $colorKey;
             }
-            .t-toggle .inactive {
-                color: $colorBtnBg;
-            }
         }
 
 		.l-pane-l {
diff --git a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
index 2ccedd686c..4032a991a0 100644
--- a/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
+++ b/platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
@@ -28,10 +28,10 @@
                'drop-after': ngModel.highlightBottom()
                }">
     <div class="l-cols">
-        <span class="l-col l-col-icon l-plot-resource t-toggle"
+        <span class="l-col l-col-icon l-plot-resource"
               ng-click="ngModel.toggleGraph(); parameters.commit()"
               title="Click to enable or disable inclusion in Resource Graphing">
-            <span class="icon-plot-resource s-clickable-icon"
+            <span class="icon-plot-resource s-clickable-icon s-toggles"
                   ng-class="{ active: ngModel.graph() }">
             </span>
         </span>