From a5f8ec5e00d3b1032d62b7b5fb5fc28e99459a2a Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 28 May 2024 19:43:14 +0200
Subject: [PATCH] [editor] Refactor section-insert dialog
Visual overhaul and another way of inserting a section. The section code
is saved to a global variable which can be used as well. Does obviously
not work accress edit sessions or different units, therefore the old way
is preserved.
---
.../canvas/section-menu.component.ts | 7 ++-
.../section-insert-dialog.component.ts | 63 +++++++++++++------
.../services/unit-services/unit.service.ts | 1 +
3 files changed, 51 insertions(+), 20 deletions(-)
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 4a904ea5c..3155ba6d6 100644
--- a/projects/editor/src/app/components/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/canvas/section-menu.component.ts
@@ -135,7 +135,7 @@ import { SectionService } from 'editor/src/app/services/unit-services/section.se
</mat-menu>
<button mat-mini-fab [matTooltip]="'Abschnitt kopieren'" [matTooltipPosition]="'left'"
- (click)="copySectionToClipboard()">
+ (click)="copySection()">
<mat-icon>content_copy</mat-icon>
</button>
<button mat-mini-fab
@@ -264,6 +264,11 @@ export class SectionMenuComponent implements OnDestroy {
this.ngUnsubscribe.complete();
}
+ copySection() {
+ this.copySectionToClipboard();
+ this.unitService.savedSectionCode = JSON.stringify(this.section);
+ }
+
copySectionToClipboard() {
this.clipboard.copy(JSON.stringify(this.section));
this.messageService.showSuccess('Abschnitt in Zwischenablage kopiert');
diff --git a/projects/editor/src/app/components/dialogs/section-insert-dialog.component.ts b/projects/editor/src/app/components/dialogs/section-insert-dialog.component.ts
index 5ac2431fe..e21c07e7f 100644
--- a/projects/editor/src/app/components/dialogs/section-insert-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/section-insert-dialog.component.ts
@@ -1,27 +1,41 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
import { Section } from 'common/models/section';
-import { MessageService } from 'common/services/message.service';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Subject } from 'rxjs';
import { UIElement } from 'common/models/elements/element';
import { TranslateService } from '@ngx-translate/core';
import { IDService } from 'editor/src/app/services/id.service';
+import { UnitService } from 'editor/src/app/services/unit-services/unit.service';
@Component({
- selector: 'app-section-insert-dialog',
template: `
+ <h2 mat-dialog-title>Seitenabschnitt einfügen</h2>
<mat-dialog-content>
- <div (mouseenter)="hovered = true;" (mouseleave)="hovered = false;">
- <div class="paste-area" contenteditable="true" *ngIf="isPastedTextPresent === false"
- (paste)="pasteSectionFromClipboard($event)">
- </div>
- <div *ngIf="!hovered || isPastedTextPresent" class="message-area" [style.background-color]="operationStatus">
+ <mat-radio-group [style]="'display: flex; flex-direction: column'"
+ [(ngModel)]="selectedMethod">
+ <mat-radio-button value="savedCode" [disabled]="!savedSectionCode">
+ Gespeicherten Abschnitt einfügen
+ </mat-radio-button>
+ <p *ngIf="savedSectionCode" class="radio-child-item" [style.color]="'green'">
+ Gespeicherter Abschnitt gefunden.
+ </p>
+ <p *ngIf="!savedSectionCode" class="radio-child-item" [style.color]="'var(--warn)'">
+ Kein gespeicherter Abschnitt gefunden.
+ </p>
+ <mat-radio-button value="pastedCode">
+ Abschnitt über Zwischenablage einfügen
+ </mat-radio-button>
+ <div class="radio-child-item message-area" [style.color]="operationStatus">
{{operationStatusText}}
</div>
- </div>
+ <div class="radio-child-item paste-area" contenteditable="true"
+ (click)="selectedMethod = 'pastedCode'"
+ (paste)="pasteSectionFromClipboard($event)">
+ </div>
+ </mat-radio-group>
</mat-dialog-content>
<mat-dialog-actions>
- <button mat-button *ngIf="operationStatus === 'green' || operationStatus === 'yellow'"
+ <button mat-button *ngIf="selectedMethod == 'savedCode' || operationStatus === 'green' || operationStatus === 'orange'"
[mat-dialog-close]="newSection">
{{'confirm' | translate }}
</button>
@@ -29,26 +43,37 @@ import { IDService } from 'editor/src/app/services/id.service';
</mat-dialog-actions>
`,
styles: [
- '.mat-mdc-dialog-content {width: 448px; height: 240px;}',
- '.paste-area {position: absolute; width: 400px; height: 200px; border: 1px solid; overflow: hidden}',
- '.message-area {position: absolute; width: 400px; height: 200px; text-align: center; font-size: large;}'
+ '.paste-area {width: 250px; height: 60px; border: 1px solid; overflow: hidden}',
+ '.radio-child-item {margin-left: 35px; font-size: smaller;}',
+ ':host ::ng-deep mat-radio-button .mdc-label {font-size: larger;}'
]
})
-export class SectionInsertDialogComponent {
+export class SectionInsertDialogComponent implements OnInit {
private ngUnsubscribe = new Subject<void>();
- operationStatus: 'red' | 'yellow' | 'green' | 'none' = 'none';
- operationStatusText: string = this.translateService.instant('Bitte kopierten Abschnitt einfügen');
- hovered = false;
+ operationStatus: 'red' | 'orange' | 'green' | 'none' = 'none';
+ operationStatusText: string = 'Kopierten Abschnitt einfügen:';
isPastedTextPresent = false;
newSection: Section | null = null;
+ savedSectionCode: string | undefined;
+ selectedMethod: 'savedCode' | 'pastedCode' = 'pastedCode';
+
constructor(@Inject(MAT_DIALOG_DATA) public data: { existingSection: Section },
- private messageService: MessageService,
+ private unitService: UnitService,
private idManager: IDService,
private translateService: TranslateService) { }
+ ngOnInit(): void {
+ if (this.unitService.savedSectionCode) {
+ this.savedSectionCode = this.unitService.savedSectionCode;
+ this.selectedMethod = 'savedCode';
+ this.newSection = new Section(JSON.parse(this.unitService.savedSectionCode));
+ }
+ }
+
pasteSectionFromClipboard(event: ClipboardEvent): void {
+ event.preventDefault();
this.isPastedTextPresent = true;
const pastedText = event.clipboardData?.getData('Text');
if (!pastedText) {
@@ -61,7 +86,7 @@ export class SectionInsertDialogComponent {
if (this.findElementsWithDuplicateID(this.newSection.getAllElements()).length > 0) {
this.operationStatusText =
this.translateService.instant('Doppelte IDs festgestellt. Weiter mit neu generierten IDs?');
- this.operationStatus = 'yellow';
+ this.operationStatus = 'orange';
} else {
this.operationStatusText = this.translateService.instant('Abschnitt wurde erfolgreich gelesen.');
this.operationStatus = 'green';
diff --git a/projects/editor/src/app/services/unit-services/unit.service.ts b/projects/editor/src/app/services/unit-services/unit.service.ts
index 889d923b6..ee96e07e2 100644
--- a/projects/editor/src/app/services/unit-services/unit.service.ts
+++ b/projects/editor/src/app/services/unit-services/unit.service.ts
@@ -27,6 +27,7 @@ export class UnitService {
geometryElementPropertyUpdated: Subject<string> = new Subject<string>();
mathTableElementPropertyUpdated: Subject<string> = new Subject<string>();
referenceManager: ReferenceManager;
+ savedSectionCode: string | undefined;
constructor(private selectionService: SelectionService,
private veronaApiService: VeronaAPIService,
--
GitLab