Keyboard split/merge animation (#311)

shared/src/components/keymap/edit/keymap-edit.component.html

@@ -1,8 +1,8 @@
 <ng-template [ngIf]="keymap$ | async">
     <keymap-header [keymap]="keymap$ | async" [deletable]="deletable$ | async" (downloadClick)="downloadKeymap()"></keymap-header>
-    <svg-keyboard-wrap [keymap]="keymap$ | async"></svg-keyboard-wrap>
+    <svg-keyboard-wrap [keymap]="keymap$ | async" [halvesSplit]="keyboardSplit"></svg-keyboard-wrap>
 </ng-template>
 
 <div *ngIf="!(keymap$ | async)" class="not-found">
     Sorry, there is no keymap with this abbreviation.
-</div>
+</div>

shared/src/components/keymap/edit/keymap-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import '@ngrx/core/add/operator/select';
@@ -27,6 +27,8 @@ import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/redu
 })
 export class KeymapEditComponent {
 
+    keyboardSplit: boolean;
+
     protected keymap$: Observable<Keymap>;
     private deletable$: Observable<boolean>;
 
@@ -61,6 +63,11 @@ export class KeymapEditComponent {
             });
     }
 
+    @HostListener('window:keydown.alt.s', ['$event'])
+    toggleKeyboardSplit() {
+        this.keyboardSplit = !this.keyboardSplit;
+    }
+
     private toExportableJSON(keymap: Keymap): Observable<any> {
         return this.store
             .let(getUserConfiguration())