Side menu animation (#97)

src/components/side-menu/side-menu.component.html

@@ -5,9 +5,9 @@
             <a [routerLink]="['/keymap/add']" class="btn btn-default pull-right btn-sm">
                 <i class="fa fa-plus"></i>
             </a>
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, keymapElement)"></i>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'keymap')"></i>
         </div>
-        <ul #keymapElement>
+        <ul [@toggler]="animation.keymap">
             <li *ngFor="let keymap of keymaps" class="sidebar__level-2--item">
                 <div class="sidebar__level-2">
                     <a [routerLink]="['/keymap', keymap.id]">{{keymap.name}}</a>
@@ -22,9 +22,9 @@
             <a href="#" class="btn btn-default pull-right btn-sm">
                 <i class="fa fa-plus"></i>
             </a>
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, macroElement)"></i>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>
         </div>
-        <ul #macroElement>
+        <ul [@toggler]="animation.macro">
             <li *ngFor="let macro of macros" class="sidebar__level-2--item">
                 <div class="sidebar__level-2">
                     <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
@@ -35,9 +35,9 @@
     <li class="sidebar__level-1--item">
         <div class="sidebar__level-1">
             <i class="fa fa-puzzle-piece"></i> Add-on modules
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, addonElement)"></i>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'addon')"></i>
         </div>
-        <ul #addonElement>
+        <ul [@toggler]="animation.addon">
             <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
                 <div class="sidebar__level-2">
                     <a href="#">Key cluster</a>
@@ -63,9 +63,9 @@
     <li class="sidebar__level-1--item">
         <div class="sidebar__level-1">
             <i class="fa fa-exclamation-triangle "></i> Legacy
-            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, legacyElement)"></i>
+            <i class="fa fa-chevron-up pull-right"></i>
         </div>
-        <ul #legacyElement>
+        <ul>
             <li class="sidebar__level-2--item" data-name="Keymap legacy" data-abbrev="QTY">
                 <div class="sidebar__level-2">
                     <a [routerLink]="['/legacy', 'keymap']">Keymap HTML</a>

src/components/side-menu/side-menu.component.scss

@@ -11,17 +11,6 @@ a {
     color: #333;
 }
 
-ul ul {
-    max-height: 200px;
-    transition: max-height 500ms ease-in;
-    overflow: hidden;
-}
-
-ul ul.slide-up {
-    max-height: 0;
-    transition: max-height 500ms ease-out;
-}
-
 // General list styles for the sidebar-menu.
 ul {
     padding: 0;
@@ -31,6 +20,10 @@ ul {
         list-style: none;
         padding: 0;
     }
+
+    ul {
+        overflow: hidden;
+    }
 }
 
 .sidebar {

src/components/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Renderer, animate, state, style, transition, trigger } from '@angular/core';
 
 import { Keymap } from '../../config-serializer/config-items/Keymap';
 import { Macro } from '../../config-serializer/config-items/Macro';
@@ -6,6 +6,17 @@ import { Macro } from '../../config-serializer/config-items/Macro';
 import { UhkConfigurationService } from '../../services/uhk-configuration.service';
 
 @Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active',   style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ])
+    ],
     selector: 'side-menu',
     template: require('./side-menu.component.html'),
     styles: [require('./side-menu.component.scss')]
@@ -13,21 +24,33 @@ import { UhkConfigurationService } from '../../services/uhk-configuration.servic
 export class SideMenuComponent implements OnInit {
     private keymaps: Keymap[];
     private macros: Macro[];
+    private animation: {[key: string]: 'active' | 'inactive'};
 
-    constructor(private uhkConfigurationService: UhkConfigurationService) { }
+    constructor(private uhkConfigurationService: UhkConfigurationService, private renderer: Renderer) {
+        this.animation = {
+            keymap: 'active',
+            macro: 'active',
+            addon: 'active'
+        };
+    }
 
     ngOnInit() {
         this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements;
         this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
     }
 
-    /* tslint:disable:no-unused-variable: This function is used in the template */
+    toggleHide(event: Event, type: string) {
-    private toggleHide(event: Event, view: Element) {
-        /* tslint:enable:no-unused-variable */
         let header: DOMTokenList = (<Element> event.target).classList;
+        let show = false;
 
-        view.classList.toggle('slide-up');
+        if (header.contains('fa-chevron-down')) {
-        header.toggle('fa-chevron-up');
+            show = true;
-        header.toggle('fa-chevron-down');
+            this.animation[type] = 'active';
+        } else {
+            this.animation[type] = 'inactive';
+        }
+
+        this.renderer.setElementClass(event.target, 'fa-chevron-up', show);
+        this.renderer.setElementClass(event.target, 'fa-chevron-down', !show);
     }
 }