Fix UI / UX bugs

Some UI bugs were discovered during a meeting, this is
a recommendation / example for new colors and fixing the bugs.

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -4,7 +4,7 @@
      fxFill>
   <div fxLayout="row"
        fxLayoutAlign="center">
-    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
     <mat-card *ngIf="room">
       <div fxLayout="row">
         <span class="fill-remaining-space"></span>

src/app/components/creator/room-creator-page/room-creator-page.component.scss

@@ -143,7 +143,3 @@ markdown {
   background: var(--secondary);
   color: var(--on-secondary);
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/moderator/room-moderator-page/room-moderator-page.component.html

@@ -4,7 +4,7 @@
      fxFill>
   <div fxLayout="row"
        fxLayoutAlign="center">
-    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
     <mat-card *ngIf="room">
       <div fxLayout="row">
         <span class="fill-remaining-space"></span>

src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss

@@ -147,7 +147,3 @@ markdown {
   color: var(--on-surface);
   margin: 0 3% 0 3% !important;
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/participant/room-participant-page/room-participant-page.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
-    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+    <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
     <mat-card *ngIf="room">
       <div fxLayout="row">
         <span class="fill-remaining-space"></span>

src/app/components/participant/room-participant-page/room-participant-page.component.scss

@@ -103,7 +103,3 @@ markdown {
   color: var(--on-surface);
   margin: 0 3% 0 3% !important;
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss

@@ -173,8 +173,8 @@ mat-icon {
   margin-right: auto;
 }
 
-::ng-deep.mat-drawer-backdrop.mat-drawer-shown {
-  display: none;
+::ng-deep .mat-drawer-backdrop {
+  opacity: 0;
 }
 
 ::ng-deep.mat-slider-track-background {

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts

@@ -4,6 +4,7 @@ import { TagCloudComponent } from '../../tag-cloud/tag-cloud.component';
 import { WeightClass } from './weight-class.interface';
 import { TagCloudMetaDataCount } from '../../../../services/util/tag-cloud-data.service';
 import { CloudParameters, CloudTextStyle } from '../../../../utils/cloud-parameters';
+import { AppComponent } from '../../../../app.component';
 
 @Component({
   selector: 'app-cloud-configuration',
@@ -26,7 +27,7 @@ export class CloudConfigurationComponent implements OnInit {
   alphabeticalSorting: boolean;
   rotation: number;
   highestWeight: number;
-  step:number = 10;
+  step: number = 10;
   weightClasses: WeightClass[] = [
     {
       maxTagNumber: 20,
@@ -99,18 +100,19 @@ export class CloudConfigurationComponent implements OnInit {
       allowManualTagNumber: false
     },
   ];
-  MinFont:number;
-  MaxFont:number;
+  MinFont: number;
+  MaxFont: number;
 
   isTestCloud = false;
 
-  constructor(private translateService: TranslateService) { }
+  constructor(private translateService: TranslateService) {
+  }
 
   ngOnInit() {
     this.translateService.use(localStorage.getItem('currentLang'));
     this.cloudParameters = new CloudParameters(this.parent.currentCloudParameters);
     this.defaultCloudParameters = new CloudParameters(this.parent.currentCloudParameters);
-    this.parent.dataManager.getMetaData().subscribe((value)=>{
+    this.parent.dataManager.getMetaData().subscribe((value) => {
       if (!value) {
         return;
       }
@@ -141,20 +143,20 @@ export class CloudConfigurationComponent implements OnInit {
 
   parseArrayToJsonWeightClasses() {
     this.cloudParameters.cloudWeightSettings.forEach((element, i) => {
-       this.weightClasses[i].tagColor = element.color;
-       this.weightClasses[i].actualTagNumber = this.countPerWeight[i];
-       this.weightClasses[i].rotationAngle = element.rotation;
-       this.weightClasses[i].maxTagNumber = (element.maxVisibleElements == -1 || element.maxVisibleElements == 0) ? this.weightClasses[i].actualTagNumber : element.maxVisibleElements;
-       this.weightClasses[i].allowManualTagNumber = element.allowManualTagNumber;
+      this.weightClasses[i].tagColor = element.color;
+      this.weightClasses[i].actualTagNumber = this.countPerWeight[i];
+      this.weightClasses[i].rotationAngle = element.rotation;
+      this.weightClasses[i].maxTagNumber = (element.maxVisibleElements == -1 || element.maxVisibleElements == 0) ? this.weightClasses[i].actualTagNumber : element.maxVisibleElements;
+      this.weightClasses[i].allowManualTagNumber = element.allowManualTagNumber;
     });
   }
 
   parseJsonToArrayWeightClasses() {
     this.weightClasses.forEach((element, i) => {
       this.cloudParameters.cloudWeightSettings[i].allowManualTagNumber = element.allowManualTagNumber;
-      if(element.allowManualTagNumber == true){
+      if (element.allowManualTagNumber == true) {
         this.cloudParameters.cloudWeightSettings[i].maxVisibleElements = element.maxTagNumber == 0 ? -1 : element.maxTagNumber;
-      }else{
+      } else {
         this.cloudParameters.cloudWeightSettings[i].maxVisibleElements = -1;
       }
       this.cloudParameters.cloudWeightSettings[i].color = element.tagColor;
@@ -167,22 +169,35 @@ export class CloudConfigurationComponent implements OnInit {
     this.parent.setCloudParameters(this.cloudParameters, false);
   }
 
-  cancel() {
+  closePanel() {
     this.parent.tagCloudDataManager.demoActive = false;
+    this.parent.drawer.close();
+    this.readMaxFont();
+    const defaultScale = AppComponent.rescale.getInitialScale();
+    if (defaultScale !== 1) {
+      AppComponent.rescale.setDefaultScale(defaultScale);
+      this.parent.updateTagCloud();
+    }
+  }
+
+  openPanel() {
+    if (AppComponent.rescale.getInitialScale() !== 1) {
+      AppComponent.rescale.setDefaultScale(1);
+    }
+  }
+
+  cancel() {
     this.parent.setCloudParameters(this.defaultCloudParameters);
     this.cloudParameters = new CloudParameters(this.defaultCloudParameters);
-    this.parent.configurationOpen = false;
     this.setStep(0);
-    this.readMaxFont();
+    this.closePanel();
   }
 
   save() {
-    this.parent.tagCloudDataManager.demoActive = false;
     this.parent.setCloudParameters(this.cloudParameters);
     this.defaultCloudParameters = new CloudParameters(this.cloudParameters);
-    this.parent.configurationOpen = false;
     this.setStep(0);
-    this.readMaxFont();
+    this.closePanel();
   }
 
   toggleExtendedView() {
@@ -217,19 +232,19 @@ export class CloudConfigurationComponent implements OnInit {
     this.step--;
   }
 
-  reset(){
+  reset() {
     this.parent.resetColorsToTheme();
-    this.parent.configurationOpen = false;
     this.cloudParameters = new CloudParameters(this.parent.currentCloudParameters);
     this.defaultCloudParameters = new CloudParameters(this.parent.currentCloudParameters);
-    this.readMaxFont();
+    this.closePanel();
   }
 
-  italicChecked(event){
+  italicChecked(event) {
     this.cloudParameters.fontStyle = event.checked === true ? 'italic' : 'normal';
     this.valueChanged();
   }
-  boldChecked(event){
+
+  boldChecked(event) {
     this.cloudParameters.fontWeight = event.checked === true ? 'bold' : 'normal';
     this.valueChanged();
   }
@@ -238,20 +253,20 @@ export class CloudConfigurationComponent implements OnInit {
     return this.cloudParameters.fontWeight === 'bold';
   }
 
-  readMaxFont(){
-    let valMax:number = this.cloudParameters.fontSizeMax;
-    let valMin:number = this.cloudParameters.fontSizeMin;
-    this.MaxFont = Math.floor(valMax/valMin);
+  readMaxFont() {
+    let valMax: number = this.cloudParameters.fontSizeMax;
+    let valMin: number = this.cloudParameters.fontSizeMin;
+    this.MaxFont = Math.floor(valMax / valMin);
   }
 
-  calcMaxFont(event,setMin:Boolean){
-    let val:number = Number(event.target.value);
-    if(val >0 && val <=10 && !setMin){
+  calcMaxFont(event, setMin: Boolean) {
+    let val: number = Number(event.target.value);
+    if (val > 0 && val <= 10 && !setMin) {
       this.cloudParameters.fontSizeMax = this.cloudParameters.fontSizeMin * val;
       this.MaxFont = val;
       this.valueChanged();
     }
-    if(setMin){
+    if (setMin) {
       this.cloudParameters.fontSizeMax = this.cloudParameters.fontSizeMin * this.MaxFont;
       this.valueChanged();
     }

src/app/components/shared/_dialogs/create-comment/create-comment.component.html

@@ -125,10 +125,7 @@
         {{ 'comment-page.grammar-check' | translate}}
         <mat-icon *ngIf="grammarChecker.isSpellchecking"
                   class="spinner-container">
-          <app-mat-spinner-overlay diameter="20"
-                                   strokeWidth="2"
-                                   [useCustomCSSColor]="true">
-          </app-mat-spinner-overlay>
+          <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
         </mat-icon>
       </button>
     </ars-col>

src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.html

@@ -24,7 +24,7 @@
     </span>
     <ars-row class="list-container">
       <div fxLayout="row" fxLayoutAlign="center center" fxFill>
-        <app-mat-spinner-overlay *ngIf="isLoading" useCustomCSSColor="true"></app-mat-spinner-overlay>
+        <app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>
       </div>
       <mat-list dense class="keywords-list">
         <mat-list-item  *ngFor="let keyword of keywords; let odd = odd; let even = even; let i = index"

src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.scss

@@ -138,7 +138,3 @@
 .mat-option {
   color: var(--on-surface);
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html

 <mat-dialog-content>
   <div fxLayout="row" fxLayoutAlign="center center" fxFill>
-    <app-mat-spinner-overlay *ngIf="isLoading" [useCustomCSSColor]="true"></app-mat-spinner-overlay>
+    <app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>
   </div>
   <div *ngIf="!isLoading">
     <mat-accordion hideToggle>

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss

@@ -181,7 +181,3 @@ mat-dialog-content {
   color: black;
   width: 100%;
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html

@@ -67,6 +67,7 @@
              autofocus
              autocomplete="off"
              type="text"
+             (keyup)="checkForEnter($event)"
              [(ngModel)]="question">
       <button *ngIf="question"
               matSuffix

src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts

@@ -143,9 +143,7 @@ export class TopicCloudFilterComponent implements OnInit {
           return;
       }
 
-      const params = CloudParameters.currentParameters;
-      params.question = this.question;
-      CloudParameters.currentParameters = params;
+      localStorage.setItem('tag-cloud-question', this.question);
 
       CommentFilter.currentFilter = filter;
 
@@ -153,6 +151,12 @@ export class TopicCloudFilterComponent implements OnInit {
     };
   }
 
+  checkForEnter(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      this.confirmButtonActionCallback()();
+    }
+  }
+
   private isUpdatable(): boolean {
     if (this.comments.length < 3) {
       return false;

src/app/components/shared/comment-answer/comment-answer.component.html

@@ -95,10 +95,7 @@
               {{ 'comment-page.grammar-check' | translate}}
               <mat-icon *ngIf="grammarChecker.isSpellchecking"
                         class="spinner-container">
-                <app-mat-spinner-overlay diameter="20"
-                                         strokeWidth="2"
-                                         [useCustomCSSColor]="true">
-                </app-mat-spinner-overlay>
+                <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
               </mat-icon>
             </button>
           </ars-col>

src/app/components/shared/comment-list/comment-list.component.html

@@ -250,10 +250,7 @@
   <mat-icon>add</mat-icon>
 </button>
 
-<app-mat-spinner-overlay *ngIf="isLoading"
-                         overlay="true"
-                         [useCustomCSSColor]="true">
-</app-mat-spinner-overlay>
+<app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
 
 <div *ngIf="!isLoading">
   <app-comment *ngFor="let current of hideCommentsList ? filteredComments : commentsFilteredByTime"

src/app/components/shared/comment-list/comment-list.component.scss

@@ -258,7 +258,3 @@ h3 {
 h1 {
   color: red;
 }
-
-app-mat-spinner-overlay {
-  color: var(--primary);
-}

src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html

@@ -19,10 +19,7 @@
                   style="margin-right: 5px;">{{buttonIcon}}</mat-icon>
         {{ buttonsLabelSection + '.' + confirmButtonLabel | translate}}
         <mat-icon *ngIf="showLoadingCycle" class="spinner-container">
-          <app-mat-spinner-overlay diameter="20"
-                                   strokeWidth="2"
-                                   [useCustomCSSColor]="true">
-          </app-mat-spinner-overlay>
+          <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
         </mat-icon>
       </button>
       <button

src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.html

 <ng-container *ngIf="overlay;else progressSpinner">
-  <div class="overlay">
+  <div class="overlay {{color}}">
     <div class="center">
       <ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
     </div>
@@ -9,9 +9,9 @@
   <mat-progress-spinner
     #containerRef
     [ngClass]="{'inline-spinner': !overlay}"
+    class="{{color}}"
     [diameter]="diameter"
     [mode]="mode"
-    [color]="color"
     [strokeWidth]="strokeWidth"
     [value]="value">
   </mat-progress-spinner>