From 82e709a0e7f5db103d6d6630df18177b3e23f8d7 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Thu, 9 Sep 2021 12:10:24 +0200
Subject: [PATCH] Improve UX
In addition, the dialogue for managing the theme cloud was improved,
as the old format of the comment data was used there and bugs occurred.
[Ticket: #638][Ticket: #639]
---
.../_dialogs/deep-ldialog/deep-ldialog.component.ts | 4 +++-
.../quill-input-dialog/quill-input-dialog.component.html | 5 ++++-
.../quill-input-dialog/quill-input-dialog.component.ts | 8 ++++++--
.../_dialogs/spacy-dialog/spacy-dialog.component.ts | 4 +++-
.../topic-cloud-administration.component.scss | 9 +++++++--
.../topic-cloud-filter/topic-cloud-filter.component.ts | 4 +++-
.../topic-dialog-comment.component.ts | 2 ++
.../view-comment-data/view-comment-data.component.ts | 1 -
.../shared/write-comment/write-comment.component.ts | 2 +-
9 files changed, 29 insertions(+), 10 deletions(-)
diff --git a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts
index e04ccd81f..2ccabc979 100644
--- a/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts
+++ b/src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts
@@ -86,7 +86,9 @@ export class DeepLDialogComponent implements OnInit, AfterViewInit {
}
openHelp() {
- const ref = this.dialog.open(ExplanationDialogComponent);
+ const ref = this.dialog.open(ExplanationDialogComponent, {
+ autoFocus: false
+ });
ref.componentInstance.translateKey = 'explanation.deepl';
}
diff --git a/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.html b/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.html
index b5c9a25e2..591921b2b 100644
--- a/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.html
+++ b/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.html
@@ -4,10 +4,13 @@
<mat-label>{{'quill.tooltip-label-' + data.type | translate}}</mat-label>
<input type="text"
matInput
+ autofocus
placeholder="{{'quill.tooltip-placeholder-' + data.type | translate}}"
[(ngModel)]="value">
</mat-form-field>
- <app-custom-markdown [data]="getKatex()" *ngIf="data.type === 'formula'">
+ <app-custom-markdown [data]="getKatex()"
+ *ngIf="data.type === 'formula'"
+ [katexOptions]="katexOptions">
</app-custom-markdown>
</mat-dialog-content>
<app-dialog-action-buttons
diff --git a/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.ts b/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.ts
index 24ab8e0bc..208868b77 100644
--- a/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.ts
+++ b/src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.ts
@@ -1,6 +1,7 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import Delta from 'quill-delta';
+import { KatexOptions } from 'ngx-markdown';
interface DialogData {
type: string;
@@ -17,7 +18,10 @@ interface DialogData {
})
export class QuillInputDialogComponent implements OnInit {
- value: string;
+ value = '';
+ katexOptions: KatexOptions = {
+ throwOnError: false
+ };
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData,
private dialogRef: MatDialogRef<QuillInputDialogComponent>) {
@@ -38,7 +42,7 @@ export class QuillInputDialogComponent implements OnInit {
}
ngOnInit(): void {
- this.value = this.data.meta;
+ this.value = this.data.meta || '';
}
getKatex(): string {
diff --git a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts
index 390225ce2..d7dfa2988 100644
--- a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts
+++ b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts
@@ -158,7 +158,9 @@ export class SpacyDialogComponent implements OnInit, AfterContentInit {
}
openHelp() {
- const ref = this.dialog.open(ExplanationDialogComponent);
+ const ref = this.dialog.open(ExplanationDialogComponent, {
+ autoFocus: false
+ });
ref.componentInstance.translateKey = 'explanation.spacy';
}
}
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
index 86c644ce6..d2d701694 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
@@ -177,7 +177,12 @@ mat-dialog-content {
.reset {
margin: 25px auto auto auto;
- background-color: var(--secondary);
- color: black;
+ background-color: var(--primary);
+ color: var(--on-primary);
width: 100%;
+
+ &:focus {
+ background-color: var(--secondary);
+ color: var(--on-secondary);
+ }
}
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
index 1c0466365..b02423352 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
@@ -158,7 +158,9 @@ export class TopicCloudFilterComponent implements OnInit {
}
openHelp() {
- const ref = this.dialog.open(ExplanationDialogComponent);
+ const ref = this.dialog.open(ExplanationDialogComponent, {
+ autoFocus: false
+ });
ref.componentInstance.translateKey = 'explanation.topic-cloud';
}
diff --git a/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts
index 77b32abda..438c5192a 100644
--- a/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts
+++ b/src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts
@@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { Language } from '../../../../models/comment';
import { ProfanityFilterService } from '../../../../services/util/profanity-filter.service';
+import { ViewCommentDataComponent } from '../../view-comment-data/view-comment-data.component';
@Component({
selector: 'app-topic-dialog-comment',
@@ -49,6 +50,7 @@ export class TopicDialogCommentComponent implements OnInit {
if (!this.language) {
return;
}
+ this.question = ViewCommentDataComponent.getTextFromData(this.question);
this.questionWithoutProfanity = this.profanityFilterService.
filterProfanityWords(this.question, this.partialWords, this.languageSpecific, this.language);
this.partsWithoutProfanity = this.splitQuestion(this.questionWithoutProfanity);
diff --git a/src/app/components/shared/view-comment-data/view-comment-data.component.ts b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
index 1829bbc58..9098e0ddd 100644
--- a/src/app/components/shared/view-comment-data/view-comment-data.component.ts
+++ b/src/app/components/shared/view-comment-data/view-comment-data.component.ts
@@ -285,7 +285,6 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
if (!selection || !selection.length) {
return;
}
- meta = quill.getText(selection.index, selection.length);
}
this.dialog.open(QuillInputDialogComponent, {
width: '900px',
diff --git a/src/app/components/shared/write-comment/write-comment.component.ts b/src/app/components/shared/write-comment/write-comment.component.ts
index 5889eaef1..e0aaf9bd6 100644
--- a/src/app/components/shared/write-comment/write-comment.component.ts
+++ b/src/app/components/shared/write-comment/write-comment.component.ts
@@ -206,7 +206,7 @@ export class WriteCommentComponent implements OnInit {
result,
onClose
}
- });
+ }).afterClosed().subscribe(() => this.buildCreateCommentActionCallback()());
}, (_) => {
this.isSpellchecking = false;
onClose(body, text, this.commentData);
--
GitLab