diff --git a/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.html b/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.html index 760017d2999a788cff71095ce2ff3dbe06f9bc4e..23a4861f0e662e2f89e274245d3ea3e56d6d537d 100644 --- a/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.html +++ b/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.html @@ -1,13 +1,17 @@ <button class="key" + [class.control]="key !== 'Space' && key.length > 1" mat-raised-button (click)="keyClicked.emit(key)"> - <ng-container *ngIf="key.length === 1"> + <div *ngIf="key.length === 1" + class="character"> {{key}} - <span *ngIf="alternativeKey !== null" class="alternativeKey">{{alternativeKey}}</span> - </ng-container> - <mat-icon *ngIf="key === 'Return'" class="center-icon">keyboard_return</mat-icon> - <mat-icon *ngIf="key === 'Backspace'" class="center-icon">keyboard_backspace</mat-icon> - <mat-icon *ngIf="key === 'Shift'" class="center-icon">keyboard_arrow_up</mat-icon> - <mat-icon *ngIf="key === 'ShiftUp'" class="center-icon">keyboard_capslock</mat-icon> - <mat-icon *ngIf="key === 'Space'" class="center-icon">space_bar</mat-icon> + <span *ngIf="alternativeKey !== null" class="alternative-key">{{alternativeKey}}</span> + </div> + <span> + <mat-icon *ngIf="key === 'Return'" class="center-icon">keyboard_return</mat-icon> + <mat-icon *ngIf="key === 'Backspace'" class="center-icon">keyboard_backspace</mat-icon> + <mat-icon *ngIf="key === 'Shift'" class="center-icon">keyboard_arrow_up</mat-icon> + <mat-icon *ngIf="key === 'ShiftUp'" class="center-icon">keyboard_capslock</mat-icon> + <mat-icon *ngIf="key === 'Space'" class="center-icon">space_bar</mat-icon> + </span> </button> diff --git a/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.scss b/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.scss index 19ba795905fe6cb9c7c39b9774ff6f385082451a..38e75775b4e0bc678652490ccd3484fdd0b2e7bd 100644 --- a/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.scss +++ b/projects/player/modules/key-input/components/keyboard-key/keyboard-key.component.scss @@ -1,9 +1,17 @@ -.alternativeKey { +.alternative-key { color: grey; position: absolute; - top: -5px; - font-size: 1.4vw; - padding-left: 10px; + top: -10px; + font-size: 1.3vw; + padding-left: 12px; +} + +.key.control { + background-color: #eee; +} + +.character { + width: 2vw; } .key { @@ -13,7 +21,9 @@ height: 100%; min-width: unset; .center-icon { - margin-left: 2px; - margin-right: 2px; + height: unset; + width: unset; + margin: 0; + font-size: inherit; } } diff --git a/projects/player/modules/key-input/components/keyboard/keyboard.component.html b/projects/player/modules/key-input/components/keyboard/keyboard.component.html index 9661b4439812439d1ad348a9cb0724338fa960f6..5b3d5ceb79c07997dada4fa8b8358bceee2bfd9e 100644 --- a/projects/player/modules/key-input/components/keyboard/keyboard.component.html +++ b/projects/player/modules/key-input/components/keyboard/keyboard.component.html @@ -1,9 +1,9 @@ <div class="keyboard-container" (mousedown)="$event.preventDefault(); $event.stopPropagation()"> <div *ngIf="addInputAssistanceToKeyboard" - class="specialCharacters fx-space-between-center-wrap"> + class="additional-characters fx-space-between-center-wrap"> <aspect-keyboard-key *ngFor="let key of additionalRow; let i = index" - class="key" + class="key additional-character" [key]="key" [alternativeKey]="null" (keyClicked)="evaluateClickedKeyValue($event)"> diff --git a/projects/player/modules/key-input/components/keyboard/keyboard.component.scss b/projects/player/modules/key-input/components/keyboard/keyboard.component.scss index b7c3606e7323b7d974d32ca28c09606fbc56bcae..3e20d800ba684764b85dccd923b3dc45317d83ef 100644 --- a/projects/player/modules/key-input/components/keyboard/keyboard.component.scss +++ b/projects/player/modules/key-input/components/keyboard/keyboard.component.scss @@ -1,13 +1,18 @@ .character-rows { background-color: lightgray; - padding: 0 50px; + padding: 0 4px; display: grid; + gap: 4px; } -.specialCharacters { - margin-left: 10%; - margin-right: 10%; - background-color: grey; +.additional-character { + flex: 1 1 0; +} + +.additional-characters { + background-color: lightgray; + gap: 4px; + padding: 4px 4px 0 4px; } .fx-space-between-center-wrap { @@ -20,7 +25,6 @@ } .key { - margin: 4px; min-height: 50px; } @@ -28,8 +32,3 @@ position: relative; z-index: 10000; } - -::ng-deep .keyboard-container .iconButton mat-icon { - font-size: 2vw; - width: unset; -} diff --git a/projects/player/modules/key-input/configs/key-layout.ts b/projects/player/modules/key-input/configs/key-layout.ts index 0b0f1e4ebf5750091b7a252ef7b0944e2b4732c2..338dc7d89a7dbd8631f7b1e094689b0915ec1e0e 100644 --- a/projects/player/modules/key-input/configs/key-layout.ts +++ b/projects/player/modules/key-input/configs/key-layout.ts @@ -124,14 +124,14 @@ export class KeyLayout { ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'ß', 'Backspace'], ['q', 'w', 'e', 'r', 't', 'z', 'u', 'i', 'o', 'p', 'ü', 'Return'], ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ö', 'ä'], - ['Shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '-'], + ['Shift', 'y', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '-', 'Shift'], ['Space'] ], shift: [ ['!', '"', '§', '$', '%', '&', '/', '(', ')', '=', '?', 'Backspace'], ['Q', 'W', 'E', 'R', 'T', 'Z', 'U', 'I', 'O', 'P', 'Ü', 'Return'], ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Ö', 'Ä'], - ['ShiftUp', 'Y', 'X', 'C', 'V', 'B', 'N', 'M', ';', ':', '_'], + ['ShiftUp', 'Y', 'X', 'C', 'V', 'B', 'N', 'M', ';', ':', '_', 'ShiftUp'], ['Space'] ], additional: [[]]