Fix double redraw during tag cloud administration

Also fixed some UI bugs and functional bugs.
[Ticket: #186]

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

-h2{
+h2 {
   color: var(--on-dialog);
   font-size: 1.7rem;
 }
 
-.expansion-title{
+.expansion-title {
   color: var(--primary);
   padding-bottom: 6px;
   font-size: 1.2rem;
@@ -31,11 +31,11 @@ div {
   color: var(--on-secondary);
 }
 
-.tag-config-button{
+.tag-config-button {
   min-width: 135px;
 }
 
-.close-btn mat-icon{
+.close-btn mat-icon {
   font-size: 20px;
   margin-top: 2px;
 }
@@ -64,7 +64,7 @@ mat-divider {
   margin-top: 20px;
 }
 
-.color-box{
+.color-box {
   flex: 1 1 100%;
   box-sizing: border-box;
   border: 2px solid var(--on-dialog);
@@ -81,29 +81,29 @@ mat-divider {
   pointer-events: none;
 }
 
-::ng-deep .mat-slide-toggle-thumb{
-  background-color:  var(--secondary);
+::ng-deep .mat-slide-toggle-thumb {
+  background-color: var(--secondary);
 }
 
-::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar{
-  background-color:  var(--primary);
+::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
+  background-color: var(--primary);
 }
 
-::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{
-  background-color:  var(--primary);
+::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
+  background-color: var(--primary);
 
 }
 
 ::ng-deep .mat-form-field-label {
-  color: var(--on-surface)!important;
+  color: var(--on-surface) !important;
 }
 
 ::ng-deep .mat-form-field-underline {
-  background-color: var(--on-surface)!important;
+  background-color: var(--on-surface) !important;
 }
 
 ::ng-deep .mat-form-field-ripple {
-  background-color: var(--on-surface)!important;
+  background-color: var(--on-surface) !important;
 }
 
 ::ng-deep .mat-select-arrow-wrapper .mat-select-arrow {
@@ -120,54 +120,57 @@ mat-divider {
 
 ::ng-deep .mat-accent .mat-slider-track-fill,
 ::ng-deep .mat-accent .mat-slider-thumb,
-::ng-deep .mat-accent .mat-slider-thumb-label{
+::ng-deep .mat-accent .mat-slider-thumb-label {
   color: var(--on-primary);
   background-color: var(--primary);
 }
 
-::ng-deep .mat-accent .mat-slider-thumb-label-text{
-  color:  var(--on-primary);
+::ng-deep .mat-accent .mat-slider-thumb-label-text {
+  color: var(--on-primary);
 }
 
-::ng-deep .primary{
+::ng-deep .primary {
   color: var(--on-primary);
   background-color: var(--primary);
 }
 
-::ng-deep .secondary{
+::ng-deep .secondary {
   color: var(--on-cancel);
   background-color: var(--cancel);
   margin-right: 20px;
 
 }
 
-.button-row{
+.button-row {
   width: 100%;
   margin: auto auto 20px auto;
 }
+
 .reset {
   margin: 25px auto auto auto;
   background-color: var(--secondary);
   color: var(--alt-surface);
   width: 100%;
 }
-.cloud-configuration-form{
-  width: 290px;
+
+.cloud-configuration-form {
+  width: min-content;
 }
 
-.drawer-container{
-  color: var(--on-dialog)!important;
+.drawer-container {
+  color: var(--on-dialog) !important;
   margin: 20px;
   align-items: center;
   justify-content: center;
 }
 
-::ng-deep.custom-color-picker{
+::ng-deep.custom-color-picker {
   opacity: 0;
   z-index: -1;
   cursor: pointer;
 }
-.custom-color-picker-text{
+
+.custom-color-picker-text {
   position: absolute;
   top: 25px;
   transform: translateY(-35px);
@@ -178,11 +181,11 @@ mat-divider {
   margin-right: auto;
 }
 
-::ng-deep.mat-drawer-backdrop.mat-drawer-shown{
+::ng-deep.mat-drawer-backdrop.mat-drawer-shown {
   display: none;
 }
 
-::ng-deep.mat-slider-track-background{
+::ng-deep.mat-slider-track-background {
   background-color: var(--primary);
   opacity: 0.2;
 }
@@ -215,32 +218,34 @@ mat-divider {
   margin-bottom: 0;
 }
 
-.special-settings{
+.special-settings {
   border-top: none;
   border-bottom: 2px solid var(--primary);
   padding: 10px 0;
   margin-bottom: 20px;
 }
 
-#rotation{
+#rotation {
   margin-top: 10px;
 }
 
-.matExpansionPanel{
+.matExpansionPanel {
   background-color: var(--dialog);
-  color: var(--on-dialog)!important;
+  color: var(--on-dialog) !important;
   margin: 2px;
   padding: 5px;
 }
 
-.firstElementOfExpansionPanel{
+.firstElementOfExpansionPanel {
   border-top: 2px solid var(--primary);
   padding-top: 10px;
 }
-.firstElementOfWeightClass{
+
+.firstElementOfWeightClass {
   margin-top: 10px;
   padding-bottom: 10px;
 }
-.automatic-spelling{
+
+.automatic-spelling {
   padding-bottom: 30px;
 }

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

@@ -309,7 +309,7 @@
             </mat-form-field>
             <button mat-button class="themeRequirementInput reset"
                     [disabled]="!isTopicRequirementActive()"
-                    (click)="minQuestioners='1'; minQuestioners='1'; minUpvotes='0'; startDate=''; endDate=''">
+                    (click)="minQuestioners='1'; minQuestions='1'; minUpvotes='0'; startDate=''; endDate=''">
               {{'topic-cloud-dialog.topic-requirement-reset' | translate}}
             </button>
           </mat-expansion-panel>

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

 // hide scrollbar
 ::-webkit-scrollbar {
-    display: none;  /* Chrome Safari */
+  display: none; /* Chrome Safari */
 }
+
 //TODO: hide scrollbar for IE and Firefox
 
 .margin-right {
@@ -82,7 +83,7 @@ mat-list-item:hover {
   transition: width 300ms linear;
 }
 
-.smallerInput{
+.smallerInput {
   max-width: 100px;
 }
 
@@ -106,7 +107,7 @@ mat-panel-title, mat-panel-description {
   }
 }
 
-.animation-blink{
+.animation-blink {
   color: var(--red) !important;
   animation-name: animation_blink_5s;
   animation-timing-function: ease-in;
@@ -140,19 +141,21 @@ mat-panel-title, mat-panel-description {
   margin-bottom: auto;
 }
 
-.radio-button-item{
+.radio-button-item {
   margin-bottom: 7px;
   color: var(--on-surface);
 }
 
-.radio-button-group{
+.radio-button-group {
   display: flex;
   flex-direction: column;
   margin: 15px 0;
 }
 
 mat-dialog-content {
-  max-height: 80vh!important;
+  max-height: 80vh !important;
+  margin: unset;
+  padding: unset;
 }
 
 .comment_tag-icon {
@@ -166,6 +169,7 @@ mat-dialog-content {
 ::ng-deep .ng-animating div mat-accordion mat-expansion-panel mat-expansion-panel-header {
   height: 48px;
 }
+
 ::ng-deep .ng-animating div mat-accordion mat-expansion-panel div.mat-expansion-panel-content {
   height: 0px;
   visibility: hidden;

src/app/components/shared/tag-cloud/tag-cloud.component.html

@@ -29,7 +29,7 @@
     </mat-drawer-content>
   </mat-drawer-container>
 </ars-screen>
-<button *ngIf="(user && user.role > 0) || (room && !room.questionsBlocked)"
+<button *ngIf="((user && user.role > 0) || (room && !room.questionsBlocked)) && !configurationOpen"
         mat-fab
         mat-icon-button
         aria-labelledby="add"

src/app/services/util/topic-cloud-admin.service.ts

@@ -162,6 +162,7 @@ export class TopicCloudAdminService {
         room.blacklistIsActive = _adminData.blacklistIsActive;
         this.updateRoom(room);
       });
+      return;
     }
     const subscription = this.getBlacklist().subscribe(list => {
       _adminData.blacklist = [];