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

feat(agent): remove routing animation from keymaps (#468)

Browse Source 
* feat(agent): remove routing animation from keymaps

* fix(agent): stylelint warning

* fix(web): Align center the keyboard in init state
This commit is contained in:
Róbert Kiss
2017-10-26 23:49:30 +02:00
committed by László Monda
parent 6c6e2af047
commit 2f459a88c6
1 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/uhk-web/src/app/components/keyboard/slider/keyboard-slider.component.ts
View File

@@ -5,6 +5,8 @@ import { Layer } from 'uhk-common';
import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
type AnimationKeyboard =
'init' |
'initOut' |
'leftIn' |
'leftOut' |
'rightIn' |
@@ -18,6 +20,14 @@ type AnimationKeyboard =
// We use 101%, because there was still a trace of the keyboard in the screen when animation was done
animations: [
trigger('layerState', [
state('init', style({
transform: 'translateX(-50%)',
left: '50%'
})),
state('initOut', style({
transform: 'translateX(0)',
left: '101%'
})),
state('leftIn, rightIn', style({
transform: 'translateX(-50%)',
left: '50%'
@@ -30,34 +40,34 @@ type AnimationKeyboard =
transform: 'translateX(0)',
left: '101%'
})),
transition('leftOut => leftIn, rightOut => leftIn', [
transition('initOut => leftIn, leftOut => leftIn, rightOut => leftIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
style({transform: 'translateX(0%)', left: '101%', offset: 0}),
style({transform: 'translateX(-50%)', left: '50%', offset: 1})
]))
]),
transition('leftIn => leftOut, rightIn => leftOut', [
transition('init => leftOut, leftIn => leftOut, rightIn => leftOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
style({transform: 'translateX(-50%)', left: '50%', offset: 0}),
style({transform: 'translateX(-101%)', left: '0%', offset: 1})
]))
]),
transition('* => rightIn', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
style({transform: 'translateX(-101%)', left: '0%', offset: 0}),
style({transform: 'translateX(-50%)', left: '50%', offset: 1})
]))
]),
transition('* => rightOut', [
animate('400ms ease-out', keyframes([
style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
style({transform: 'translateX(-50%)', left: '50%', offset: 0}),
style({transform: 'translateX(0%)', left: '101%', offset: 1})
]))
]),
transition(':leave', [
animate('2000ms ease-out', keyframes([
style({ opacity: 1, offset: 0 }),
style({ opacity: 0, offset: 1 })
style({opacity: 1, offset: 0}),
style({opacity: 0, offset: 1})
]))
])
])
@@ -76,16 +86,20 @@ export class KeyboardSliderComponent implements OnChanges {
@Output() capture = new EventEmitter();
layerAnimationState: AnimationKeyboard[];
ngOnChanges(changes: SimpleChanges) {
if (changes['layers']) {
this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'leftOut');
this.layerAnimationState[this.currentLayer] = 'leftIn';
this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'initOut');
this.layerAnimationState[this.currentLayer] = 'init';
}
const layerChange = changes['currentLayer'];
if (layerChange) {
const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
this.onLayerChange(prevValue, layerChange.currentValue);
// turn off the routing navigation from non keymap route
if (changes['layers']) {
}
else {
const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
this.onLayerChange(prevValue, layerChange.currentValue);
}
}
}
@@ -101,7 +115,5 @@ export class KeyboardSliderComponent implements OnChanges {
this.layerAnimationState[oldIndex] = 'rightOut';
this.layerAnimationState[index] = 'rightIn';
}
}
}