From d00010eefc8e303346ffe447515edab821c9d28c Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 18 Jan 2022 13:55:21 +0100
Subject: [PATCH] [editor] Pass page width to editor dialog
This way the dialog does not grow too wide, when lots of text is
entered. There could be a lot more logic here to calculate exactly how
big the window should be, but that seems like overengineering right now.
---
.../editor/src/app/services/dialog.service.ts | 16 +++++++++++-----
projects/editor/src/app/services/unit.service.ts | 9 +++++++--
2 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index 6ad291ec2..fca4710e4 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -49,18 +49,24 @@ export class DialogService {
return dialogRef.afterClosed();
}
- showRichTextEditDialog(text: string, defaultFontSize: number): Observable<string> {
+ showRichTextEditDialog(text: string, defaultFontSize: number, width: number): Observable<string> {
const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
- data: { content: text, defaultFontSize },
- autoFocus: false
+ data: {
+ content: text,
+ defaultFontSize,
+ clozeMode: false
+ },
+ autoFocus: false,
+ width: `${width}px`
});
return dialogRef.afterClosed();
}
- showClozeTextEditDialog(document: ClozeDocument, defaultFontSize: number): Observable<string> {
+ showClozeTextEditDialog(document: ClozeDocument, defaultFontSize: number, width: number): Observable<string> {
const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
data: { content: document, defaultFontSize, clozeMode: true },
- autoFocus: false
+ autoFocus: false,
+ width: `${width}px`
});
return dialogRef.afterClosed();
}
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index 7648242f5..531ed0ed9 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -419,7 +419,10 @@ export class UnitService {
break;
case 'text':
this.dialogService.showRichTextEditDialog(
- (element as TextElement).text, (element as TextElement).fontProps.fontSize as number
+ (element as TextElement).text,
+ (element as TextElement).fontProps.fontSize as number,
+ this.unit.pages[this.selectionService.selectedPageIndex].maxWidth -
+ this.unit.pages[this.selectionService.selectedPageIndex].margin
).subscribe((result: string) => {
if (result) {
// TODO add proper sanitization
@@ -434,7 +437,9 @@ export class UnitService {
case 'cloze':
this.dialogService.showClozeTextEditDialog(
element.document,
- (element as ClozeElement).fontProps.fontSize as number
+ (element as ClozeElement).fontProps.fontSize as number,
+ this.unit.pages[this.selectionService.selectedPageIndex].maxWidth -
+ this.unit.pages[this.selectionService.selectedPageIndex].margin
).subscribe((result: string) => {
if (result) {
// TODO add proper sanitization
--
GitLab