diff --git a/docs/release-notes-editor.md b/docs/release-notes-editor.md index 46471f5ce1a5fe6dfd57ce5a38bfc4a958b8d90b..6244b7e559176a859eadac0e31dc4479f2263283 100644 --- a/docs/release-notes-editor.md +++ b/docs/release-notes-editor.md @@ -1,5 +1,9 @@ Editor ====== +## 1.35.1 + +### Verbesserungen +- Das Aussehen von Formelelementen kann im Eigenschaftsfenster geändert werden ## 1.35.0 diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md index f51e751119757bff5bfbcfd1e3b0a9d9a66cc994..bd1b353c5e2197b985c614a6e99cf0bbe49a7364 100644 --- a/docs/release-notes-player.md +++ b/docs/release-notes-player.md @@ -1,5 +1,9 @@ Player ====== +## 1.28.1 +### Verbesserungen +- Darstellung und Verhalten der Warnmeldung von Formelelementen + verhalten sich analog zu anderen Elementen ## 1.28.0 diff --git a/projects/common/components/input-elements/math-field.component.ts b/projects/common/components/input-elements/math-field.component.ts index df1165464577428499d3442882b69a7e7e7ad08e..78a12560f22471c12c693e89e26c18b435a636b7 100644 --- a/projects/common/components/input-elements/math-field.component.ts +++ b/projects/common/components/input-elements/math-field.component.ts @@ -9,16 +9,27 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie @Component({ selector: 'aspect-math-field', template: ` - <label>{{elementModel.label}}</label><br> - <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm" - [enableModeSwitch]="elementModel.enableModeSwitch" - (input)="elementFormControl.setValue($any($event.target).value)" - (focusout)="elementFormControl.markAsTouched()"> - </aspect-mathlive-math-field> - <mat-error *ngIf="elementFormControl.errors"> - {{elementFormControl.errors | errorTransform: elementModel}} - </mat-error> - ` + <div [style.line-height.%]="elementModel.styling.lineHeight" + [style.color]="elementModel.styling.fontColor" + [style.font-family]="elementModel.styling.font" + [style.font-size.px]="elementModel.styling.fontSize" + [style.font-weight]="elementModel.styling.bold ? 'bold' : ''" + [style.font-style]="elementModel.styling.italic ? 'italic' : ''" + [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''" + [style.backgroundColor]="elementModel.styling.backgroundColor"> + <label>{{elementModel.label}}</label><br> + <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm" + [enableModeSwitch]="elementModel.enableModeSwitch" + (input)="elementFormControl.setValue($any($event.target).value)" + (focusout)="elementFormControl.markAsTouched()"> + </aspect-mathlive-math-field> + <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched" + class="error-message"> + {{elementFormControl.errors | errorTransform: elementModel}} + </mat-error> + </div> + `, + styles: ['.error-message {font-size: 75%; margin-top: 15px; margin-left: 10px;}'] }) export class MathFieldComponent extends FormElementComponent { @Input() elementModel!: MathFieldElement; diff --git a/projects/common/models/elements/input-elements/math-field.ts b/projects/common/models/elements/input-elements/math-field.ts index 487924ff782d3641a0fb81e54ef1fa06dac7bb86..e6a29bb6449d930850ff8123a3dd25faf1334ac3 100644 --- a/projects/common/models/elements/input-elements/math-field.ts +++ b/projects/common/models/elements/input-elements/math-field.ts @@ -1,5 +1,5 @@ import { - AnswerScheme, InputElement, PositionProperties, UIElement + AnswerScheme, BasicStyles, InputElement, PositionProperties, UIElement } from 'common/models/elements/element'; import { Type } from '@angular/core'; import { ElementComponent } from 'common/directives/element-component.directive'; @@ -8,11 +8,21 @@ import { MathFieldComponent } from 'common/components/input-elements/math-field. export class MathFieldElement extends InputElement { enableModeSwitch: boolean = false; position: PositionProperties | undefined; + styling: BasicStyles & { + lineHeight: number; + }; constructor(element: Partial<MathFieldElement>) { super(element); if (element.enableModeSwitch !== undefined) this.enableModeSwitch = element.enableModeSwitch; this.position = element.position ? UIElement.initPositionProps(element.position) : undefined; + this.styling = { + ...UIElement.initStylingProps({ + backgroundColor: 'transparent', + lineHeight: 135, + ...element.styling + }) + }; } hasAnswerScheme(): boolean { @@ -23,7 +33,7 @@ export class MathFieldElement extends InputElement { return { id: this.id, type: 'string', - format: '', + format: 'latex', multiple: false, nullable: !this.value && this.value !== '', values: [],