uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Side menu animation (#97)

Browse Source
This commit is contained in:
Nejc Zdovc
2016-09-04 18:52:05 +02:00
committed by József Farkas
parent 3c8a01ce7d
commit b0d377e978
3 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/side-menu/side-menu.component.ts
View File

@@ -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 */
private toggleHide(event: Event, view: Element) {
/* tslint:enable:no-unused-variable */
toggleHide(event: Event, type: string) {
let header: DOMTokenList = (<Element> event.target).classList;
let show = false;
view.classList.toggle('slide-up');
header.toggle('fa-chevron-up');
header.toggle('fa-chevron-down');
if (header.contains('fa-chevron-down')) {
show = true;
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);
}
}