diff --git a/projects/common/models/section.ts b/projects/common/models/section.ts index f44b565e62a10633acb36248e08d77930fa341bf..38364c590a781efff555f456278f5a11ce9d7b42 100644 --- a/projects/common/models/section.ts +++ b/projects/common/models/section.ts @@ -24,6 +24,7 @@ export class Section { gridRowSizes: { value: number; unit: string }[] = [{ value: 1, unit: 'fr' }]; visibilityDelay: number = 0; animatedVisibility: boolean = false; + enableReHide: boolean = false; visibilityRules: VisibilityRule[] = []; constructor(blueprint?: Record<string, any>) { @@ -37,6 +38,7 @@ export class Section { if (sanitizedBlueprint.gridRowSizes !== undefined) this.gridRowSizes = sanitizedBlueprint.gridRowSizes; if (sanitizedBlueprint.visibilityDelay) this.visibilityDelay = sanitizedBlueprint.visibilityDelay; if (sanitizedBlueprint.animatedVisibility) this.animatedVisibility = sanitizedBlueprint.animatedVisibility; + if (sanitizedBlueprint.enableReHide) this.enableReHide = sanitizedBlueprint.enableReHide; if (sanitizedBlueprint.visibilityRules) { this.visibilityRules = sanitizedBlueprint.visibilityRules .map(rule => new VisibilityRule(rule.id, rule.operator, rule.value)); diff --git a/projects/editor/src/app/components/canvas/section-menu.component.ts b/projects/editor/src/app/components/canvas/section-menu.component.ts index 930c767ae8fcff3bd77b55e3543227814899a025..8850043d8f4f9442a65128abae41b94ef5842b1a 100644 --- a/projects/editor/src/app/components/canvas/section-menu.component.ts +++ b/projects/editor/src/app/components/canvas/section-menu.component.ts @@ -325,13 +325,15 @@ export class SectionMenuComponent implements OnDestroy { this.section.visibilityRules, this.getControlIds(), this.section.visibilityDelay, - this.section.animatedVisibility + this.section.animatedVisibility, + this.section.enableReHide ) .subscribe(visibilityConfig => { if (visibilityConfig) { this.updateModel('visibilityRules', visibilityConfig.visibilityRules); this.updateModel('visibilityDelay', visibilityConfig.visibilityDelay); this.updateModel('animatedVisibility', visibilityConfig.animatedVisibility); + this.updateModel('enableReHide', visibilityConfig.enableReHide); } }); } diff --git a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html index c176af07e2e81644b2711af93306b451a3dc3709..7a185f742dc75d18ab98c5e319b372fd5f42b0ba 100644 --- a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html +++ b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html @@ -11,15 +11,22 @@ </div> <div *ngIf="visibilityRules.length" class="fx-row-start-stretch fx-gap-10"> - <mat-form-field > + <mat-checkbox + class="fixed-size-field" + [(ngModel)]="enableReHide"> + {{'section.enableReHide' | translate}} + </mat-checkbox> + <mat-form-field class="fixed-size-field"> <mat-label>{{'section.visibilityDelay' | translate}}</mat-label> <input matInput type="number" step="1000" + [disabled]="enableReHide" [placeholder]="'section.visibilityDelay' | translate" [(ngModel)]="visibilityDelay"> </mat-form-field> <mat-checkbox + [disabled]="enableReHide" [(ngModel)]="animatedVisibility"> {{'section.animatedVisibility' | translate}} </mat-checkbox> diff --git a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.scss b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..ff13cc771d52fc320ad16e9d58457687a36be7b8 --- /dev/null +++ b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.scss @@ -0,0 +1,4 @@ +.fixed-size-field { + width: 212px; + min-width: 212px; +} diff --git a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts index 4d2c5b9fae02f1c8d37f0eea4edbad5966998b52..4775b0725885aae0986d515169c4467ac224f306 100644 --- a/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts +++ b/projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.ts @@ -3,13 +3,15 @@ import { VisibilityRule } from 'common/models/visibility-rule'; import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ - templateUrl: './visibility-rules-dialog.component.html' + templateUrl: './visibility-rules-dialog.component.html', + styleUrls: ['./visibility-rules-dialog.component.scss'] }) export class VisibilityRulesDialogComponent { visibilityRules!: VisibilityRule[]; controlIds!: string[]; visibilityDelay!: number; animatedVisibility!: boolean; + enableReHide!: boolean; constructor( @Inject(MAT_DIALOG_DATA) private data: { @@ -17,11 +19,13 @@ export class VisibilityRulesDialogComponent { visibilityDelay: number, animatedVisibility: boolean, controlIds: string[], + enableReHide: boolean, } ) { this.visibilityRules = [...data.visibilityRules]; this.visibilityDelay = data.visibilityDelay; this.animatedVisibility = data.animatedVisibility; + this.enableReHide = data.enableReHide; this.controlIds = data.controlIds; } diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts index ca074e9b440f076237d3abda1d9ab27e2dd6a2ec..61c4eef6b36472349f14632d72f9f78b1e65c798 100644 --- a/projects/editor/src/app/services/dialog.service.ts +++ b/projects/editor/src/app/services/dialog.service.ts @@ -136,15 +136,22 @@ export class DialogService { showVisibilityRulesDialog(visibilityRules: VisibilityRule[], controlIds: string[], visibilityDelay: number, - animatedVisibility: boolean - ): Observable<{ visibilityRules: VisibilityRule[], visibilityDelay: number, animatedVisibility: boolean }> { + animatedVisibility: boolean, + enableReHide: boolean + ): Observable<{ + visibilityRules: VisibilityRule[], + visibilityDelay: number, + animatedVisibility: boolean, + enableReHide: boolean + }> { const dialogRef = this.dialog .open(VisibilityRulesDialogComponent, { data: { visibilityRules, controlIds, visibilityDelay, - animatedVisibility + animatedVisibility, + enableReHide }, autoFocus: false }); diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json index 71f1eb82fa0278bef84310172d325796ad72d4cf..f1b66395866c9d43db6d40a19e918a4977ec4001 100644 --- a/projects/editor/src/assets/i18n/de.json +++ b/projects/editor/src/assets/i18n/de.json @@ -39,6 +39,7 @@ "manageVisibilityRules": "Sichtbarkeit verwalten", "animatedVisibility": "Scrollen beim Anzeigen", "visibilityDelay": "Verzögerung der Anzeige", + "enableReHide": "Erneutes Ausblenden erlauben", "controlId": "Statusvariable/Element-ID", "operator": "Operator", "addElementsOrStateVariables": "Bitte zuerst Elemente oder Statusvariablen anlegen",