Fix dialog when opening topic cloud

Fixed the issue with the broken worker dialog.
Also implemented autofocus as directive.

[Ticket: #206]

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

@@ -79,6 +79,7 @@
                     appearance="fill">
       <mat-label>{{'content.brainstorming-question' | translate}}</mat-label>
       <input matInput
+             autofocus
              autocomplete="off"
              type="text"
              [(ngModel)]="question">

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

@@ -34,7 +34,7 @@
       </div>
     </details>
     <div mat-dialog-content style="padding-top: 0.75em;" *ngIf="inlined">
-      <span>{{'worker-dialog.inline-header' | translate}} ({{getActiveRoomCount()}}):</span>
+      <h4>{{'worker-dialog.inline-header' | translate}} ({{getActiveRoomCount()}}):</h4>
       <div class="entry" *ngFor="let task of getRooms().values()">
         <div class="entryRow">
           <mat-icon svgIcon="meeting_room" matTooltip="{{'worker-dialog.room-name' | translate}}"></mat-icon>

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

@@ -20,6 +20,11 @@ button {
 
 #worker-content {
   padding-left: 5px;
+
+  .mat-dialog-content {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 .entry {

src/app/components/shared/shared.module.ts

@@ -38,22 +38,23 @@ import { TopicCloudFilterComponent } from './_dialogs/topic-cloud-filter/topic-c
 import { SpacyDialogComponent } from './_dialogs/spacy-dialog/spacy-dialog.component';
 import { TagCloudPopUpComponent } from './tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component';
 import { WorkerDialogComponent } from './_dialogs/worker-dialog/worker-dialog.component';
-import { DragDropModule } from "@angular/cdk/drag-drop";
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ActiveUserComponent } from './overlay/active-user/active-user.component';
+import { AutofocusDirective } from '../../directive/autofocus.directive';
 
 @NgModule({
-    imports: [
-        CommonModule,
-        EssentialsModule,
-        SharedRoutingModule,
-        MatRippleModule,
-        ArsModule,
-        MarkdownModule,
-        QRCodeModule,
-        TagCloudModule,
-        ColorPickerModule,
-        DragDropModule
-    ],
+  imports: [
+    CommonModule,
+    EssentialsModule,
+    SharedRoutingModule,
+    MatRippleModule,
+    ArsModule,
+    MarkdownModule,
+    QRCodeModule,
+    TagCloudModule,
+    ColorPickerModule,
+    DragDropModule
+  ],
   declarations: [
     RoomJoinComponent,
     PageNotFoundComponent,
@@ -84,26 +85,28 @@ import { ActiveUserComponent } from './overlay/active-user/active-user.component
     TopicCloudFilterComponent,
     SpacyDialogComponent,
     TagCloudPopUpComponent,
-    ActiveUserComponent
+    ActiveUserComponent,
+    WorkerDialogComponent,
+    AutofocusDirective
   ],
-	exports:[
-		RoomJoinComponent,
-		PageNotFoundComponent,
-		RoomPageComponent,
-		RoomListComponent,
-		HeaderComponent,
-		FooterComponent,
-		CommentPageComponent,
-		CommentListComponent,
-		CreateCommentComponent,
-		PresentCommentComponent,
-		CommentComponent,
-		DialogActionButtonsComponent,
-		UserBonusTokenComponent,
-		CloudConfigurationComponent,
-		TagCloudPopUpComponent,
-		ActiveUserComponent
-	]
+  exports: [
+    RoomJoinComponent,
+    PageNotFoundComponent,
+    RoomPageComponent,
+    RoomListComponent,
+    HeaderComponent,
+    FooterComponent,
+    CommentPageComponent,
+    CommentListComponent,
+    CreateCommentComponent,
+    PresentCommentComponent,
+    CommentComponent,
+    DialogActionButtonsComponent,
+    UserBonusTokenComponent,
+    CloudConfigurationComponent,
+    TagCloudPopUpComponent,
+    ActiveUserComponent
+  ]
 })
 export class SharedModule {
 }

src/app/directive/autofocus.directive.spec.ts

+/*import { AutofocusDirective } from './autofocus.directive';
+
+describe('AutofocusDirective', () => {
+  it('should create an instance', () => {
+    const directive = new AutofocusDirective();
+    expect(directive).toBeTruthy();
+  });
+});
+*/

src/app/directive/autofocus.directive.ts

+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[autofocus]'
+})
+export class AutofocusDirective implements AfterViewInit {
+
+  constructor(private host: ElementRef) {
+  }
+
+  ngAfterViewInit() {
+    this.host.nativeElement.focus();
+  }
+
+}