From f03cfc234e5bf90512b8170917ddd506be4bc6b0 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Thu, 10 Jun 2021 13:17:38 +0200
Subject: [PATCH] Fixes popup focus

The popup in the tag cloud was closed even if there was a focus.

[Ticket: #99]
---
 .../tag-cloud-pop-up.component.html           | 81 +++++++++++--------
 .../tag-cloud-pop-up.component.scss           | 12 +++
 .../tag-cloud-pop-up.component.ts             |  1 +
 3 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
index 65e367adb..e88088a2e 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.html
@@ -1,39 +1,52 @@
 <div #popupContainer
      class="popupContainer"
      (focusout)="onFocus($event)"
-      tabindex="0">
-  <span>
-    <mat-icon matTooltip="{{'tag-cloud.overview-question-topic-tooltip' | translate}}">comment</mat-icon>
-    <p>
-      {{tagData && tagData.comments.length}}
-    </p>
-    <mat-icon matTooltip="{{'tag-cloud.overview-questioners-topic-tooltip' | translate}}">person</mat-icon>
-    <p>
-      {{tagData && tagData.distinctUsers.size}}
-    </p>
-    <mat-icon matTooltip="{{'tag-cloud.upvote-topic' | translate}}">thumb_up</mat-icon>
-    <p>
-      {{tagData && tagData.cachedUpVotes}}
-    </p>
-    <mat-icon matTooltip="{{'tag-cloud.downvote-topic' | translate}}">thumb_down</mat-icon>
-    <p>
-      {{tagData && tagData.cachedDownVotes}}
-    </p>
-    <button *ngIf="user && user.role >= 1" mat-button (click)="addBlacklistWord()">
-      <mat-icon matTooltip="{{'tag-cloud.blacklist-topic' | translate}}">gavel</mat-icon>
-    </button>
-  </span>
-  <br>
-  <span>
-    <mat-icon matTooltip="{{'tag-cloud.period-since-first-comment' | translate}}">date_range</mat-icon>
-    <p>
-      {{timePeriodText}}
-    </p>
-  </span>
-  <div *ngIf="categories && categories.length">
-    <p>Kategorien:</p>
-    <ul>
-      <li *ngFor="let category of categories">{{category}}</li>
-    </ul>
+     tabindex="0">
+  <div>
+    <div>
+      <span>
+        <mat-icon matTooltip="{{'tag-cloud.overview-question-topic-tooltip' | translate}}">comment</mat-icon>
+        <p>
+          {{tagData && tagData.comments.length}}
+        </p>
+      </span>
+      <span>
+        <mat-icon matTooltip="{{'tag-cloud.overview-questioners-topic-tooltip' | translate}}">person</mat-icon>
+        <p>
+          {{tagData && tagData.distinctUsers.size}}
+        </p>
+      </span>
+      <button *ngIf="user && user.role >= 1" mat-button (click)="addBlacklistWord()">
+        <mat-icon matTooltip="{{'tag-cloud.blacklist-topic' | translate}}">gavel</mat-icon>
+      </button>
+    </div>
+    <div>
+      <span>
+        <mat-icon matTooltip="{{'tag-cloud.upvote-topic' | translate}}">thumb_up</mat-icon>
+        <p>
+          {{tagData && tagData.cachedUpVotes}}
+        </p>
+      </span>
+      <span>
+        <mat-icon matTooltip="{{'tag-cloud.downvote-topic' | translate}}">thumb_down</mat-icon>
+        <p>
+          {{tagData && tagData.cachedDownVotes}}
+        </p>
+      </span>
+    </div>
+    <div>
+      <span>
+        <mat-icon matTooltip="{{'tag-cloud.period-since-first-comment' | translate}}">date_range</mat-icon>
+        <p>
+          {{timePeriodText}}
+        </p>
+      </span>
+    </div>
+    <div *ngIf="categories && categories.length">
+      <p>Kategorien:</p>
+      <ul>
+        <li *ngFor="let category of categories">{{category}}</li>
+      </ul>
+    </div>
   </div>
 </div>
diff --git a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.scss b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.scss
index 057e27b57..6745e294e 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.scss
@@ -16,6 +16,18 @@ $header-size: 67px;
   z-index: 3;
   color: var(--on-dialog);
   transform: translateY(-$header-size);
+  min-width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    display: flex;
+    justify-content: center;
+    overflow: auto;
+    flex-direction: column;
+    align-items: flex-start;
+  }
 
   &:focus {
     outline: none;
diff --git a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.ts b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.ts
index 2b3210c43..2111aa124 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.ts
+++ b/src/app/components/shared/tag-cloud/tag-cloud-pop-up/tag-cloud-pop-up.component.ts
@@ -62,6 +62,7 @@ export class TagCloudPopUpComponent implements OnInit, AfterViewInit {
 
   leave(): void {
     clearTimeout(this._popupHoverTimer);
+    clearTimeout(this._popupCloseTimer);
     this._popupCloseTimer = setTimeout(() => {
       this.close();
     }, CLOSE_TIME);
-- 
GitLab