From 8f0f8a65e2e13e481b8b72945446d5d855dafaa0 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 26 Jun 2023 09:39:30 +0200
Subject: [PATCH] [editor] Add enableReHide to section
---
projects/common/models/section.ts | 2 ++
.../app/components/canvas/section-menu.component.ts | 4 +++-
.../visibility-rules-dialog.component.html | 9 ++++++++-
.../visibility-rules-dialog.component.scss | 4 ++++
.../visibility-rules-dialog.component.ts | 6 +++++-
projects/editor/src/app/services/dialog.service.ts | 13 ++++++++++---
projects/editor/src/assets/i18n/de.json | 1 +
7 files changed, 33 insertions(+), 6 deletions(-)
create mode 100644 projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.scss
diff --git a/projects/common/models/section.ts b/projects/common/models/section.ts
index f44b565e6..38364c590 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 930c767ae..8850043d8 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 c176af07e..7a185f742 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 000000000..ff13cc771
--- /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 4d2c5b9fa..4775b0725 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 ca074e9b4..61c4eef6b 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 71f1eb82f..f1b663958 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",
--
GitLab