From c2c997c9b0910d7437bd9aaed7b7878c05e62a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Sun, 28 Jul 2019 20:43:12 +0200
Subject: [PATCH] feat: decrease the size between the keyboard layout and
 description in split mode  (#990)

* feat: decrease the size between the keyboard layout and description if split

* fix: increase the distance between the keyboard and keyboard desc.

* fix: increase the description distance in split mode
---
 .../svg/keyboard/svg-keyboard.component.html        |  1 +
 .../svg/keyboard/svg-keyboard.component.ts          | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
index ee3c6ad2..e22581ca 100644
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
+++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
@@ -26,4 +26,5 @@
 <editable-text *ngIf="showDescription"
                [ngModel]="description"
                (ngModelChange)="descriptionChanged.emit($event)"
+               [@moveDescription]="descriptionAnimation"
                placeholder="No description provided for this keymap."></editable-text>
diff --git a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
index 784b3975..2bd7ca22 100644
--- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
+++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
@@ -49,6 +49,16 @@ import { LastEditedKey } from '../../../models';
             })),
             transition('visible => invisible', animate('200ms')),
             transition('invisible => visible', animate('200ms 500ms'))
+        ]),
+        trigger('moveDescription', [
+            state('down', style({
+                'margin-top': '0.5em'
+            })),
+            state('up', style({
+                'margin-top': '-6.5%'
+            })),
+            transition('down => up', animate(500)),
+            transition('up => down', animate(500))
         ])
     ]
 })
@@ -74,6 +84,7 @@ export class SvgKeyboardComponent {
     separator: SvgSeparator;
     separatorStyle: SafeStyle;
     separatorAnimation = 'visible';
+    descriptionAnimation = 'down';
 
     constructor(private svgModuleProvider: SvgModuleProviderService,
                 private sanitizer: DomSanitizer) {
@@ -123,9 +134,11 @@ export class SvgKeyboardComponent {
         if (this.halvesInfo.areHalvesMerged) {
             this.moduleAnimationStates = [];
             this.separatorAnimation = 'visible';
+            this.descriptionAnimation = 'down';
         } else {
             this.moduleAnimationStates = ['rotateRight', 'rotateLeft'];
             this.separatorAnimation = 'invisible';
+            this.descriptionAnimation = 'up';
         }
 
         if (this.halvesInfo.isLeftHalfConnected) {