Skip to content
Snippets Groups Projects
Commit dd4da5fe authored by jojohoch's avatar jojohoch
Browse files

Apply read only mode for math field

Read-only math fields are displayed without borders
parent 3d4755db
No related branches found
No related tags found
No related merge requests found
Editor Editor
====== ======
##1.35.2
### Verbesserungen
- Wendet die Eigenschaft "Schreibgeschützt" auf Formel Elemente an
## 1.35.1 ## 1.35.1
### Verbesserungen ### Verbesserungen
......
...@@ -19,6 +19,7 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie ...@@ -19,6 +19,7 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie
[style.backgroundColor]="elementModel.styling.backgroundColor"> [style.backgroundColor]="elementModel.styling.backgroundColor">
<label>{{elementModel.label}}</label><br> <label>{{elementModel.label}}</label><br>
<aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm" <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
[readonly]="elementModel.readOnly"
[enableModeSwitch]="elementModel.enableModeSwitch" [enableModeSwitch]="elementModel.enableModeSwitch"
(input)="elementFormControl.setValue($any($event.target).value)" (input)="elementFormControl.setValue($any($event.target).value)"
(focusout)="elementFormControl.markAsTouched()"> (focusout)="elementFormControl.markAsTouched()">
......
...@@ -17,16 +17,18 @@ import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/ ...@@ -17,16 +17,18 @@ import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/
<mat-button-toggle value="math">Formel</mat-button-toggle> <mat-button-toggle value="math">Formel</mat-button-toggle>
<mat-button-toggle value="text">Text</mat-button-toggle> <mat-button-toggle value="text">Text</mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
<div #mathfield> <div #mathfield [class.read-only]="readonly">
</div> </div>
`, `,
styles: [ styles: [
'mat-button-toggle-group {height: 20px;}', '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}' ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}'
] ]
}) })
export class MathInputComponent implements AfterViewInit, OnChanges { export class MathInputComponent implements AfterViewInit, OnChanges {
@Input() value!: string; @Input() value!: string;
@Input() readonly!: boolean;
@Input() enableModeSwitch: boolean = false; @Input() enableModeSwitch: boolean = false;
@ViewChild('mathfield') mathfieldRef!: ElementRef; @ViewChild('mathfield') mathfieldRef!: ElementRef;
...@@ -37,7 +39,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges { ...@@ -37,7 +39,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges {
virtualKeyboards: 'aspect-keyboard roman greek', virtualKeyboards: 'aspect-keyboard roman greek',
keypressSound: null, keypressSound: null,
plonkSound: null, plonkSound: null,
decimalSeparator: ',', decimalSeparator: ','
// defaultMode: 'math' // defaultMode: 'math'
}); });
...@@ -48,6 +50,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges { ...@@ -48,6 +50,7 @@ export class MathInputComponent implements AfterViewInit, OnChanges {
setupMathfield(): void { setupMathfield(): void {
this.mathfieldRef.nativeElement.appendChild(this.mathFieldElement); this.mathfieldRef.nativeElement.appendChild(this.mathFieldElement);
this.mathFieldElement.value = this.value; this.mathFieldElement.value = this.value;
this.mathFieldElement.readOnly = this.readonly;
} }
static setupKeyboard(): Record<string, VirtualKeyboardDefinition> { static setupKeyboard(): Record<string, VirtualKeyboardDefinition> {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment