From 2cbfc6a11e50f128c47f83f308431c58d228e614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Sun, 7 Oct 2018 23:21:25 +0200
Subject: [PATCH] fix: ui break when press tab key in keymap short name control
 (#816)

---
 .../undoable-notifier.component.html          |  5 +++-
 .../undoable-notifier.component.ts            | 29 +++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html b/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html
index 072c0f78..ec02c850 100644
--- a/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html
+++ b/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html
@@ -1,5 +1,8 @@
 <div class="pull-right">
-    <div class="alert alert-warning alert-dismissible" role="alert" [@slideInOut]="slideInOut">
+    <div *ngIf="text"
+         [@slideInOut]
+         class="alert alert-warning alert-dismissible"
+         role="alert">
         <button type="button"
                 class="close"
                 aria-label="Close"
diff --git a/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts b/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts
index aea3a4dc..8398cee1 100644
--- a/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts
+++ b/packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 import { Notification } from 'uhk-common';
 
@@ -9,16 +9,17 @@ import { Notification } from 'uhk-common';
     styleUrls: ['./undoable-notifier.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
-        trigger('slideInOut', [
-            state('in', style({
-                transform: 'translate3d(0, 0, 0)'
-            })),
-            state('out', style({
-                transform: 'translate3d(200%, 0, 0)'
-            })),
-            transition('in => out', animate('400ms ease-in-out')),
-            transition('out => in', animate('400ms ease-in-out'))
-        ])
+        trigger(
+            'slideInOut', [
+                transition(':enter', [
+                    style({transform: 'translateX(100%)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateX(0)'}))
+                ]),
+                transition(':leave', [
+                    style({transform: 'translateX(0)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateX(100%)'}))
+                ])
+            ])
     ]
 })
 export class UndoableNotifierComponent implements OnChanges {
@@ -28,16 +29,14 @@ export class UndoableNotifierComponent implements OnChanges {
     @Output() close = new EventEmitter();
     @Output() undo = new EventEmitter();
 
-    get slideInOut() {
-        return this.notification ? 'in' : 'out';
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes['notification']) {
             const not: Notification = changes['notification'].currentValue;
             if (not) {
                 this.text = not.message;
                 this.undoable = !!not.extra;
+            } else {
+                this.text = null;
             }
         }
     }