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