From d42227a38f2a4f317eb1e40c3d94ec671c1f94c9 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 11 Aug 2023 15:34:56 +0200
Subject: [PATCH] Replace error tooltips in cloze children with
ClozeChildErrorMessageC. #520
---
.../text-field-simple.component.ts | 7 +++--
.../toggle-button.component.ts | 7 +++--
.../cloze/cloze-child-error-message.ts | 28 +++++++++++++++++++
.../input-elements/drop-list.component.ts | 2 +-
projects/common/pipes/error-transform.pipe.ts | 4 +--
projects/common/shared.module.ts | 4 ++-
projects/player/src/styles.css | 8 ------
7 files changed, 42 insertions(+), 18 deletions(-)
create mode 100644 projects/common/components/compound-elements/cloze/cloze-child-error-message.ts
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 e0c6518c9..1d31c21f8 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
@@ -9,6 +9,10 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
@Component({
selector: 'aspect-text-field-simple',
template: `
+ <aspect-cloze-child-error-message *ngIf="elementFormControl.errors && elementFormControl.touched"
+ [elementModel]="elementModel"
+ [elementFormControl]="elementFormControl">
+ </aspect-cloze-child-error-message>
<input #input
class="cloze-child"
autocomplete="off"
@@ -16,9 +20,6 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
autocorrect="off"
spellcheck="false"
[class.errors]="elementFormControl.errors && elementFormControl.touched"
- [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
- (elementFormControl.errors | errorTransform: elementModel) : ''"
- [matTooltipClass]="'error-tooltip'"
[attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
[style.line-height.%]="elementModel.styling.lineHeight"
[style.color]="elementModel.styling.fontColor"
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
index d76869115..d5d035b46 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
@@ -5,15 +5,16 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
@Component({
selector: 'aspect-toggle-button',
template: `
+ <aspect-cloze-child-error-message *ngIf="elementFormControl.errors && elementFormControl.touched"
+ [elementModel]="elementModel"
+ [elementFormControl]="elementFormControl">
+ </aspect-cloze-child-error-message>
<mat-button-toggle-group [class.errors]="elementFormControl.errors && elementFormControl.touched"
[formControl]="elementFormControl"
[isDisabled]="elementModel.readOnly"
[value]="elementModel.value"
[vertical]="elementModel.verticalOrientation"
[style.height.px]="elementModel.dimensions.isHeightFixed ? elementModel.dimensions.height : null"
- [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
- (elementFormControl.errors | errorTransform: elementModel) : ''"
- [matTooltipClass]="'error-tooltip'"
(focusout)="elementFormControl.markAsTouched()">
<!--Add dummy div - otherwise toggle button with empty options will not be in one line-->
<div *ngIf="elementModel.options.length === 0"
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts b/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts
new file mode 100644
index 000000000..c6e4dedfc
--- /dev/null
+++ b/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { InputElement } from 'common/models/elements/element';
+import { UntypedFormControl } from '@angular/forms';
+
+@Component({
+ selector: 'aspect-cloze-child-error-message',
+ template: `
+ {{elementFormControl.errors ? (elementFormControl.errors | errorTransform: elementModel) : null}}
+ `,
+ host: {
+ '[style.top.px]': 'elementModel.dimensions.height + 5'
+ },
+ styles: [`
+ :host {
+ padding: 0 5px;
+ position: absolute;
+ border: 1px solid #f44336;
+ font-size: 12px;
+ background-color: rgb(255, 255, 255, 0.9);
+ color: #f44336;
+ z-index: 1;
+ }
+ `]
+})
+export class ClozeChildErrorMessage {
+ @Input() elementModel!: InputElement;
+ @Input() elementFormControl!: UntypedFormControl;
+}
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index c89b75206..0b1b694d0 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -155,7 +155,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.cdk-drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
'.cdk-drag-placeholder * {visibility: hidden;}',
'.static-placeholder .cdk-drag-placeholder {transform: unset !important;}',
- '.error-message {font-size: 75%;}',
+ '.error-message {font-size: 12px;}',
'.baseline-helper {width: 0; display: inline-block;}'
]
})
diff --git a/projects/common/pipes/error-transform.pipe.ts b/projects/common/pipes/error-transform.pipe.ts
index 85ad97828..1d9d9ffde 100644
--- a/projects/common/pipes/error-transform.pipe.ts
+++ b/projects/common/pipes/error-transform.pipe.ts
@@ -7,7 +7,7 @@ import { UIElement } from 'common/models/elements/element';
})
export class ErrorTransformPipe implements PipeTransform {
transform(validationErrors: ValidationErrors, elementModel: UIElement): string {
- const validationMessages = this.getValidationMessages(elementModel);
+ const validationMessages = ErrorTransformPipe.getValidationMessages(elementModel);
let returnMessage = '';
Object.keys(validationErrors).forEach(errorKey => {
@@ -19,7 +19,7 @@ export class ErrorTransformPipe implements PipeTransform {
return returnMessage;
}
- private getValidationMessages = (elementModel: UIElement): Record<string, string> => ({
+ private static getValidationMessages = (elementModel: UIElement): Record<string, string> => ({
required: elementModel.requiredWarnMessage as string,
minlength: elementModel.minLengthWarnMessage as string,
maxlength: elementModel.maxLengthWarnMessage as string,
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index e13627d35..ce8549ee9 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -30,6 +30,7 @@ import { DynamicRowsDirective } from 'common/directives/dynamic-rows.directive';
import { TooltipEventTooltipDirective } from 'common/components/tooltip/tooltip-event-tooltip.directive';
import { TooltipComponent } from 'common/components/tooltip/tooltip.component';
import { PointerEventTooltipDirective } from 'common/components/tooltip/pointer-event-tooltip.directive';
+import { ClozeChildErrorMessage } from 'common/components/compound-elements/cloze/cloze-child-error-message';
import { TextComponent } from './components/text/text.component';
import { ButtonComponent } from './components/button/button.component';
import { TextFieldComponent } from './components/input-elements/text-field.component';
@@ -162,7 +163,8 @@ import { UnitDefErrorDialogComponent } from './components/unit-def-error-dialog.
UnitDefErrorDialogComponent,
TooltipComponent,
TooltipEventTooltipDirective,
- PointerEventTooltipDirective
+ PointerEventTooltipDirective,
+ ClozeChildErrorMessage
],
exports: [
CommonModule,
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index e4d43b3a2..d296915dd 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -7,14 +7,6 @@ body {
display: inline;
}
-.error-tooltip {
- border: 1px solid #f44336;
- margin-top: 8px !important;
- font-size: 12px;
- background-color: white;
- color: #f44336 !important;
-}
-
.active-anchor {
scroll-margin: 100px 0;
}
--
GitLab