fix: ui break when press tab key in keymap short name control (#816)

This commit is contained in:
Róbert Kiss
2018-10-07 23:21:25 +02:00
committed by László Monda
parent 404ccc7b2b
commit 2cbfc6a11e
2 changed files with 18 additions and 16 deletions

View File

@@ -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"

View File

@@ -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;
}
}
}