From 9ee5558f9c1b7a382b2cc168bed8f077d0fb0701 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 30 Aug 2022 12:16:05 +0200
Subject: [PATCH] [player] Show validation errors of simple text fields
ViewEncapsulation.None is required for overriding tooltip
---
.../text-field-simple.component.ts | 22 ++++++++++++++-----
projects/common/shared.module.ts | 21 +++++++++++++-----
2 files changed, 32 insertions(+), 11 deletions(-)
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
index 935c337b3..2fea5ea53 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts
@@ -1,5 +1,5 @@
import {
- Component, EventEmitter, Input, Output
+ Component, EventEmitter, Input, Output, ViewEncapsulation
} from '@angular/core';
import { FormElementComponent } from 'common/directives/form-element-component.directive';
import {
@@ -15,6 +15,10 @@ import {
autocapitalize="none"
autocorrect="off"
spellcheck="false"
+ [class.text-field-simple-error]="elementFormControl.errors && elementFormControl.touched"
+ [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
+ (elementFormControl.errors | errorTransform: elementModel) : ''"
+ [matTooltipClass]="{'text-field-simple-error-tooltip': true}"
[attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
[style.line-height.%]="elementModel.styling.lineHeight"
[style.color]="elementModel.styling.fontColor"
@@ -31,11 +35,17 @@ import {
(blur)="focusChanged.emit({ inputElement: input, focused: false })">
`,
styles: [
- '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
- 'input {width: calc(100% - 2px); height: calc(100% - 2px); vertical-align: top; padding: 0;}',
- 'input:hover {border: 1px solid currentColor;}',
- 'input:focus {outline: 1px solid #3f51b5;}'
- ]
+ 'aspect-text-field-simple .clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
+ 'aspect-text-field-simple input{width: calc(100% - 2px); height: calc(100% - 2px);}',
+ 'aspect-text-field-simple input{vertical-align: top; padding: 0;}',
+ 'aspect-text-field-simple input:hover {border: 1px solid currentColor;}',
+ 'aspect-text-field-simple input:focus {outline: 1px solid #3f51b5;}',
+ '.text-field-simple-error {outline: 2px solid #f44336 !important;}',
+ '.text-field-simple-error:hover {border: 1px solid #f44336;}',
+ '.text-field-simple-error-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
+ '.text-field-simple-error-tooltip {background-color: white; color: #f44336 !important;}'
+ ],
+ encapsulation: ViewEncapsulation.None // Required for overriding tooltip
})
export class TextFieldSimpleComponent extends FormElementComponent {
@Input() elementModel!: TextFieldSimpleElement;
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 664adf4ea..54576116b 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -24,7 +24,9 @@ import { HttpClientModule } from '@angular/common/http';
import { TextComponent } from './components/text/text.component';
import { ButtonComponent } from './components/button/button.component';
import { TextFieldComponent } from './components/input-elements/text-field.component';
-import { TextFieldSimpleComponent } from './components/compound-elements/cloze/cloze-child-elements/text-field-simple.component';
+import {
+ TextFieldSimpleComponent
+} from './components/compound-elements/cloze/cloze-child-elements/text-field-simple.component';
import { TextAreaComponent } from './components/input-elements/text-area.component';
import { CheckboxComponent } from './components/input-elements/checkbox.component';
import { DropdownComponent } from './components/input-elements/dropdown.component';
@@ -38,18 +40,26 @@ import { ErrorTransformPipe } from './pipes/error-transform.pipe';
import { SafeResourceHTMLPipe } from './pipes/safe-resource-html.pipe';
import { MediaPlayerControlBarComponent }
from './components/media-elements/media-player-control-bar/media-player-control-bar.component';
-import { MediaPlayerTimeFormatPipe } from './components/media-elements/media-player-control-bar/media-player-time-format.pipe';
+import {
+ MediaPlayerTimeFormatPipe
+} from './components/media-elements/media-player-control-bar/media-player-time-format.pipe';
import { LikertComponent } from './components/compound-elements/likert/likert.component';
-import { LikertRadioButtonGroupComponent } from './components/compound-elements/likert/likert-radio-button-group.component';
+import {
+ LikertRadioButtonGroupComponent
+} from './components/compound-elements/likert/likert-radio-button-group.component';
import { ImageMagnifierComponent } from './components/media-elements/image-magnifier.component';
import { RadioGroupImagesComponent } from './components/input-elements/radio-group-images.component';
import { DropListComponent } from './components/input-elements/drop-list.component';
import { ClozeComponent } from './components/compound-elements/cloze/cloze.component';
import { SliderComponent } from './components/input-elements/slider.component';
import { SpellCorrectComponent } from './components/input-elements/spell-correct.component';
-import { DropListSimpleComponent } from './components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
+import {
+ DropListSimpleComponent
+} from './components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component';
import { FrameComponent } from './components/frame/frame.component';
-import { ToggleButtonComponent } from './components/compound-elements/cloze/cloze-child-elements/toggle-button.component';
+import {
+ ToggleButtonComponent
+} from './components/compound-elements/cloze/cloze-child-elements/toggle-button.component';
import { TextMarkingBarComponent } from './components/text/text-marking-bar/text-marking-bar.component';
import { StyleMarksPipe } from './pipes/styleMarks.pipe';
import { TextMarkingButtonComponent } from './components/text/text-marking-bar/text-marking-button.component';
@@ -67,6 +77,7 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
MatCheckboxModule,
ReactiveFormsModule,
FormsModule,
+ MatTooltipModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
--
GitLab