Add macro

src/components/macro/list/macro-list.component.html

@@ -5,7 +5,7 @@
                         [macroAction]="macroAction"
                         [editable]="true"
                         [deletable]="true"
-                        [moveable]="true"
+                        [movable]="true"
                         (save)="saveAction($event, macroActionIndex)"
                         (edit)="editAction(macroActionIndex)"
                         (cancel)="cancelAction()"
@@ -13,15 +13,17 @@
                         [attr.data-index]="macroActionIndex"
             ></macro-item>
 
-            <macro-item *ngIf="showNew" [macroAction]="newMacro"
+            <macro-item *ngIf="showNew"
+                        [@togglerNew]="showNew ? 'active' : 'inactive'"
+                        [macroAction]="newMacro"
                         [editable]="true"
                         [deletable]="false"
-                        [moveable]="false"
+                        [movable]="false"
                         (save)="addNewAction($event)"
                         (cancel)="hideNewAction()"
             ></macro-item>
         </div>
-        <div class="list-group add-new__action-container" *ngIf="!showNew">
+        <div class="list-group add-new__action-container" [@toggler]="(!showNew) ? 'active' : 'inactive'">
             <div class="list-group-item action--item add-new__action-item no-reorder clearfix">
                 <a class="add-new__action-item--link" (click)="showNewAction()">
                     <i class="fa fa-plus"></i> Add new macro action

src/components/macro/list/macro-list.component.scss

@@ -8,12 +8,6 @@
     .list-container {
         display: flex;
         flex: 1;
-
-        > div {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-        }
     }
 }
 
@@ -103,6 +97,7 @@ h1 {
 .add-new__action-container {
     overflow: hidden;
     flex-shrink: 0;
+    border-top: 1px solid #ddd;
 }
 
 .add-new__action-item {

src/components/macro/list/macro-list.component.ts

@@ -1,4 +1,17 @@
-import { Component, EventEmitter, Input, Output, QueryList, ViewChild, forwardRef } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    QueryList,
+    ViewChildren,
+    animate,
+    forwardRef,
+    state,
+    style,
+    transition,
+    trigger
+} from '@angular/core';
 
 import { DragulaService } from 'ng2-dragula/ng2-dragula';
 
@@ -7,6 +20,27 @@ import { MacroAction } from '../../../config-serializer/config-items/macro-actio
 import { MacroItemComponent } from './../index';
 
 @Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active', style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ]),
+        trigger('togglerNew', [
+            state('void', style({
+                height: '0px'
+            })),
+            state('active', style({
+                height: '*'
+            })),
+            transition(':enter', animate('500ms ease-out')),
+            transition(':leave', animate('500ms ease-out'))
+        ])
+    ],
     selector: 'macro-list',
     template: require('./macro-list.component.html'),
     styles: [require('./macro-list.component.scss')],
@@ -14,17 +48,17 @@ import { MacroItemComponent } from './../index';
 })
 export class MacroListComponent {
     @Input() macro: Macro;
-    @ViewChild(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
+    @ViewChildren(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
 
     @Output() add = new EventEmitter();
     @Output() edit = new EventEmitter();
     @Output() delete = new EventEmitter();
     @Output() reorder = new EventEmitter();
 
-    private showNew: boolean = false;
     private newMacro: Macro = undefined;
     private activeEdit: number = undefined;
     private dragIndex: number;
+    private showNew: boolean = false;
 
     constructor(private dragulaService: DragulaService) {
         /* tslint:disable:no-unused-variable: Used by Dragula. */