From dd4da5feedbf26fcefdf5e9a0dedcee429ad27b6 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 9 Dec 2022 13:13:07 +0100
Subject: [PATCH] Apply read only mode for math field
Read-only math fields are displayed without borders
---
docs/release-notes-editor.md | 4 ++++
.../components/input-elements/math-field.component.ts | 1 +
projects/common/math-editor.module.ts | 7 +++++--
3 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/docs/release-notes-editor.md b/docs/release-notes-editor.md
index 6244b7e55..b38a1ff97 100644
--- a/docs/release-notes-editor.md
+++ b/docs/release-notes-editor.md
@@ -1,5 +1,9 @@
Editor
======
+##1.35.2
+### Verbesserungen
+- Wendet die Eigenschaft "Schreibgeschützt" auf Formel Elemente an
+
## 1.35.1
### Verbesserungen
diff --git a/projects/common/components/input-elements/math-field.component.ts b/projects/common/components/input-elements/math-field.component.ts
index 78a12560f..b4b5dabe4 100644
--- a/projects/common/components/input-elements/math-field.component.ts
+++ b/projects/common/components/input-elements/math-field.component.ts
@@ -19,6 +19,7 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie
[style.backgroundColor]="elementModel.styling.backgroundColor">
<label>{{elementModel.label}}</label><br>
<aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
+ [readonly]="elementModel.readOnly"
[enableModeSwitch]="elementModel.enableModeSwitch"
(input)="elementFormControl.setValue($any($event.target).value)"
(focusout)="elementFormControl.markAsTouched()">
diff --git a/projects/common/math-editor.module.ts b/projects/common/math-editor.module.ts
index 4c459e468..f794a8560 100644
--- a/projects/common/math-editor.module.ts
+++ b/projects/common/math-editor.module.ts
@@ -17,16 +17,18 @@ import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/
<mat-button-toggle value="math">Formel</mat-button-toggle>
<mat-button-toggle value="text">Text</mat-button-toggle>
</mat-button-toggle-group>
- <div #mathfield>
+ <div #mathfield [class.read-only]="readonly">
</div>
`,
styles: [
'mat-button-toggle-group {height: 20px;}',
+ ':host ::ng-deep .read-only math-field {outline: unset}',
':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}'
]
})
export class MathInputComponent implements AfterViewInit, OnChanges {
@Input() value!: string;
+ @Input() readonly!: boolean;
@Input() enableModeSwitch: boolean = false;
@ViewChild('mathfield') mathfieldRef!: ElementRef;
@@ -37,7 +39,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges {
virtualKeyboards: 'aspect-keyboard roman greek',
keypressSound: null,
plonkSound: null,
- decimalSeparator: ',',
+ decimalSeparator: ','
// defaultMode: 'math'
});
@@ -48,6 +50,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges {
setupMathfield(): void {
this.mathfieldRef.nativeElement.appendChild(this.mathFieldElement);
this.mathFieldElement.value = this.value;
+ this.mathFieldElement.readOnly = this.readonly;
}
static setupKeyboard(): Record<string, VirtualKeyboardDefinition> {
--
GitLab