From d6bbe578e049aac82fb125f005c7e523ef087248 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Tue, 10 Aug 2021 14:49:58 +0200
Subject: [PATCH] Implement unified mat spinner
[Ticket: #219]
---
.../room-creator-page.component.html | 4 +-
.../room-creator-page.component.scss | 4 ++
.../room-moderator-page.component.html | 3 +-
.../room-moderator-page.component.scss | 35 ++++++-----
.../room-participant-page.component.html | 2 +-
.../room-participant-page.component.scss | 25 ++++----
.../create-comment.component.html | 7 ++-
.../create-comment.component.scss | 10 +--
.../spacy-dialog/spacy-dialog.component.html | 2 +-
.../spacy-dialog/spacy-dialog.component.scss | 48 ++++++++++++---
.../topic-cloud-administration.component.html | 23 ++++---
.../topic-cloud-administration.component.scss | 4 ++
.../comment-answer.component.html | 8 ++-
.../comment-answer.component.scss | 6 ++
.../comment-list/comment-list.component.html | 35 +++++++----
.../comment-list/comment-list.component.scss | 6 +-
.../dialog-action-buttons.component.html | 7 ++-
.../dialog-action-buttons.component.scss | 5 ++
.../mat-spinner-overlay.component.html | 18 ++++++
.../mat-spinner-overlay.component.scss | 27 ++++++++
.../mat-spinner-overlay.component.spec.ts | 26 ++++++++
.../mat-spinner-overlay.component.ts | 61 +++++++++++++++++++
.../question-wall.component.html | 28 ++++++---
.../question-wall.component.scss | 9 ++-
.../question-wall/question-wall.component.ts | 2 +
.../shared/quiz-now/quiz-now.component.html | 9 ++-
.../shared/quiz-now/quiz-now.component.scss | 4 ++
.../shared/quiz-now/quiz-now.component.ts | 11 ++--
.../shared/room-list/room-list.component.html | 12 ++--
.../shared/room-list/room-list.component.scss | 4 ++
src/app/components/shared/shared.module.ts | 7 ++-
.../tag-cloud-pop-up.component.ts | 4 +-
.../shared/tag-cloud/tag-cloud.component.html | 15 +++--
.../shared/tag-cloud/tag-cloud.component.scss | 8 +--
34 files changed, 372 insertions(+), 107 deletions(-)
create mode 100644 src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.html
create mode 100644 src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.scss
create mode 100644 src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.spec.ts
create mode 100644 src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.ts
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index 7e675f2bf..a2cc0ba24 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -4,9 +4,7 @@
fxFill>
<div fxLayout="row"
fxLayoutAlign="center">
- <mat-progress-spinner *ngIf="isLoading"
- color="primary"
- mode="indeterminate"></mat-progress-spinner>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
<mat-card *ngIf="room">
<div fxLayout="row">
<span class="corner-icons"></span>
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index ea240d770..f587e7ace 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -147,3 +147,7 @@ markdown {
background: var(--secondary);
color: var(--on-secondary);
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
index 46f1e6eee..532703093 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.html
@@ -4,8 +4,7 @@
fxFill>
<div fxLayout="row"
fxLayoutAlign="center">
- <mat-progress-spinner *ngIf="isLoading"
- mode="indeterminate"></mat-progress-spinner>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
<mat-card *ngIf="room">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
diff --git a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
index a6ed51d24..9729f8db6 100644
--- a/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
+++ b/src/app/components/moderator/room-moderator-page/room-moderator-page.component.scss
@@ -5,7 +5,7 @@ mat-card {
max-width: 800px;
min-height: 350px;
max-height: 700px;
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
}
mat-card-content > :first-child {
@@ -19,8 +19,9 @@ mat-card-content > :first-child {
.mat-icon-button {
width: 60%; // 100%
height: 75%;
- color: var(--primary)!important;
+ color: var(--primary) !important;
transition: all 0.3s;
+
&:hover {
transform: scale(1.2)
}
@@ -51,24 +52,24 @@ mat-card-content > :first-child {
line-height: 100%!important;
}*/
-.main-icon{
+.main-icon {
font-size: 80px;
height: 80px;
width: 80px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.smallerIcon {
font-size: 55px;
height: 55px;
width: 55px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.room-short-id {
font-size: larger;
font-weight: bold;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
margin: 5% 5% 0 0;
}
@@ -81,33 +82,33 @@ mat-grid-list {
}
h1 {
- font-size: large;
- color: var(--on-surface)!important;
- }
+ font-size: large;
+ color: var(--on-surface) !important;
+}
p {
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
h2 {
font-size: larger;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-card-header {
min-height: 80px;
- height: 10%!important;
+ height: 10% !important;
}
mat-card-title {
height: 40%;
min-width: 200px;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-card-subtitle {
height: 30%;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-grid-tile {
@@ -116,7 +117,7 @@ mat-grid-tile {
}
mat-expansion-panel {
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
min-width: 200px;
hyphens: auto;
}
@@ -150,3 +151,7 @@ markdown {
color: var(--on-surface);
margin: 0 3% 0 3% !important;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.html b/src/app/components/participant/room-participant-page/room-participant-page.component.html
index 67ffe857d..e67dc5758 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.html
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.html
@@ -1,6 +1,6 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
<mat-card *ngIf="room">
<div fxLayout="row">
<span class="fill-remaining-space"></span>
diff --git a/src/app/components/participant/room-participant-page/room-participant-page.component.scss b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
index 7e01c67a3..29022f841 100644
--- a/src/app/components/participant/room-participant-page/room-participant-page.component.scss
+++ b/src/app/components/participant/room-participant-page/room-participant-page.component.scss
@@ -4,10 +4,10 @@ mat-card {
width: 100%;
max-width: 800px;
min-height: 350px;
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
}
-mat-card-content>:first-child {
+mat-card-content > :first-child {
margin-top: 5%;
}
@@ -16,14 +16,14 @@ mat-card-content>:first-child {
height: 75%;
margin-bottom: 3%;
border-radius: 0;
- color: var(--primary)!important;
+ color: var(--primary) !important;
}
.main-icon {
font-size: 80px;
height: 80px;
width: 80px;
- line-height: 100%!important;
+ line-height: 100% !important;
}
.desktop {
@@ -42,30 +42,29 @@ button {
}
-
h3 {
margin: 5% 0 5% 0;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-card-header {
- min-height: 80px!important;
- height: 12%!important;
+ min-height: 80px !important;
+ height: 12% !important;
}
mat-card-title {
height: 40%;
min-width: 200px;
- color: var(--on-surface)!important;
+ color: var(--on-surface) !important;
}
mat-card-subtitle {
height: 20%;
- color: var(-on--surface)!important;
+ color: var(-on--surface) !important;
}
mat-expansion-panel {
- background-color: var(--surface)!important;
+ background-color: var(--surface) !important;
min-width: 200px;
hyphens: auto;
}
@@ -104,3 +103,7 @@ markdown {
color: var(--on-surface);
margin: 0 3% 0 3% !important;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
index 9665db287..aeb369475 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.html
@@ -124,8 +124,11 @@
(click)="grammarChecker.grammarCheck(commentBody)">
{{ 'comment-page.grammar-check' | translate}}
<mat-icon *ngIf="grammarChecker.isSpellchecking"
- style="margin: 0;">
- <mat-spinner diameter="20"></mat-spinner>
+ class="spinner-container">
+ <app-mat-spinner-overlay diameter="20"
+ strokeWidth="2"
+ [useCustomCSSColor]="true">
+ </app-mat-spinner-overlay>
</mat-icon>
</button>
</ars-col>
diff --git a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
index 49db67e66..4882ec336 100644
--- a/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
+++ b/src/app/components/shared/_dialogs/create-comment/create-comment.component.scss
@@ -134,10 +134,6 @@ mat-hint {
overflow-x: hidden !important;
}
-::ng-deep .mat-spinner circle {
- stroke: var(--on-primary);
-}
-
.lang-confidence {
color: var(--on-cancel);
background-color: var(--cancel);
@@ -200,6 +196,12 @@ mat-hint {
display: none;
}
+.spinner-container {
+ font-size: 14px;
+ margin-right: 7px;
+ margin-top: -2px;
+}
+
/*
Suggestion classes from Languagetool
*/
diff --git a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.html b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.html
index cf04bef1a..627a3b4fc 100644
--- a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.html
+++ b/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>
- <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+ <app-mat-spinner-overlay *ngIf="isLoading" useCustomCSSColor="true"></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"
diff --git a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.scss b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.scss
index 81cd32b18..8777cc69a 100644
--- a/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.scss
+++ b/src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.scss
@@ -2,6 +2,7 @@
font-size: 13px;
height: 40px !important;
}
+
.keywords-list {
max-height: 340px;
flex-grow: 1;
@@ -9,11 +10,13 @@
overflow: auto;
padding-top: 0 !important;
}
+
.first-keyword {
border-top: 1px solid var(--surface);
box-sizing: border-box;
}
-.keywords-even, .keywords-alternate {
+
+.keywords-even, .keywords-alternate {
background-color: var(--dialog);
border-bottom: 1px solid var(--surface);
border-top-left-radius: 5px;
@@ -22,33 +25,41 @@
border-right: 1px solid var(--primary);
box-sizing: border-box;
}
+
.keyword-selected {
background: var(--surface);
box-shadow: inset -2px 0 0 1px var(--primary);
}
+
.keyword-span {
color: var(--on-surface) !important;
opacity: 1 !important;
}
+
::ng-deep .mat-checkbox-checked .mat-checkbox-background {
background: var(--primary) !important;
}
+
.mat-checkbox-frame {
color: var(--secondary);
}
-:focus{
+
+:focus {
outline: none;
outline-offset: 8px;
}
+
.lang-selection {
vertical-align: middle;
margin-right: 0;
}
-.select-all-label{
+
+.select-all-label {
padding-left: 15px;
cursor: pointer;
}
-.manual-input{
+
+.manual-input {
background-color: transparent;
border: 1px solid var(--on-dialog);
padding: 5px;
@@ -56,59 +67,78 @@
color: var(--on-dialog);
width: 100%
}
-.manual-input-title{
+
+.manual-input-title {
margin-top: 15px;
}
-.select-list{
+
+.select-list {
width: calc(100% - 24px);
}
+
.keywords-actions {
white-space: nowrap;
padding-left: 5px;
margin-left: auto;
color: var(--on-surface);
}
-.lang-btn{
+
+.lang-btn {
width: 100%;
}
+
.keywords-actions-selected {
color: var(--on-surface);
}
-.isEditing{
+
+.isEditing {
background: var(--primary);
height: 22px;
border-radius: 5px;
color: var(--on-primary);
- border: 1px solid var( --on-primary);
+ border: 1px solid var(--on-primary);
}
+
.edit-accept {
color: var(--on-surface);
}
+
.select-all-section {
vertical-align: middle;
padding-top: 20px;
padding-bottom: 20px;
}
+
.select-all-label {
padding-left: 15px;
}
+
.select-all-icon {
float: left;
padding-left: 16px;
}
+
.select-all-checkbox {
float: right;
padding-right: 3px;
}
+
.mat-select {
padding-left: 14px;
}
+
::ng-deep .mat-select-panel {
background: var(--dialog);
}
+
.mat-option.mat-active {
color: var(--primary);
}
+
.mat-option {
color: var(--on-surface);
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
index 058ba5937..5e2ad2451 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html
@@ -1,6 +1,6 @@
<mat-dialog-content>
<div fxLayout="row" fxLayoutAlign="center center" fxFill>
- <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+ <app-mat-spinner-overlay *ngIf="isLoading" [useCustomCSSColor]="true"></app-mat-spinner-overlay>
</div>
<div *ngIf="!isLoading">
<mat-accordion hideToggle>
@@ -367,7 +367,8 @@
</mat-menu>
- <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="changeTabIndex()" animationDuration="0ms" mat-stretch-tabs mat-align-tabs="center">
+ <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="changeTabIndex()" animationDuration="0ms"
+ mat-stretch-tabs mat-align-tabs="center">
<mat-tab label="{{'topic-cloud-dialog.keywords' | translate}}">
<mat-card class="color-surface"
*ngIf="(keywords.size === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading">
@@ -409,7 +410,8 @@
</button>
<button class="margin-right" mat-icon-button style="align-self:flex-end;"
(click)="openConfirmDialog('delete-message','delete',keyword)">
- <mat-icon class="red" matTooltip="{{'topic-cloud-dialog.delete' | translate}}">delete_sweep</mat-icon>
+ <mat-icon class="red" matTooltip="{{'topic-cloud-dialog.delete' | translate}}">delete_sweep
+ </mat-icon>
</button>
</div>
@@ -443,7 +445,7 @@
matTooltip="{{'topic-cloud-dialog.blacklist-is'+(blacklistIsActive?'':'-not')+'-active' | translate}}">Blacklist</label>
</ng-template>
<mat-card class="color-surface"
- *ngIf="(blacklistKeywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading">
+ *ngIf="(blacklistKeywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading">
<p class="color-on-surface" fxLayoutAlign="center">
{{'topic-cloud-dialog.no-keywords-note' | translate}}
</p>
@@ -451,8 +453,8 @@
<mat-accordion>
<div *ngFor="let keyword of (searchMode ? filteredKeywords : blacklistKeywords); let i = index">
<mat-expansion-panel class="color-surface" (opened)="panelOpenState = true"
- (closed)="panelOpenState = edit = false" [attr.data-index]="i"
- matTooltip="{{'topic-cloud-dialog.'+(keyword.keywordType === 2?'Keyword-from-both':(keyword.keywordType === 0?'keyword-from-spacy':'keyword-from-questioner')) | translate}}">
+ (closed)="panelOpenState = edit = false" [attr.data-index]="i"
+ matTooltip="{{'topic-cloud-dialog.'+(keyword.keywordType === 2?'Keyword-from-both':(keyword.keywordType === 0?'keyword-from-spacy':'keyword-from-questioner')) | translate}}">
<mat-expansion-panel-header class="color-surface">
<mat-panel-title>
{{keyword.keyword}}
@@ -464,8 +466,10 @@
</mat-expansion-panel-header>
<div *ngFor="let question of keyword.comments">
- <app-topic-dialog-comment [question]="question.body" [keyword]="keyword.keyword" [maxShowedCharachters]="140"
- [profanityFilter]="profanityFilter" [languageSpecific]="censorLanguageSpecificCheck"
+ <app-topic-dialog-comment [question]="question.body" [keyword]="keyword.keyword"
+ [maxShowedCharachters]="140"
+ [profanityFilter]="profanityFilter"
+ [languageSpecific]="censorLanguageSpecificCheck"
[partialWords]="censorPartialWordsCheck"
[language]="question.language"></app-topic-dialog-comment>
</div>
@@ -478,7 +482,8 @@
</button>
<button class="margin-right" mat-icon-button style="align-self:flex-end;"
(click)="openConfirmDialog('delete-message','delete',keyword)">
- <mat-icon class="red" matTooltip="{{'topic-cloud-dialog.delete' | translate}}">delete_sweep</mat-icon>
+ <mat-icon class="red" matTooltip="{{'topic-cloud-dialog.delete' | translate}}">delete_sweep
+ </mat-icon>
</button>
</div>
diff --git a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
index 86c644ce6..de118a9b8 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
+++ b/src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.scss
@@ -181,3 +181,7 @@ mat-dialog-content {
color: black;
width: 100%;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/comment-answer/comment-answer.component.html b/src/app/components/shared/comment-answer/comment-answer.component.html
index 635e3eee0..96993bcf2 100644
--- a/src/app/components/shared/comment-answer/comment-answer.component.html
+++ b/src/app/components/shared/comment-answer/comment-answer.component.html
@@ -93,8 +93,12 @@
(click)="grammarChecker.grammarCheck(commentBody)"
class="spell-button">
{{ 'comment-page.grammar-check' | translate}}
- <mat-icon *ngIf="grammarChecker.isSpellchecking" style="margin: 0;">
- <mat-spinner diameter="20"></mat-spinner>
+ <mat-icon *ngIf="grammarChecker.isSpellchecking"
+ class="spinner-container">
+ <app-mat-spinner-overlay diameter="20"
+ strokeWidth="2"
+ [useCustomCSSColor]="true">
+ </app-mat-spinner-overlay>
</mat-icon>
</button>
</ars-col>
diff --git a/src/app/components/shared/comment-answer/comment-answer.component.scss b/src/app/components/shared/comment-answer/comment-answer.component.scss
index 9229ee94d..5af943e0a 100644
--- a/src/app/components/shared/comment-answer/comment-answer.component.scss
+++ b/src/app/components/shared/comment-answer/comment-answer.component.scss
@@ -115,6 +115,12 @@ mat-icon {
display: none;
}
+.spinner-container {
+ font-size: 14px;
+ margin-right: 7px;
+ margin-top: -6px;
+}
+
/*
Suggestion classes from Languagetool
*/
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index acd1731dd..23286baa3 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -154,7 +154,8 @@
<mat-icon class="star"
[ngClass]="{favorite: 'favorite-icon'}[currentFilter]">grade
</mat-icon>
- <span [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">{{ 'comment-list.filter-favorite' | translate }}</span>
+ <span
+ [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">{{ 'comment-list.filter-favorite' | translate }}</span>
</button>
<button mat-menu-item
@@ -163,7 +164,8 @@
<mat-icon class="bookmark"
[ngClass]="{bookmark: 'bookmark-icon'}[currentFilter]">bookmark
</mat-icon>
- <span [ngClass]="{bookmark: 'bookmark-icon'}[currentFilter]">{{ 'comment-list.filter-bookmark' | translate }}</span>
+ <span
+ [ngClass]="{bookmark: 'bookmark-icon'}[currentFilter]">{{ 'comment-list.filter-bookmark' | translate }}</span>
</button>
<button mat-menu-item
@@ -173,7 +175,8 @@
<mat-icon class="answer"
[ngClass]="{answer: 'answered-icon'}[currentFilter]">comment
</mat-icon>
- <span [ngClass]="{answer: 'answered-icon'}[currentFilter]">{{ 'comment-list.filter-answered' | translate }}</span>
+ <span
+ [ngClass]="{answer: 'answered-icon'}[currentFilter]">{{ 'comment-list.filter-answered' | translate }}</span>
</button>
<button mat-menu-item
@@ -183,7 +186,8 @@
<mat-icon class="unanswered"
[ngClass]="{unanswered: 'unanswered-icon'}[currentFilter]">comment
</mat-icon>
- <span [ngClass]="{unanswered: 'unanswered-icon'}[currentFilter]">{{ 'comment-list.filter-unanswered' | translate }}</span>
+ <span
+ [ngClass]="{unanswered: 'unanswered-icon'}[currentFilter]">{{ 'comment-list.filter-unanswered' | translate }}</span>
</button>
<button mat-menu-item
@@ -201,7 +205,8 @@
<mat-icon class="lecturer"
[ngClass]="{lecturer: 'lecturer-icon'}[currentFilter]">school
</mat-icon>
- <span [ngClass]="{lecturer: 'lecturer-icon'}[currentFilter]">{{ 'comment-list.filter-lecturer' | translate }}</span>
+ <span
+ [ngClass]="{lecturer: 'lecturer-icon'}[currentFilter]">{{ 'comment-list.filter-lecturer' | translate }}</span>
</button>
<button mat-menu-item
@@ -210,7 +215,8 @@
<mat-icon class="moderator"
[ngClass]="{moderator: 'moderator-icon'}[currentFilter]">gavel
</mat-icon>
- <span [ngClass]="{moderator: 'moderator-icon'}[currentFilter]">{{ 'comment-list.filter-moderator' | translate }}</span>
+ <span
+ [ngClass]="{moderator: 'moderator-icon'}[currentFilter]">{{ 'comment-list.filter-moderator' | translate }}</span>
</button>
@@ -244,6 +250,11 @@
<mat-icon>add</mat-icon>
</button>
+<app-mat-spinner-overlay *ngIf="isLoading"
+ overlay="true"
+ [useCustomCSSColor]="true">
+</app-mat-spinner-overlay>
+
<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : commentsFilteredByTime"
[comment]="current"
@@ -262,10 +273,11 @@
<app-active-user *ngIf="room" [room]="this.room"></app-active-user>
<!-- No Questions Present -->
-<div *ngIf="comments && (commentsFilteredByTime.length < 1 && period === 'time-all' || comments.length === 0) && !isLoading"
- fxLayout="row"
- fxLayoutAlign="center center"
- class="no-comments">
+<div
+ *ngIf="comments && (commentsFilteredByTime.length < 1 && period === 'time-all' || comments.length === 0) && !isLoading"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ class="no-comments">
<p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>
</div>
@@ -274,7 +286,8 @@
fxLayout="row"
fxLayoutAlign="center center"
class="no-comments">
- <p class="oldtypo-p">{{ (search ? 'comment-page.no-comments-with-search' : 'comment-page.no-comments-with-filter') | translate }}</p>
+ <p
+ class="oldtypo-p">{{ (search ? 'comment-page.no-comments-with-search' : 'comment-page.no-comments-with-filter') | translate }}</p>
</div>
<!--Hidden Div's for a11y-Descriptions-->
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index a669b2f1b..109b80571 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -255,6 +255,10 @@ h3 {
opacity: 1.0 !important;
}
-h1{
+h1 {
color: red;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
index fc72dc98d..76a2bf7d8 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.html
@@ -18,8 +18,11 @@
<mat-icon *ngIf="buttonIcon"
style="margin-right: 5px;">{{buttonIcon}}</mat-icon>
{{ buttonsLabelSection + '.' + confirmButtonLabel | translate}}
- <mat-icon *ngIf="showLoadingCycle">
- <mat-spinner diameter="20"></mat-spinner>
+ <mat-icon *ngIf="showLoadingCycle" class="spinner-container">
+ <app-mat-spinner-overlay diameter="20"
+ strokeWidth="2"
+ [useCustomCSSColor]="true">
+ </app-mat-spinner-overlay>
</mat-icon>
</button>
<button
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
index f05bfaa7f..2a364a363 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
@@ -26,3 +26,8 @@
background: var(--secondary);
color: var(--on-secondary);
}
+
+.spinner-container {
+ font-size: 14px;
+ margin-top: -2px;
+}
diff --git a/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.html b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.html
new file mode 100644
index 000000000..161e84155
--- /dev/null
+++ b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.html
@@ -0,0 +1,18 @@
+<ng-container *ngIf="overlay;else progressSpinner">
+ <div class="overlay">
+ <div class="center">
+ <ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
+ </div>
+ </div>
+</ng-container>
+<ng-template #progressSpinner>
+ <mat-progress-spinner
+ #containerRef
+ [ngClass]="{'inline-spinner': !overlay}"
+ [diameter]="diameter"
+ [mode]="mode"
+ [color]="color"
+ [strokeWidth]="strokeWidth"
+ [value]="value">
+ </mat-progress-spinner>
+</ng-template>
diff --git a/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.scss b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.scss
new file mode 100644
index 000000000..0437c8816
--- /dev/null
+++ b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.scss
@@ -0,0 +1,27 @@
+.center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+}
+
+mat-progress-spinner {
+ -moz-transform: translateX(-50%) translateY(-50%);
+ -webkit-transform: translateX(-50%) translateY(-50%);
+ transform: translateX(-50%) translateY(-50%);
+}
+
+.overlay {
+ height: 100vh;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.286);
+ z-index: 10;
+ top: 0;
+ left: 0;
+ position: fixed;
+}
+
+mat-progress-spinner.inline-spinner {
+ display: inline;
+ margin-left: 0.25em;
+ top: 0.115em;
+}
diff --git a/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.spec.ts b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.spec.ts
new file mode 100644
index 000000000..e984205b8
--- /dev/null
+++ b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.spec.ts
@@ -0,0 +1,26 @@
+/*import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatSpinnerOverlayComponent } from './mat-spinner-overlay.component';
+
+describe('MatSpinnerOverlayComponent', () => {
+ let component: MatSpinnerOverlayComponent;
+ let fixture: ComponentFixture<MatSpinnerOverlayComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ MatSpinnerOverlayComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MatSpinnerOverlayComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
+ */
diff --git a/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.ts b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.ts
new file mode 100644
index 000000000..fccc0f9a2
--- /dev/null
+++ b/src/app/components/shared/mat-spinner-overlay/mat-spinner-overlay.component.ts
@@ -0,0 +1,61 @@
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ Input,
+ OnInit,
+ Renderer2,
+ RendererStyleFlags2,
+ ViewChild
+} from '@angular/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+ selector: 'app-mat-spinner-overlay',
+ templateUrl: './mat-spinner-overlay.component.html',
+ styleUrls: ['./mat-spinner-overlay.component.scss']
+})
+export class MatSpinnerOverlayComponent implements OnInit, AfterViewInit {
+
+ @ViewChild('containerRef') containerRef: ElementRef;
+ @Input() value = 100;
+ @Input() diameter = 100;
+ @Input() mode: ProgressSpinnerMode = 'indeterminate';
+ @Input() strokeWidth = 10;
+ @Input() overlay = false;
+ @Input() color: ThemePalette = 'primary';
+ /**
+ * Overrides diameter and strokeWidth settings, only possible if overlay is false
+ */
+ @Input() parentFontContainer: HTMLElement = null;
+ @Input() useCustomCSSColor = false;
+
+ constructor(private element: ElementRef<HTMLElement>,
+ private renderer2: Renderer2) {
+ }
+
+ ngOnInit(): void {
+ if (this.parentFontContainer && !this.overlay) {
+ const elem = this.renderer2.createElement('canvas');
+ const ctx = elem.getContext('2d');
+ const style = window.getComputedStyle(this.parentFontContainer);
+ ctx.font = style.font;
+ const metric = ctx.measureText(this.parentFontContainer.innerText);
+ this.diameter = Math.abs(metric.fontBoundingBoxAscent) + Math.abs(metric.actualBoundingBoxDescent);
+ this.strokeWidth = this.diameter / 10;
+ }
+ }
+
+ ngAfterViewInit() {
+ const svg = this.element.nativeElement.getElementsByTagName('svg');
+ if (svg.length < 1) {
+ return;
+ }
+ this.renderer2.setStyle(svg[0], 'position', 'static');
+ if (this.useCustomCSSColor && svg[0].firstElementChild) {
+ this.renderer2.setStyle(svg[0].firstElementChild, 'stroke', 'currentColor', RendererStyleFlags2.Important);
+ }
+ }
+
+}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index 5a6249b9c..5c780b45a 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -1,3 +1,7 @@
+<app-mat-spinner-overlay *ngIf="isLoading"
+ [overlay]="true"
+ [useCustomCSSColor]="true">
+</app-mat-spinner-overlay>
<ars-screen ars-flex-box class="questionwall-screen">
<ars-row [height]="50" class="questionwall-header">
<ars-style-btn-material *ngIf="room" style="width:100%;height:100%;" ars-flex-box>
@@ -17,9 +21,12 @@
<ars-fill></ars-fill>
<ars-col ars-btn-wrp [xp]="16" [extra]="true">
<mat-menu #sortMenu>
- <button mat-menu-item (click)="sortTime(true)" aria-labelledby="sort-lbl-new">{{'question-wall.sort-new' | translate}}</button>
- <button mat-menu-item (click)="sortTime()" aria-labelledby="sort-lbl-old">{{'question-wall.sort-old' | translate}}</button>
- <button mat-menu-item (click)="sortScore(true)" aria-labelledby="sort-lbl-rating">{{'question-wall.sort-score' | translate}}</button>
+ <button mat-menu-item (click)="sortTime(true)"
+ aria-labelledby="sort-lbl-new">{{'question-wall.sort-new' | translate}}</button>
+ <button mat-menu-item (click)="sortTime()"
+ aria-labelledby="sort-lbl-old">{{'question-wall.sort-old' | translate}}</button>
+ <button mat-menu-item (click)="sortScore(true)"
+ aria-labelledby="sort-lbl-rating">{{'question-wall.sort-score' | translate}}</button>
</mat-menu>
<mat-menu #filterMenu>
<button mat-menu-item (click)="filterFavorites()" aria-labelledby="filter-lbl-favorites" class="selection">
@@ -119,7 +126,8 @@
</ars-row>
<ars-row>
<ars-row class="bound" style="padding:16px 32px 16px 32px;box-sizing:border-box;max-width:100%;">
- <markdown [ngStyle]="{'font-size':fontSize+'%'}" class="questionwall-present-markdown" class="images" katex emoji lineNumbers lineHighlight
+ <markdown [ngStyle]="{'font-size':fontSize+'%'}" class="questionwall-present-markdown" class="images"
+ katex emoji lineNumbers lineHighlight
[data]="commentFocus.comment.body"></markdown>
</ars-row>
</ars-row>
@@ -214,11 +222,12 @@
style="box-sizing:border-box;padding:16px;cursor:pointer">
<ars-col class="questionwall-comment-meta">
<i class="questionwall-icon">person_pin_circle</i>
- <p (click)="filterUser(comment);" class="questionwall-comment-user" matRipple>{{comment.comment.userNumber}}</p>
+ <p (click)="filterUser(comment);" class="questionwall-comment-user"
+ matRipple>{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-col>
- <p class="questionwall-comment-notification">{{comment.old?'':'NEW'}}</p>
+ <p class="questionwall-comment-notification">{{comment.old ? '' : 'NEW'}}</p>
</ars-col>
</ars-row>
<ars-row
@@ -226,7 +235,7 @@
style="box-sizing:border-box;padding:0 16px;cursor:pointer">
<p class="questionwall-comment-body">
<markdown class="images" katex emoji lineNumbers lineHighlight
- [data]="comment.comment.body"></markdown>
+ [data]="comment.comment.body"></markdown>
</p>
</ars-row>
<ars-row [height]="50">
@@ -241,7 +250,7 @@
</button>
</ars-col>
<ars-fill (click)="focusComment(comment)" style="cursor:pointer"></ars-fill>
- <ars-col ars-btn-wrp [xp]="16" [extra]="true"*ngIf="comment.comment.tag">
+ <ars-col ars-btn-wrp [xp]="16" [extra]="true" *ngIf="comment.comment.tag">
<button ars-btn (click)="filterTag(comment.comment.tag);" matRipple>
<mat-icon class="icon-svg" svgIcon="comment_tag"></mat-icon>
<p>{{comment.comment.tag}}</p>
@@ -274,7 +283,8 @@
<p>{{'question-wall.filter-user-count' | translate}}</p>
</button>
<button ars-btn mat-ripple *ngFor="let user of userList" (click)="applyUserMap(user[1])">
- <p>{{user[1]}}</p><p>{{user[0]}}</p>
+ <p>{{user[1]}}</p>
+ <p>{{user[0]}}</p>
</button>
</ars-row>
</ars-style-btn-material>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index bbeedf4ba..e435ea894 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -300,11 +300,16 @@
font-weight: bold;
}
-.selection:focus{
+.selection:focus {
background-color: black !important;
}
-h2{
+
+h2 {
color: red;
font-weight: normal !important;
padding-top: 10px !important;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
index cc87e03cb..4506a8b84 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.ts
@@ -50,6 +50,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
fontSize = 180;
periodsList = Object.values(Period);
period: Period = Period.all;
+ isLoading = true;
constructor(
private authenticationService: AuthenticationService,
@@ -92,6 +93,7 @@ export class QuestionWallComponent implements OnInit, AfterViewInit, OnDestroy {
return;
}
e.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+ this.isLoading = false;
e.forEach(c => {
this.roomDataService.checkProfanity(c);
const comment = new QuestionWallComment(c, true);
diff --git a/src/app/components/shared/quiz-now/quiz-now.component.html b/src/app/components/shared/quiz-now/quiz-now.component.html
index 5d780e06a..0b24598d6 100644
--- a/src/app/components/shared/quiz-now/quiz-now.component.html
+++ b/src/app/components/shared/quiz-now/quiz-now.component.html
@@ -1,3 +1,10 @@
+<app-mat-spinner-overlay *ngIf="isLoading"
+ overlay="true"
+ useCustomCSSColor="true">
+</app-mat-spinner-overlay>
<div class="container">
- <iframe class="responsive-iframe" [src]="urlSafe"></iframe>
+ <iframe class="responsive-iframe" [src]="urlSafe"
+ (load)="isLoading = false"
+ (error)="isLoading = false">
+ </iframe>
</div>
diff --git a/src/app/components/shared/quiz-now/quiz-now.component.scss b/src/app/components/shared/quiz-now/quiz-now.component.scss
index c4785b368..7c334602e 100644
--- a/src/app/components/shared/quiz-now/quiz-now.component.scss
+++ b/src/app/components/shared/quiz-now/quiz-now.component.scss
@@ -16,3 +16,7 @@ iframe {
width: 100%;
height: 100%;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/quiz-now/quiz-now.component.ts b/src/app/components/shared/quiz-now/quiz-now.component.ts
index 2c7fc356d..69c95063f 100644
--- a/src/app/components/shared/quiz-now/quiz-now.component.ts
+++ b/src/app/components/shared/quiz-now/quiz-now.component.ts
@@ -1,16 +1,19 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
@Component({
selector: 'app-quiz-now',
templateUrl: './quiz-now.component.html',
styleUrls: ['./quiz-now.component.scss']
})
-export class QuizNowComponent {
+export class QuizNowComponent implements OnInit {
urlSafe: SafeResourceUrl;
+ isLoading = true;
- constructor(public sanitizer: DomSanitizer) { }
+ constructor(public sanitizer: DomSanitizer) {
+ }
ngOnInit() {
- this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl("https://staging.antworte.jetzt/");
+ this.urlSafe = this.sanitizer.bypassSecurityTrustResourceUrl('https://staging.antworte.jetzt/');
}
}
diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html
index 6e897e485..9740726c0 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -1,6 +1,7 @@
<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner color="primary" mode="indeterminate" diameter="80"></mat-progress-spinner>
+ <app-mat-spinner-overlay [useCustomCSSColor]="true" diameter="80" strokeWidth="8">
+ </app-mat-spinner-overlay>
</div>
</div>
@@ -32,7 +33,8 @@
</th>
<td mat-cell class="clickable" *matCellDef="let room" (click)="setCurrentRoom(room.shortId)"
routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}">
- <span matBadge="{{room.commentCount > 0 ? room.commentCount : null}}" matBadgePosition="before" matBadgeSize="small" matBadgeOverlap="false">
+ <span matBadge="{{room.commentCount > 0 ? room.commentCount : null}}" matBadgePosition="before"
+ matBadgeSize="small" matBadgeOverlap="false">
»{{room.name}}«
</span>
</td>
@@ -97,9 +99,9 @@
<div class="visually-hidden">
<div id="{{ 'joinButtonLabel' + room.shortId | translate }}">
{{ 'room-list.join-message-template' | translate:{
- session: room.name,
- id: room.shortId,
- role: ( 'room-list.' + roleToString((room.role)) + '-role' | translate )
+ session: room.name,
+ id: room.shortId,
+ role: ('room-list.' + roleToString((room.role)) + '-role' | translate)
} }}
</div>
</div>
diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss
index a5c5f7d85..2d9123091 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -100,3 +100,7 @@ th, tr {
.warn {
color: var(--red) !important;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
diff --git a/src/app/components/shared/shared.module.ts b/src/app/components/shared/shared.module.ts
index 188b7d977..32920359b 100644
--- a/src/app/components/shared/shared.module.ts
+++ b/src/app/components/shared/shared.module.ts
@@ -42,6 +42,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
import { ActiveUserComponent } from './overlay/active-user/active-user.component';
import { AutofocusDirective } from '../../directives/autofocus.directive';
import { TagCloudComponent } from './tag-cloud/tag-cloud.component';
+import { MatSpinnerOverlayComponent } from './mat-spinner-overlay/mat-spinner-overlay.component';
@NgModule({
imports: [
@@ -89,7 +90,8 @@ import { TagCloudComponent } from './tag-cloud/tag-cloud.component';
TagCloudPopUpComponent,
ActiveUserComponent,
WorkerDialogComponent,
- AutofocusDirective
+ AutofocusDirective,
+ MatSpinnerOverlayComponent
],
exports: [
RoomJoinComponent,
@@ -107,7 +109,8 @@ import { TagCloudComponent } from './tag-cloud/tag-cloud.component';
UserBonusTokenComponent,
CloudConfigurationComponent,
TagCloudPopUpComponent,
- ActiveUserComponent
+ ActiveUserComponent,
+ MatSpinnerOverlayComponent
]
})
export class SharedModule {
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 14b4e30c6..41bebb11d 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
@@ -33,8 +33,8 @@ export class TagCloudPopUpComponent implements OnInit, AfterViewInit {
selectedLang: Language = 'en-US';
spellingData: string[] = [];
isBlacklistActive = true;
- private _popupHoverTimer: number;
- private _popupCloseTimer: number;
+ private _popupHoverTimer;
+ private _popupCloseTimer;
private _hasLeft = true;
constructor(private langService: LanguageService,
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.html b/src/app/components/shared/tag-cloud/tag-cloud.component.html
index ffa4b111d..903f22131 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.html
@@ -1,7 +1,11 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Indie+Flower&family=Permanent+Marker&display=swap" rel="stylesheet">
+<link
+ href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Indie+Flower&family=Permanent+Marker&display=swap"
+ rel="stylesheet">
<ars-screen ars-flex-box>
- <h1 *ngIf="user && user.role > 0 && question" class="tag-cloud-brainstorming-question mat-display-1">{{question}}</h1>
+ <h1 *ngIf="user && user.role > 0 && question" class="tag-cloud-brainstorming-question mat-display-1">
+ {{question}}
+ </h1>
<mat-drawer-container class="spacyTagCloudContainer">
<mat-drawer [(opened)]="configurationOpen" position="end" mode="over">
<app-cloud-configuration [parent]="this"></app-cloud-configuration>
@@ -9,9 +13,10 @@
<mat-drawer-content>
<ars-fill ars-flex-box>
<app-tag-cloud-pop-up></app-tag-cloud-pop-up>
- <div [ngClass]="{'hidden': !isLoading}" fxLayout="row" fxLayoutAlign="center center" fxFill>
- <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
- </div>
+ <app-mat-spinner-overlay *ngIf="isLoading"
+ overlay="true"
+ [useCustomCSSColor]="true">
+ </app-mat-spinner-overlay>
<angular-tag-cloud
id="tagCloudComponent"
class="spacyTagCloud"
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.scss b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
index 0c5024ba7..342b41d25 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
@@ -33,10 +33,6 @@ mat-drawer-content {
display: none !important;
}
-::ng-deep mat-progress-spinner circle {
- stroke: var(--on-background) !important;
-}
-
app-tag-cloud-pop-up {
width: max-content;
height: max-content;
@@ -73,3 +69,7 @@ app-tag-cloud-pop-up {
font-family: var(--tag-cloud-font-family, 'Dancing Script');
font-size: 50px;
}
+
+app-mat-spinner-overlay {
+ color: var(--primary);
+}
--
GitLab