From 129161024587fba0ca08e8df314a97b34e8027e9 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 10 Dec 2021 10:22:15 +0100
Subject: [PATCH] [player] Fix position of virtual keyboard for text areas
---
docs/release-notes-player.txt | 1 +
.../element-container/element-container.component.html | 1 +
.../player/src/app/components/keyboard/keyboard.component.css | 1 -
.../player/src/app/components/keyboard/keyboard.component.html | 2 ++
.../player/src/app/components/keyboard/keyboard.component.ts | 1 +
5 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 259b6b8f5..24a1962ad 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -4,6 +4,7 @@ Player
- Fix the playability of dependent audios and videos
- Fix storing/restoring the playback time of audios and videos
- Fix the response status when re-entering the unit
+- Fix position of virtual keyboard for text areas
1.11.0
- For spelling element use the same font properties for input field and button
diff --git a/projects/player/src/app/components/element-container/element-container.component.html b/projects/player/src/app/components/element-container/element-container.component.html
index 25a254a47..7786acf73 100644
--- a/projects/player/src/app/components/element-container/element-container.component.html
+++ b/projects/player/src/app/components/element-container/element-container.component.html
@@ -10,6 +10,7 @@
[cdkConnectedOverlayOpen]="isKeyboardOpen">
<app-keyboard cdkDrag
[inputComponent]="focussedInputElement"
+ [inputType]="elementModel.type"
[preset]="keyboardLayout">
</app-keyboard>
</ng-template>
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.css b/projects/player/src/app/components/keyboard/keyboard.component.css
index 367bd9b56..223457a24 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.css
+++ b/projects/player/src/app/components/keyboard/keyboard.component.css
@@ -1,6 +1,5 @@
.keyboard-container{
margin-top: 20px;
- margin-bottom: 40px;
background-color: white;
border: lightgray solid 1px;
border-radius: 3px;
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.html b/projects/player/src/app/components/keyboard/keyboard.component.html
index 182c78456..08fa22cf9 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.html
+++ b/projects/player/src/app/components/keyboard/keyboard.component.html
@@ -1,4 +1,6 @@
<div class="keyboard-container"
+ [style.margin-bottom.px]="inputType === 'text-area' ?
+ inputComponent.clientHeight : inputComponent.clientHeight + 20"
(mousedown)="onMouseDown($event, false)">
<div class="keyboard-header"></div>
<div class="keyboard-inner-container"
diff --git a/projects/player/src/app/components/keyboard/keyboard.component.ts b/projects/player/src/app/components/keyboard/keyboard.component.ts
index 6a2f05f56..c0919d92b 100644
--- a/projects/player/src/app/components/keyboard/keyboard.component.ts
+++ b/projects/player/src/app/components/keyboard/keyboard.component.ts
@@ -8,6 +8,7 @@ import { Component, Input } from '@angular/core';
export class KeyboardComponent {
@Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
@Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
+ @Input() inputType!: 'text-field' | 'text-area';
onMouseDown = (event: MouseEvent, stopPropagation: boolean): void => {
event.preventDefault();
--
GitLab