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]

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';
   }
 

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

src/app/components/shared/_dialogs/quill-input-dialog/quill-input-dialog.component.ts

 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 {

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';
   }
 }

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);
+  }
 }

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';
   }
 

src/app/components/shared/dialog/topic-dialog-comment/topic-dialog-comment.component.ts

 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);

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',

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);