From 9977896764475b5489dfaac35b2c0ae1defc01e5 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 15 May 2024 21:04:56 +0200
Subject: [PATCH] [editor] Separate input-assistance props and add fieldset to
UI
---
projects/editor/src/app/app.module.ts | 11 +-
.../element-model-properties.component.html | 4 +
.../input-assistance-properties.component.ts | 142 ++++++++++++++++++
...text-field-element-properties.component.ts | 124 ---------------
4 files changed, 153 insertions(+), 128 deletions(-)
create mode 100644 projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component.ts
diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index 57404f897..4bbd95dcb 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -39,14 +39,15 @@ import {
import {
StateVariableEditorComponent
} from 'editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component';
-import {
- ActionParamStateVariableComponent
-} from 'editor/src/app/components/properties-panel/model-properties-tab/input-groups/action-param-state-variable.component';
+import { ActionParamStateVariableComponent } from
+ 'editor/src/app/components/properties-panel/model-properties-tab/input-groups/action-param-state-variable.component';
import {
VisibilityRulesDialogComponent
} from 'editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatBadgeModule } from '@angular/material/badge';
+import { InputAssistancePropertiesComponent } from
+ 'editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component';
import {
TooltipPropertiesDialogComponent
} from 'editor/src/app/components/dialogs/tooltip-properties-dialog.component';
@@ -97,6 +98,7 @@ import { ElementModelPropertiesComponent } from
'./components/properties-panel/model-properties-tab/element-model-properties.component';
import { DynamicSectionHelperGridComponent } from './components/canvas/dynamic-section-helper-grid.component';
import { ElementGridChangeListenerDirective } from './components/canvas/element-grid-change-listener.directive';
+
import { OptionsFieldSetComponent } from
'./components/properties-panel/model-properties-tab/input-groups/options-field-set.component';
import { TextPropertiesFieldSetComponent } from
@@ -207,7 +209,8 @@ import {
SanitizationDialogComponent,
TooltipPropertiesDialogComponent,
GetValidAudioVideoIDsPipe,
- MathTablePropertiesComponent
+ MathTablePropertiesComponent,
+ InputAssistancePropertiesComponent
],
imports: [
BrowserModule,
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
index 367cdcf4c..3ade4a32a 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
@@ -169,6 +169,10 @@
(updateModel)="updateModel.emit($event)">
</aspect-text-field-element-properties>
+ <aspect-input-assistance-properties [combinedProperties]="combinedProperties"
+ (updateModel)="updateModel.emit($event)">
+ </aspect-input-assistance-properties>
+
<mat-checkbox *ngIf="combinedProperties.stickyHeader !== undefined"
[checked]="$any(combinedProperties.stickyHeader)"
(change)="updateModel.emit({ property: 'stickyHeader', value: $event.checked })">
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component.ts
new file mode 100644
index 000000000..a13810986
--- /dev/null
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component.ts
@@ -0,0 +1,142 @@
+import {
+ Component, EventEmitter, Input, Output
+} from '@angular/core';
+import { CombinedProperties } from 'editor/src/app/components/properties-panel/element-properties-panel.component';
+
+@Component({
+ selector: 'aspect-input-assistance-properties',
+ template: `
+ <fieldset *ngIf="combinedProperties.showSoftwareKeyboard !== undefined" class="fx-column-start-stretch">
+ <legend>Eingabehilfe</legend>
+ <mat-checkbox [checked]="$any(combinedProperties.showSoftwareKeyboard)"
+ (change)="updateShowSoftwareKeyboard($event.checked)">
+ {{'propertiesPanel.showSoftwareKeyboard' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [disabled]="!combinedProperties.inputAssistancePreset ||
+ (!!combinedProperties.inputAssistancePreset && !!combinedProperties.showSoftwareKeyboard)"
+ [checked]="$any(combinedProperties.hideNativeKeyboard)"
+ (change)="updateModel.emit({ property: 'hideNativeKeyboard', value: $event.checked })">
+ {{'propertiesPanel.hideNativeKeyboard' | translate }}
+ </mat-checkbox>
+ <mat-checkbox [disabled]="!combinedProperties.showSoftwareKeyboard"
+ [checked]="$any(combinedProperties.addInputAssistanceToKeyboard)"
+ (change)="updateModel.emit({ property: 'addInputAssistanceToKeyboard', value: $event.checked })">
+ {{'propertiesPanel.addInputAssistanceToKeyboard' | translate }}
+ </mat-checkbox>
+
+ <mat-form-field appearance="fill"
+ class="wide-form-field">
+ <mat-label>{{'propertiesPanel.inputAssistance' | translate }}</mat-label>
+ <mat-select [value]="combinedProperties.inputAssistancePreset"
+ (selectionChange)="updateInputAssistancePreset($event.value)">
+ <ng-container *ngIf="combinedProperties.type !== 'math-table'">
+ <mat-option *ngFor="let option of [null, 'french', 'numbers', 'numbersAndOperators',
+ 'numbersAndBasicOperators', 'comparisonOperators', 'squareDashDot',
+ 'placeValue', 'space', 'comma', 'custom']"
+ [value]="option">
+ {{ option === null ? ('propertiesPanel.none' | translate) : ('propertiesPanel.' + option | translate) }}
+ </mat-option>
+ </ng-container>
+ <ng-container *ngIf="combinedProperties.type === 'math-table'">
+ <mat-option *ngFor="let option of [null, 'numbers', 'numbersAndBasicOperators', 'numbersAndOperators']"
+ [value]="option">
+ {{ option === null ? ('propertiesPanel.none' | translate) : ('propertiesPanel.' + option | translate) }}
+ </mat-option>
+ </ng-container>
+ </mat-select>
+ </mat-form-field>
+
+ <mat-form-field *ngIf="combinedProperties.inputAssistancePreset === 'custom'"
+ class="wide-form-field" appearance="fill">
+ <mat-label>{{'propertiesPanel.inputAssistanceCustomKeys' | translate }}</mat-label>
+ <input matInput type="text"
+ [value]="$any(combinedProperties.inputAssistanceCustomKeys)"
+ (input)="updateModel.emit({ property: 'inputAssistanceCustomKeys', value: $any($event.target).value })">
+ </mat-form-field>
+
+ <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.inputAssistancePosition !== undefined"
+ appearance="fill">
+ <mat-label>{{'propertiesPanel.inputAssistancePosition' | translate }}</mat-label>
+ <mat-select [value]="combinedProperties.inputAssistancePosition"
+ (selectionChange)="updateModel.emit({ property: 'inputAssistancePosition', value: $event.value })">
+ <mat-option *ngFor="let option of ['floating', 'right']"
+ [value]="option">
+ {{ 'propertiesPanel.' + option | translate }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.inputAssistancePosition === 'floating'"
+ appearance="fill">
+ <mat-label>{{'propertiesPanel.inputAssistanceFloatingStartPosition' | translate }}</mat-label>
+ <mat-select [value]="combinedProperties.inputAssistanceFloatingStartPosition"
+ (selectionChange)="updateModel.emit({
+ property: 'inputAssistanceFloatingStartPosition',
+ value: $event.value
+ })">
+ <mat-option *ngFor="let option of ['startBottom', 'endCenter']"
+ [value]="option">
+ {{ 'propertiesPanel.' + option | translate }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.restrictedToInputAssistanceChars !== undefined"
+ [checked]="$any(combinedProperties.restrictedToInputAssistanceChars)"
+ (change)="updateModel.emit({ property: 'restrictedToInputAssistanceChars', value: $event.checked })">
+ {{'propertiesPanel.restrictedToInputAssistanceChars' | translate }}
+ </mat-checkbox>
+
+ <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.hasArrowKeys !== undefined"
+ [checked]="$any(combinedProperties.hasArrowKeys)"
+ (change)="updateModel.emit({ property: 'hasArrowKeys', value: $event.checked })">
+ {{'propertiesPanel.hasArrowKeys' | translate }}
+ </mat-checkbox>
+
+ <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.hasBackspaceKey !== undefined"
+ [disabled]="combinedProperties.inputAssistancePreset !== 'custom'"
+ [checked]="combinedProperties.inputAssistancePreset === 'custom' ?
+ $any(combinedProperties.hasBackspaceKey) :
+ combinedProperties.inputAssistancePreset !== 'french'"
+ (change)="updateModel.emit({ property: 'hasBackspaceKey', value: $event.checked })">
+ {{'propertiesPanel.hasBackspaceKey' | translate }}
+ </mat-checkbox>
+
+ <mat-checkbox *ngIf="combinedProperties.type === 'text-area' && combinedProperties.inputAssistancePreset !== null &&
+ combinedProperties.hasReturnKey !== undefined"
+ [checked]="$any(combinedProperties.hasReturnKey)"
+ (change)="updateModel.emit({ property: 'hasReturnKey', value: $event.checked })">
+ {{'propertiesPanel.hasReturnKey' | translate }}
+ </mat-checkbox>
+ </fieldset>
+ `
+})
+
+export class InputAssistancePropertiesComponent {
+ @Input() combinedProperties!: CombinedProperties;
+ @Output() updateModel = new EventEmitter<{
+ property: string;
+ value: string | number | boolean | string[] | null;
+ isInputValid?: boolean | null;
+ }>();
+
+ updateInputAssistancePreset(inputAssistancePreset: string | null): void {
+ this.updateModel.emit({ property: 'inputAssistancePreset', value: inputAssistancePreset });
+ if (!inputAssistancePreset && !this.combinedProperties.showSoftwareKeyboard) {
+ this.updateModel.emit({ property: 'hideNativeKeyboard', value: false });
+ }
+ }
+
+ updateShowSoftwareKeyboard(showSoftwareKeyboard: boolean): void {
+ this.updateModel.emit({ property: 'showSoftwareKeyboard', value: showSoftwareKeyboard });
+ if (showSoftwareKeyboard) {
+ this.updateModel.emit({ property: 'hideNativeKeyboard', value: true });
+ } else if (!this.combinedProperties.inputAssistancePreset) {
+ this.updateModel.emit({ property: 'hideNativeKeyboard', value: false });
+ }
+ }
+}
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
index 875ca850b..6d8151573 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
@@ -89,114 +89,6 @@ import { CombinedProperties } from 'editor/src/app/components/properties-panel/e
(change)="updateModel.emit({ property: 'hasKeyboardIcon', value: $event.checked })">
{{'propertiesPanel.hasKeyboardIcon' | translate }}
</mat-checkbox>
-
- <mat-checkbox *ngIf="combinedProperties.showSoftwareKeyboard !== undefined"
- [checked]="$any(combinedProperties.showSoftwareKeyboard)"
- (change)="updateShowSoftwareKeyboard($event.checked)">
- {{'propertiesPanel.showSoftwareKeyboard' | translate }}
- </mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.hideNativeKeyboard !== undefined"
- [disabled]="!combinedProperties.inputAssistancePreset ||
- (!!combinedProperties.inputAssistancePreset && !!combinedProperties.showSoftwareKeyboard)"
- [checked]="$any(combinedProperties.hideNativeKeyboard)"
- (change)="updateModel.emit({ property: 'hideNativeKeyboard', value: $event.checked })">
- {{'propertiesPanel.hideNativeKeyboard' | translate }}
- </mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.showSoftwareKeyboard !== undefined"
- [disabled]="!combinedProperties.showSoftwareKeyboard"
- [checked]="$any(combinedProperties.addInputAssistanceToKeyboard)"
- (change)="updateModel.emit({ property: 'addInputAssistanceToKeyboard', value: $event.checked })">
- {{'propertiesPanel.addInputAssistanceToKeyboard' | translate }}
- </mat-checkbox>
-
- <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== undefined" appearance="fill"
- class="wide-form-field">
- <mat-label>{{'propertiesPanel.inputAssistance' | translate }}</mat-label>
- <mat-select [value]="combinedProperties.inputAssistancePreset"
- (selectionChange)="updateInputAssistancePreset($event.value)">
- <ng-container *ngIf="combinedProperties.type !== 'math-table'">
- <mat-option *ngFor="let option of [null, 'french', 'numbers', 'numbersAndOperators',
- 'numbersAndBasicOperators', 'comparisonOperators', 'squareDashDot',
- 'placeValue', 'space', 'comma', 'custom']"
- [value]="option">
- {{ option === null ? ('propertiesPanel.none' | translate) : ('propertiesPanel.' + option | translate) }}
- </mat-option>
- </ng-container>
- <ng-container *ngIf="combinedProperties.type === 'math-table'">
- <mat-option *ngFor="let option of [null, 'numbers', 'numbersAndBasicOperators', 'numbersAndOperators']"
- [value]="option">
- {{ option === null ? ('propertiesPanel.none' | translate) : ('propertiesPanel.' + option | translate) }}
- </mat-option>
- </ng-container>
- </mat-select>
- </mat-form-field>
-
- <mat-form-field *ngIf="combinedProperties.inputAssistancePreset === 'custom'"
- class="wide-form-field" appearance="fill">
- <mat-label>{{'propertiesPanel.inputAssistanceCustomKeys' | translate }}</mat-label>
- <input matInput type="text"
- [value]="$any(combinedProperties.inputAssistanceCustomKeys)"
- (input)="updateModel.emit({ property: 'inputAssistanceCustomKeys', value: $any($event.target).value })">
- </mat-form-field>
-
- <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.inputAssistancePosition !== undefined"
- appearance="fill">
- <mat-label>{{'propertiesPanel.inputAssistancePosition' | translate }}</mat-label>
- <mat-select [value]="combinedProperties.inputAssistancePosition"
- (selectionChange)="updateModel.emit({ property: 'inputAssistancePosition', value: $event.value })">
- <mat-option *ngFor="let option of ['floating', 'right']"
- [value]="option">
- {{ 'propertiesPanel.' + option | translate }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- <mat-form-field *ngIf="combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.inputAssistancePosition === 'floating'"
- appearance="fill">
- <mat-label>{{'propertiesPanel.inputAssistanceFloatingStartPosition' | translate }}</mat-label>
- <mat-select [value]="combinedProperties.inputAssistanceFloatingStartPosition"
- (selectionChange)="updateModel.emit({
- property: 'inputAssistanceFloatingStartPosition',
- value: $event.value
- })">
- <mat-option *ngFor="let option of ['startBottom', 'endCenter']"
- [value]="option">
- {{ 'propertiesPanel.' + option | translate }}
- </mat-option>
- </mat-select>
- </mat-form-field>
-
- <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.restrictedToInputAssistanceChars !== undefined"
- [checked]="$any(combinedProperties.restrictedToInputAssistanceChars)"
- (change)="updateModel.emit({ property: 'restrictedToInputAssistanceChars', value: $event.checked })">
- {{'propertiesPanel.restrictedToInputAssistanceChars' | translate }}
- </mat-checkbox>
-
- <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.hasArrowKeys !== undefined"
- [checked]="$any(combinedProperties.hasArrowKeys)"
- (change)="updateModel.emit({ property: 'hasArrowKeys', value: $event.checked })">
- {{'propertiesPanel.hasArrowKeys' | translate }}
- </mat-checkbox>
-
- <mat-checkbox *ngIf="combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.hasBackspaceKey !== undefined"
- [disabled]="combinedProperties.inputAssistancePreset !== 'custom'"
- [checked]="combinedProperties.inputAssistancePreset === 'custom' ?
- $any(combinedProperties.hasBackspaceKey) :
- combinedProperties.inputAssistancePreset !== 'french'"
- (change)="updateModel.emit({ property: 'hasBackspaceKey', value: $event.checked })">
- {{'propertiesPanel.hasBackspaceKey' | translate }}
- </mat-checkbox>
-
- <mat-checkbox *ngIf="combinedProperties.type === 'text-area' && combinedProperties.inputAssistancePreset !== null &&
- combinedProperties.hasReturnKey !== undefined"
- [checked]="$any(combinedProperties.hasReturnKey)"
- (change)="updateModel.emit({ property: 'hasReturnKey', value: $event.checked })">
- {{'propertiesPanel.hasReturnKey' | translate }}
- </mat-checkbox>
`
})
@@ -207,20 +99,4 @@ export class TextFieldElementPropertiesComponent {
value: string | number | boolean | string[] | null;
isInputValid?: boolean | null;
}>();
-
- updateInputAssistancePreset(inputAssistancePreset: string | null): void {
- this.updateModel.emit({ property: 'inputAssistancePreset', value: inputAssistancePreset });
- if (!inputAssistancePreset && !this.combinedProperties.showSoftwareKeyboard) {
- this.updateModel.emit({ property: 'hideNativeKeyboard', value: false });
- }
- }
-
- updateShowSoftwareKeyboard(showSoftwareKeyboard: boolean): void {
- this.updateModel.emit({ property: 'showSoftwareKeyboard', value: showSoftwareKeyboard });
- if (showSoftwareKeyboard) {
- this.updateModel.emit({ property: 'hideNativeKeyboard', value: true });
- } else if (!this.combinedProperties.inputAssistancePreset) {
- this.updateModel.emit({ property: 'hideNativeKeyboard', value: false });
- }
- }
}
--
GitLab