(js) Highlight selected color in color picker

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>'

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%;