From 638ab63b55b753d46aec7ca8ab3627f732623919 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 29 Mar 2022 13:51:35 +0200
Subject: [PATCH] [player] Improve keyboard component to show more keys for
special chars
The number row has alternative keys, activatable via shift.
Also add new keys for dot, comma etc.
---
.../components/keyboard.component.html | 47 ++++++++++++++-----
.../components/keyboard.component.scss | 22 +++++++--
.../keyboard/components/keyboard.component.ts | 8 ++++
3 files changed, 61 insertions(+), 16 deletions(-)
diff --git a/projects/player/modules/keyboard/components/keyboard.component.html b/projects/player/modules/keyboard/components/keyboard.component.html
index 8946cd1b0..8048d7cea 100644
--- a/projects/player/modules/keyboard/components/keyboard.component.html
+++ b/projects/player/modules/keyboard/components/keyboard.component.html
@@ -1,23 +1,32 @@
-<div (mousedown)="$event.preventDefault(); $event.stopPropagation()">
+<div class="keyboard-container" (mousedown)="$event.preventDefault(); $event.stopPropagation()">
<div *ngIf="showFrenchCharacters" fxLayout="row wrap" fxLayoutAlign="space-around center"
class="specialCharacters">
- <button *ngFor="let key of ['â', 'à ', 'æ', 'ê', 'è', 'é', 'ë', 'î', 'ï', 'ô', 'ò', 'œ', 'û', 'ù', 'ü', 'ç']; let i = index"
+ <button *ngFor="let key of frenchSpecialCharacters; let i = index"
mat-raised-button
(click)="enterCharacter(key)">
{{shift ? key.toUpperCase() : key}}
</button>
</div>
- <div class="keyboard-container">
- <button *ngFor="let key of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']"
+ <div class="character-rows">
+ <button *ngFor="let key of numberKeys; let i = index"
mat-raised-button
[style.grid-row-start]="2"
- [style.grid-column-start]="key"
- (click)="enterCharacter(key)">{{key}}</button>
+ [style.grid-column-start]="i + 1"
+ (click)="enterAltCharacter(key)">
+ <ng-container *ngIf="!shift">
+ {{key[0]}}
+ <span class="alternativeKey">{{key[1]}}</span>
+ </ng-container>
+ <ng-container *ngIf="shift">
+ {{key[1]}}
+ <span class="alternativeKey">{{key[0]}}</span>
+ </ng-container>
+ </button>
<button mat-raised-button
[style.grid-row-start]="2"
- [style.grid-column-start]="11"
+ [style.grid-column-start]="12"
[style.grid-column-end]="13"
(click)="backspaceClicked.emit()">
<mat-icon>keyboard_backspace</mat-icon>
@@ -47,12 +56,12 @@
<mat-icon>keyboard_return</mat-icon>
</button>
- <button mat-raised-button
+ <button mat-raised-button class="iconButton"
[style.background-color]="shift ? 'lightgrey' : null"
[style.grid-row-start]="5"
[style.grid-row-end]="6"
[style.grid-column-start]="1"
- [style.grid-column-end]="3"
+ [style.grid-column-end]="2"
(click)="toggleShift()">
<mat-icon *ngIf="!shift">keyboard_arrow_up</mat-icon>
<mat-icon *ngIf="shift">keyboard_capslock</mat-icon>
@@ -61,13 +70,27 @@
<button *ngFor="let key of ['y', 'x', 'c', 'v', 'b', 'n', 'm']; let i = index"
mat-raised-button
[style.grid-row-start]="5"
- [style.grid-column-start]="i + 3"
+ [style.grid-column-start]="i + 2"
(click)="enterCharacter(key)">{{shift ? key.toUpperCase() : key}}</button>
+ <button *ngFor="let key of [[',', ';'], ['.', ':'], ['-', '_']]; let i = index"
+ mat-raised-button
+ [style.grid-row-start]="5"
+ [style.grid-column-start]="i + 9"
+ (click)="enterAltCharacter($any(key))">
+ <ng-container *ngIf="!shift">
+ {{key[0]}}
+ <span class="alternativeKey">{{key[1]}}</span>
+ </ng-container>
+ <ng-container *ngIf="shift">
+ {{key[1]}}
+ <span class="alternativeKey">{{key[0]}}</span>
+ </ng-container>
+ </button>
<button mat-raised-button
[style.grid-row-start]="6"
- [style.grid-column-start]="1"
- [style.grid-column-end]="13"
+ [style.grid-column-start]="2"
+ [style.grid-column-end]="12"
(click)="spaceClicked.emit()">
<mat-icon>space_bar</mat-icon>
</button>
diff --git a/projects/player/modules/keyboard/components/keyboard.component.scss b/projects/player/modules/keyboard/components/keyboard.component.scss
index bfbbbf1f6..2fc95949c 100644
--- a/projects/player/modules/keyboard/components/keyboard.component.scss
+++ b/projects/player/modules/keyboard/components/keyboard.component.scss
@@ -1,7 +1,5 @@
-.keyboard-container {
+.character-rows {
background-color: lightgray;
- margin-left: 10%;
- margin-right: 10%;
padding: 0 50px;
display: grid;
}
@@ -13,5 +11,21 @@
}
button {
- margin: 10px;
+ margin: 4px;
+ font-size: 2vw;
+ min-height: 50px;
+ min-width: unset;
+}
+
+::ng-deep .keyboard-container .iconButton mat-icon {
+ font-size: 2vw;
+ width: unset;
+}
+
+.alternativeKey {
+ color: grey;
+ position: absolute;
+ top: -5px;
+ font-size: 1.4vw;
+ padding-left: 10px;
}
diff --git a/projects/player/modules/keyboard/components/keyboard.component.ts b/projects/player/modules/keyboard/components/keyboard.component.ts
index 8bf8e35df..ca17772aa 100644
--- a/projects/player/modules/keyboard/components/keyboard.component.ts
+++ b/projects/player/modules/keyboard/components/keyboard.component.ts
@@ -15,11 +15,19 @@ export class KeyboardComponent {
@Output() backspaceClicked = new EventEmitter();
shift = false;
+ numberKeys: [string, string][] = [['1', '!'], ['2', '"'], ['3', '§'], ['4', '$'], ['5', '%'], ['6', '&'],
+ ['7', '/'], ['8', '('], ['9', ')'], ['0', '='], ['ß', '?']];
+
+ frenchSpecialCharacters = ['â', 'à ', 'æ', 'ê', 'è', 'é', 'ë', 'î', 'ï', 'ô', 'ò', 'œ', 'û', 'ù', 'ü', 'ç'];
enterCharacter(pressedCharacter: string): void {
this.characterClicked.emit(this.shift ? pressedCharacter.toUpperCase() : pressedCharacter);
}
+ enterAltCharacter(pressedCharacter: [string, string]): void {
+ this.characterClicked.emit(this.shift ? pressedCharacter[1] : pressedCharacter[0]);
+ }
+
toggleShift(): void {
this.shift = !this.shift;
}
--
GitLab