From d42e3093f294211464fdc7ca3aac54619928cf14 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Thu, 17 Nov 2016 08:49:18 +0100
Subject: [PATCH] Added action change animation

---
 .../svg-keyboard-key.component.html           |  4 ++-
 .../svg-keyboard-key.component.ts             | 28 +++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
index 97b21435..ba8caf1b 100644
--- a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
+++ b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
@@ -1,4 +1,6 @@
-<svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+<svg:rect [@change]="animation"
+          (@change.done)="animationDone()"
+          [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"
 />
diff --git a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
index 2bbf024e..49011719 100644
--- a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
+++ b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
@@ -1,4 +1,7 @@
-import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
+import {
+    Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange,
+    animate, group, style, transition, trigger
+} from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -33,6 +36,18 @@ enum LabelTypes {
 }
 
 @Component({
+    animations: [
+        trigger('change', [
+            transition('inactive => active', [
+                style({fill: '#fff'}),
+                group([
+                    animate('1s ease-out', style({
+                        fill: '#333'
+                    }))
+                ])
+            ])
+        ])
+    ],
     selector: 'g[svg-keyboard-key]',
     template: require('./svg-keyboard-key.component.html'),
     styles: [require('./svg-keyboard-key.component.scss')]
@@ -45,15 +60,13 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() width: number;
     @Input() keyAction: KeyAction;
 
-    /* tslint:disable:no-unused-variable */
-    /* It is used in the template */
-    private enumLabelTypes = LabelTypes;
-    /* tslint:enable:no-unused-variable */
+    enumLabelTypes = LabelTypes;
 
     private labelSource: any;
     private labelType: LabelTypes;
     private macros: Macro[];
     private subscription: Subscription;
+    private animation: string = 'inactive';
 
     constructor(private mapperService: MapperService, private store: Store<AppState>) {
         this.subscription = store.let(getMacroEntities())
@@ -68,6 +81,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         /* tslint:disable:no-string-literal */
         if (changes['keyAction']) {
             this.setLabels();
+            this.animation = 'active';
         }
         /* tslint:enable:no-string-literal */
     }
@@ -76,6 +90,10 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         this.subscription.unsubscribe();
     }
 
+    animationDone() {
+        this.animation = 'inactive';
+    }
+
     private setLabels(): void {
         if (!this.keyAction) {
             this.labelSource = undefined;