Issue 201 - Mark selected key with blue (#290)

* issue-201: initial try

* revert: remove first solution related changes

* feature: change the colour of selected key to blue (empty key selection case not covered)

* typescript: prevent errors in editors due to missing tsconfig for shared

* cleanup: remove unused import

* fix: solve empty key case, pass down selected layerId, moduleId and keyId

* cleanup: remove console.log statement

* cleanup: remove extra line

* review: animation delay shorter, exactly as short as the animation delay of the popover

* review: prevent remaining signature blue when click twice on a key in rapid succession

* review: right signature colour after blending (http://colorblendy.com/#!/multiply/4099e5/cccccc)

* review comments fixes

* review: use simplified condition with help of ‘?’

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -1,5 +1,6 @@
 <svg:rect [@change]="changeAnimation"
           (@change.done)="onChangeAnimationDone()"
+          [@active]="active"
           [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -48,6 +48,12 @@ enum LabelTypes {
                 ])
             ])
         ]),
+        trigger('active', [
+            // http://colorblendy.com/#!/multiply/4099e5/cccccc
+            state('1', style({ fill: '#4099e5' })), // Signature blue color blending
+            transition('1 => *', animate('200ms')),
+            transition('* => 1', animate('0ms')) // Instant color to blue
+        ]),
         trigger('recording', [
             state('inactive', style({
                 fill: 'rgba(204, 0, 0, 1)'
@@ -71,6 +77,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() keyAction: KeyAction;
     @Input() keybindAnimationEnabled: boolean;
     @Input() capturingEnabled: boolean;
+    @Input() active: boolean;
+
     @Output() keyClick = new EventEmitter();
     @Output() capture = new EventEmitter();