From 00efe5fc983c82a0adba895d5734dcb695a390bd Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Mon, 2 Aug 2021 11:25:14 +0200
Subject: [PATCH] Fix dialog when opening topic cloud
Fixed the issue with the broken worker dialog.
Also implemented autofocus as directive.
[Ticket: #206]
---
.../topic-cloud-filter.component.html | 1 +
.../worker-dialog.component.html | 2 +-
.../worker-dialog.component.scss | 5 ++
src/app/components/shared/shared.module.ts | 67 ++++++++++---------
src/app/directive/autofocus.directive.spec.ts | 9 +++
src/app/directive/autofocus.directive.ts | 16 +++++
6 files changed, 67 insertions(+), 33 deletions(-)
create mode 100644 src/app/directive/autofocus.directive.spec.ts
create mode 100644 src/app/directive/autofocus.directive.ts
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
index eb28beabb..17b7d7a0d 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
+++ b/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">
diff --git a/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.html b/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.html
index 304144fbb..bdfdb2ab3 100644
--- a/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.html
+++ b/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>
diff --git a/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.scss b/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.scss
index 53fd0ec8a..fdffcf6b3 100644
--- a/src/app/components/shared/_dialogs/worker-dialog/worker-dialog.component.scss
+++ b/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 {
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index 5b9dcb0ae..9cd33abc6 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/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 {
}
diff --git a/src/app/directive/autofocus.directive.spec.ts b/src/app/directive/autofocus.directive.spec.ts
new file mode 100644
index 000000000..550482e42
--- /dev/null
+++ b/src/app/directive/autofocus.directive.spec.ts
@@ -0,0 +1,9 @@
+/*import { AutofocusDirective } from './autofocus.directive';
+
+describe('AutofocusDirective', () => {
+ it('should create an instance', () => {
+ const directive = new AutofocusDirective();
+ expect(directive).toBeTruthy();
+ });
+});
+*/
diff --git a/src/app/directive/autofocus.directive.ts b/src/app/directive/autofocus.directive.ts
new file mode 100644
index 000000000..fffc34407
--- /dev/null
+++ b/src/app/directive/autofocus.directive.ts
@@ -0,0 +1,16 @@
+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();
+ }
+
+}
--
GitLab