Added sliding effect to the items

src/components/macro/action-editor/macro-action-editor.component.scss

@@ -1,5 +1,10 @@
 @import '../../../main-app/global-styles';
 
+:host {
+    display: block;
+    width: 100%;
+}
+
 .action--editor {
     padding-top: 0;
     padding-bottom: 0;
@@ -67,6 +72,7 @@
         &-container {
             background: #f5f5f5;
             border-top: 1px solid #ddd;
+            border-bottom: 1px solid #ddd;
             padding: 1rem 1.5rem;
         }
     }

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

@@ -1,5 +1,5 @@
 <div class="list-group-item action--item" [class.is-editing]="editing">
-    <span *ngIf="moveable" class="glyphicon glyphicon-option-vertical action--movable" aria-hidden="true"></span>
+    <span *ngIf="movable" class="glyphicon glyphicon-option-vertical action--movable" aria-hidden="true"></span>
     <div class="action--item--wrap" [class.pointer]="!editing && editable" (click)="editAction()">
         <icon [name]="iconName"></icon>
         <div class="action--title">{{ title }}</div>
@@ -7,11 +7,11 @@
     </div>
     <icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
 </div>
-<div class="list-group-item macro-action-editor__container" *ngIf="editable && editing">
-  <macro-action-editor 
-      #macroActionEditor
-      *ngIf="editable && editing"
+<div class="list-group-item macro-action-editor__container"
+     [@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'">
+  <macro-action-editor
       [macroAction]="macroAction"
       (cancel)="cancelEdit()"
-      (save)="saveEditedAction($event)"></macro-action-editor>
+      (save)="saveEditedAction($event)">
+  </macro-action-editor>
 </div>

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

@@ -1,6 +1,9 @@
 @import '../../../main-app/global-styles';
 
 :host {
+    overflow: hidden;
+    display: block;
+
     &.macro-item:first-of-type {
         .list-group-item {
             border-radius: 4px 4px 0 0;
@@ -70,10 +73,14 @@
     }
 }
 
+.list-group-item {
+    margin-bottom: 0;
+}
+
 .macro-action-editor__container {
     padding-top: 0;
     padding-bottom: 0;
     border-radius: 0;
-    border-left: 0;
-    border-right: 0;
+    border: none;
+    overflow: hidden;
 }

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

@@ -1,4 +1,17 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    SimpleChanges,
+    animate,
+    state,
+    style,
+    transition,
+    trigger
+} from '@angular/core';
 
 import { KeyModifiers } from '../../../config-serializer/config-items/KeyModifiers';
 import {
@@ -14,17 +27,27 @@ import {
 import { MapperService } from '../../../services/mapper.service';
 
 @Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active',   style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ])
+    ],
     selector: 'macro-item',
     template: require('./macro-item.component.html'),
     styles: [require('./macro-item.component.scss')],
     host: { 'class': 'macro-item' }
 })
 export class MacroItemComponent implements OnInit, OnChanges {
-
     @Input() macroAction: MacroAction;
     @Input() editable: boolean;
     @Input() deletable: boolean;
-    @Input() moveable: boolean;
+    @Input() movable: boolean;
 
     @Output() save = new EventEmitter<MacroAction>();
     @Output() cancel = new EventEmitter<void>();
@@ -34,6 +57,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     private title: string;
     private iconName: string;
     private editing: boolean;
+    private newItem: boolean = false;
 
     constructor(private mapper: MapperService) { }
 
@@ -41,6 +65,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
         this.updateView();
         if (!this.macroAction) {
             this.editing = true;
+            this.newItem = true;
         }
     }
 

src/components/macro/macro.component.html

@@ -7,7 +7,7 @@
                             [macroAction]="macroAction"
                             [editable]="true"
                             [deletable]="true"
-                            [moveable]="true"
+                            [movable]="true"
                             (save)="saveAction($event, macroActionIndex)"
                             (edit)="editAction(macroActionIndex)"
                             (cancel)="cancelAction()"
@@ -15,15 +15,15 @@
                             [attr.data-index]="macroActionIndex"
                 ></macro-item>
 
-                <macro-item *ngIf="showNew" [macroAction]="newMacro"
+                <macro-item [@toggler]="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/macro.component.scss

@@ -49,6 +49,10 @@ h1 {
     }
 }
 
+.list-group {
+    overflow: auto;
+}
+
 .macro__name {
     border-bottom: 2px dotted #999;
     padding: 0 0.5rem;
@@ -77,9 +81,8 @@ h1 {
 }
 
 .macro-actions-container {
-    overflow: auto;
     margin-bottom: 0;
-    border-radius: 4px 4px 0 0;
+    border-radius: 4px;
     border: 1px solid #ddd;
     border-bottom: 0;
 }
@@ -98,7 +101,8 @@ h1 {
 }
 
 .add-new__action-container {
-    border-top: 1px solid #ddd;
+    overflow: hidden;
+    flex-shrink: 0;
 }
 
 .add-new__action-item {

src/components/macro/macro.component.ts

@@ -1,4 +1,14 @@
-import { Component, OnDestroy, QueryList, ViewChildren } from '@angular/core';
+import {
+    Component,
+    OnDestroy,
+    QueryList,
+    ViewChildren,
+    animate,
+    state,
+    style,
+    transition,
+    trigger
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import '@ngrx/core/add/operator/select';
@@ -18,6 +28,17 @@ import { MacroActions } from '../../store/actions';
 import { getMacro } from '../../store/reducers/macro';
 
 @Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active',   style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ])
+    ],
     selector: 'macro',
     template: require('./macro.component.html'),
     styles: [require('./macro.component.scss')],