From 3979e5c18039a07069e79c68d201c60496972fd1 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Wed, 26 Jan 2022 08:58:08 +0100
Subject: [PATCH] [player] Add animation for fixed virtual keyboard
---
.../components/layout/layout.component.html | 19 ++++++++++++-------
.../app/components/layout/layout.component.ts | 17 ++++++++++++++++-
2 files changed, 28 insertions(+), 8 deletions(-)
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 8665105bd..06cbfdae0 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -10,14 +10,19 @@
scrollPagesView"></ng-container>
</div>
</div>
- <app-keyboard *ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
- [positionOffset]="0"
- [inputElement]="keyboardService.inputElement"
- [position]="keyboardService.position"
- [preset]="keyboardService.preset"
- (deleteCharacter)="keyboardService.deleterCharacters()"
- (enterKey)="keyboardService.enterKey($event)">
+
+ <app-keyboard
+ *ngIf="keyboardService.isOpen && keyboardService.position === 'right'"
+ @keyboardSlideInOut
+ [positionOffset]="0"
+ [inputElement]="keyboardService.inputElement"
+ [position]="keyboardService.position"
+ [preset]="keyboardService.preset"
+ (deleteCharacter)="keyboardService.deleterCharacters()"
+ (enterKey)="keyboardService.enterKey($event)">
</app-keyboard>
+
+
</div>
<ng-template #alwaysVisiblePageView>
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index c00487d47..1d8d13785 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -6,6 +6,9 @@ import { FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
+import {
+ trigger, style, transition, animate
+} from '@angular/animations';
import { KeyboardService } from '../../services/keyboard.service';
import { NativeEventService } from '../../services/native-event.service';
import { PlayerConfig } from '../../models/verona';
@@ -14,8 +17,20 @@ import { Page } from '../../../../../common/models/page';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
- styleUrls: ['./layout.component.css']
+ styleUrls: ['./layout.component.css'],
+ animations: [
+ trigger('keyboardSlideInOut', [
+ transition(':enter', [
+ style({ width: 0 }),
+ animate(200, style({ width: '*' }))
+ ]),
+ transition(':leave', [
+ animate(200, style({ width: 0 }))
+ ])
+ ])
+ ]
})
+
export class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() parentForm!: FormGroup;
@Input() pages!: Page[];
--
GitLab