Skip to content
Snippets Groups Projects
Commit 99778967 authored by rhenck's avatar rhenck
Browse files

[editor] Separate input-assistance props and add fieldset to UI

parent 0da73109
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 153 additions and 128 deletions
projects/editor/src/app/app.module.ts
+ 7
− 4
View file @ 99778967
......@@ -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,
......
projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
+ 4
− 0
View file @ 99778967
......@@ -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 })">
......
projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/input-assistance-properties.component.ts 0 → 100644
+ 142
− 0
View file @ 99778967
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 });
}
}
}
projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/text-field-element-properties.component.ts
+ 0
− 124
View file @ 99778967
......@@ -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 });
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Impressum | Datenschutzerklärung