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 7e675f2bf840c8bc6796ab6e1e272719ab77674b..a2cc0ba244db63a8445bae2dcc1410f5dab5865f 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 ea240d770244f84396af3a5289a9ba3ee8b6fb7c..f587e7ace435f3b40717f781cd6136a706d0c471 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 46f1e6eee87182ff5de9e83a9e0184291184f040..5327030937e706f682964b34a53b6c608988d7c9 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 a6ed51d24b38c06010c775f436d1c015ff11b6d3..9729f8db64969c1702d901e5806e1002e9a5974c 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 67ffe857d86fed3c7fd90d05cdc5c0014126a9f1..e67dc575840ca736ce55c150f7131ba890979152 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 7e01c67a31b97b8b080a781255ad5f7f3c358705..29022f84107fce57d11d2a804642158d859d5b0a 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 9665db287649fe9286b180d4e26347d4de569709..aeb369475c8246c8b0e2029073ea3a6b20eeec3f 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 49db67e66622737f4548f9083baed326d50c9fe4..4882ec336d862bc588af06371f91514691af7347 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 cf04bef1a22cb1d9be4f35206be3f1cc4a872aaa..627a3b4fc074e4df20eccc12bbae1e46a25bcd5b 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 81cd32b18d2a08e7bdd29411015eb614f8b12d03..8777cc69a22994426afdb48325b7ad0d948e6379 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 058ba59373cc75263dc5dddefa9c5a8844c1080a..5e2ad24517e187c1c83352feeb81ba6fb19861b7 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 86c644ce629cd8a7704e986c99957c3071e622fb..de118a9b851e3632354f6838a78da700b6a400e4 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 635e3eee0ef78021f792b66ab45b3df7bebd4f0e..96993bcf257750c76b43c49d50d2313b12442166 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 9229ee94d2f9bf98c52a871549bb5a191b098232..5af943e0ad1bc9980ca6f9c52b4cc6b10c1f5956 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 acd1731dd28dd31ea3fa8b5b89d663cddced158e..23286baa3333ed535aab5448decd1d2b8fec074a 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 a669b2f1b032e4ed7e951bf0b6b4c20979dfea6e..109b80571f4500c0ad2d2526997985b9b3d3668c 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 fc72dc98d2fbbe8dda14c6316402bfed4dd100e7..76a2bf7d8af64259d8e094dce9413ca84b4fd500 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 f05bfaa7fd20dec32f0eab59e64d0a322861c6b0..2a364a363221960de5e78c1cd26134fcda75bdfd 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 0000000000000000000000000000000000000000..161e84155fbeb0c4f317bdf15c7251140bf3549c
--- /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 0000000000000000000000000000000000000000..0437c8816aa2b083a50fe8073ce233808740a075
--- /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 0000000000000000000000000000000000000000..e984205b8f4ded729d07b6a92c8a305a125111e9
--- /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 0000000000000000000000000000000000000000..fccc0f9a21360fd8e1df0bbb3c82931f3d46de3a
--- /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 5a6249b9cb33c9cacc3c86446b65fabcd0fd41cb..5c780b45a7b9995f3d6a341a47136f7f26c9f767 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 bbeedf4ba8595b677263476f3a1bf819db083425..e435ea8944df7595c087572a043ef6b71af23a9c 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 cc87e03cbce36f35d20c2c02577a0bc07455aea1..4506a8b84e2c671140ac26802d87e7fe1e5dea56 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 5d780e06aa171fb6353bc3c5af3d04d09bb76c47..0b24598d6eeb81b767bfc5e3ad1501b19cf2c194 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 c4785b36853df6e11b794b3f6b9a944a4163e941..7c334602eeae117754d9201661d8c9f3bdff6e7d 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 2c7fc356db5be3d03f20231a83858d9e7b19fc42..69c95063fe6c472fa1727c2cd21ce4bce7647c72 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 6e897e4853fd98768a3905a6811f9fd80ce47ca3..9740726c01f3e91fc35b44374086ae2e2fc2144a 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 a5c5f7d854e7b690113e9f2c21e5154f02c27306..2d9123091ea75f58036953316fcf7971c1f0cb5f 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 188b7d977db67a0ae2a2c67afed0d8129f45926b..32920359b08d1522cdb9c30721e40da38c711efc 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 14b4e30c6cb2ac0eaa167288166eea0f7f705e3e..41bebb11df4bd5f59c5b4d9dc073ecb010156b66 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 ffa4b111d1c30ab05340ed9586ae1c166d269276..903f22131741fea8a504b3a154e1443623537012 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 0c5024ba7dadce13a08a97742ec3c69ad4164bbf..342b41d255963ec864477525ca77729ee0118cab 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);
+}