From 9d0bc5570b9dcf86eb1efe946d030f9aebdc1470 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 13 Nov 2015 14:19:11 -0500
Subject: [PATCH] (js) Highlight selected color in color picker

---
 .../js/Common/sgColorPicker.directive.js      |  3 ++-
 .../scss/components/gridList/grid-list.scss   | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/UI/WebServerResources/js/Common/sgColorPicker.directive.js b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
index 4bbe79640..479215e04 100644
--- a/UI/WebServerResources/js/Common/sgColorPicker.directive.js
+++ b/UI/WebServerResources/js/Common/sgColorPicker.directive.js
@@ -31,7 +31,8 @@
         '    <md-grid-list class="sg-color-picker" md-cols="7" md-row-height="1:1" md-gutter="0.5em">',
         '      <md-grid-tile ng-repeat="color in ::sgColors track by $index"',
         '                    ng-style="{ \'background-color\': color }"',
-        '                    ng-click="setColor(color)"></md-grid-tile>',
+        '                    ng-class="{ selected: color == sgColor }"',
+        '                    ng-click="setColor(color)"><md-icon ng-style="{ color: color }">check_box</md-icon></md-grid-tile>',
         '    </md-grid-list>',
         '  </md-menu-content>',
         '</md-menu>'
diff --git a/UI/WebServerResources/scss/components/gridList/grid-list.scss b/UI/WebServerResources/scss/components/gridList/grid-list.scss
index b1f06b73f..7e9321f3b 100644
--- a/UI/WebServerResources/scss/components/gridList/grid-list.scss
+++ b/UI/WebServerResources/scss/components/gridList/grid-list.scss
@@ -1,18 +1,29 @@
 @import "extends";
 
-// Color picker
+// sgColorPicker directive
 .sg-color-picker {
   md-grid-tile {
     border-radius: 25%;
-    &:hover,
-    &:active {
+    &:hover:not(.selected),
+    &:active:not(.selected) {
       cursor: pointer;
       transform: scale(1.5);
     }
+    &.selected {
+      background-color: transparent !important;
+      md-icon {
+        display: inline-block;
+        font-size: 32px;
+        margin: 0;
+      }
+    }
+    md-icon {
+      display: none;
+    }
   }
 }
 
-// See sgToggleGrid directive
+// sgToggleGrid directive
 [sg-toggle-grid] {
   md-grid-tile {
     border-radius: 5%;