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 b1c7e79d146dd458dcaf2dfd06894e17a85510b9..0253e5e8cbbe8ddb423370e56d17f1061239fa71 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,7 +4,7 @@
fxFill>
<div fxLayout="row"
fxLayoutAlign="center">
- <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
<mat-card *ngIf="room">
<div fxLayout="row">
<span class="fill-remaining-space"></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 7d4d2c981f19e90ca9fd5809796add2756c0c1a5..e555b3b8887d040ae1d8706dccb2c5dee245e9ec 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
@@ -143,7 +143,3 @@ 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 5327030937e706f682964b34a53b6c608988d7c9..2c2a037b2ac070b6bfcd6eb83fc1908e65764e7e 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,7 +4,7 @@
fxFill>
<div fxLayout="row"
fxLayoutAlign="center">
- <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="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 cf286175f300ab35ffa318d6e016fa564376254b..7d5ca669e29422bcd1504837eb371de897a11551 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
@@ -147,7 +147,3 @@ 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 e67dc575840ca736ce55c150f7131ba890979152..37304ea64cecd70d8eb214d52e0514c4933161c2 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">
- <app-mat-spinner-overlay *ngIf="isLoading" overlay="true" useCustomCSSColor="true"></app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="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 29022f84107fce57d11d2a804642158d859d5b0a..4245f09a284b6dedbf446784aa4fb8e810471ce8 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
@@ -103,7 +103,3 @@ 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/cloud-configuration/cloud-configuration.component.scss b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
index fed401a5ea269b099a385c2caf760024759791b1..20162aa28dbc89407cb9d659662c08ca9100ecc0 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.scss
@@ -173,8 +173,8 @@ mat-icon {
margin-right: auto;
}
-::ng-deep.mat-drawer-backdrop.mat-drawer-shown {
- display: none;
+::ng-deep .mat-drawer-backdrop {
+ opacity: 0;
}
::ng-deep.mat-slider-track-background {
diff --git a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
index 8139d030531f46da361156a5bca808968e025551..209c571529cc6c1174af4512d16639806d591f86 100644
--- a/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
+++ b/src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts
@@ -4,6 +4,7 @@ import { TagCloudComponent } from '../../tag-cloud/tag-cloud.component';
import { WeightClass } from './weight-class.interface';
import { TagCloudMetaDataCount } from '../../../../services/util/tag-cloud-data.service';
import { CloudParameters, CloudTextStyle } from '../../../../utils/cloud-parameters';
+import { AppComponent } from '../../../../app.component';
@Component({
selector: 'app-cloud-configuration',
@@ -26,7 +27,7 @@ export class CloudConfigurationComponent implements OnInit {
alphabeticalSorting: boolean;
rotation: number;
highestWeight: number;
- step:number = 10;
+ step: number = 10;
weightClasses: WeightClass[] = [
{
maxTagNumber: 20,
@@ -99,18 +100,19 @@ export class CloudConfigurationComponent implements OnInit {
allowManualTagNumber: false
},
];
- MinFont:number;
- MaxFont:number;
+ MinFont: number;
+ MaxFont: number;
isTestCloud = false;
- constructor(private translateService: TranslateService) { }
+ constructor(private translateService: TranslateService) {
+ }
ngOnInit() {
this.translateService.use(localStorage.getItem('currentLang'));
this.cloudParameters = new CloudParameters(this.parent.currentCloudParameters);
this.defaultCloudParameters = new CloudParameters(this.parent.currentCloudParameters);
- this.parent.dataManager.getMetaData().subscribe((value)=>{
+ this.parent.dataManager.getMetaData().subscribe((value) => {
if (!value) {
return;
}
@@ -141,20 +143,20 @@ export class CloudConfigurationComponent implements OnInit {
parseArrayToJsonWeightClasses() {
this.cloudParameters.cloudWeightSettings.forEach((element, i) => {
- this.weightClasses[i].tagColor = element.color;
- this.weightClasses[i].actualTagNumber = this.countPerWeight[i];
- this.weightClasses[i].rotationAngle = element.rotation;
- this.weightClasses[i].maxTagNumber = (element.maxVisibleElements == -1 || element.maxVisibleElements == 0) ? this.weightClasses[i].actualTagNumber : element.maxVisibleElements;
- this.weightClasses[i].allowManualTagNumber = element.allowManualTagNumber;
+ this.weightClasses[i].tagColor = element.color;
+ this.weightClasses[i].actualTagNumber = this.countPerWeight[i];
+ this.weightClasses[i].rotationAngle = element.rotation;
+ this.weightClasses[i].maxTagNumber = (element.maxVisibleElements == -1 || element.maxVisibleElements == 0) ? this.weightClasses[i].actualTagNumber : element.maxVisibleElements;
+ this.weightClasses[i].allowManualTagNumber = element.allowManualTagNumber;
});
}
parseJsonToArrayWeightClasses() {
this.weightClasses.forEach((element, i) => {
this.cloudParameters.cloudWeightSettings[i].allowManualTagNumber = element.allowManualTagNumber;
- if(element.allowManualTagNumber == true){
+ if (element.allowManualTagNumber == true) {
this.cloudParameters.cloudWeightSettings[i].maxVisibleElements = element.maxTagNumber == 0 ? -1 : element.maxTagNumber;
- }else{
+ } else {
this.cloudParameters.cloudWeightSettings[i].maxVisibleElements = -1;
}
this.cloudParameters.cloudWeightSettings[i].color = element.tagColor;
@@ -167,22 +169,35 @@ export class CloudConfigurationComponent implements OnInit {
this.parent.setCloudParameters(this.cloudParameters, false);
}
- cancel() {
+ closePanel() {
this.parent.tagCloudDataManager.demoActive = false;
+ this.parent.drawer.close();
+ this.readMaxFont();
+ const defaultScale = AppComponent.rescale.getInitialScale();
+ if (defaultScale !== 1) {
+ AppComponent.rescale.setDefaultScale(defaultScale);
+ this.parent.updateTagCloud();
+ }
+ }
+
+ openPanel() {
+ if (AppComponent.rescale.getInitialScale() !== 1) {
+ AppComponent.rescale.setDefaultScale(1);
+ }
+ }
+
+ cancel() {
this.parent.setCloudParameters(this.defaultCloudParameters);
this.cloudParameters = new CloudParameters(this.defaultCloudParameters);
- this.parent.configurationOpen = false;
this.setStep(0);
- this.readMaxFont();
+ this.closePanel();
}
save() {
- this.parent.tagCloudDataManager.demoActive = false;
this.parent.setCloudParameters(this.cloudParameters);
this.defaultCloudParameters = new CloudParameters(this.cloudParameters);
- this.parent.configurationOpen = false;
this.setStep(0);
- this.readMaxFont();
+ this.closePanel();
}
toggleExtendedView() {
@@ -217,19 +232,19 @@ export class CloudConfigurationComponent implements OnInit {
this.step--;
}
- reset(){
+ reset() {
this.parent.resetColorsToTheme();
- this.parent.configurationOpen = false;
this.cloudParameters = new CloudParameters(this.parent.currentCloudParameters);
this.defaultCloudParameters = new CloudParameters(this.parent.currentCloudParameters);
- this.readMaxFont();
+ this.closePanel();
}
- italicChecked(event){
+ italicChecked(event) {
this.cloudParameters.fontStyle = event.checked === true ? 'italic' : 'normal';
this.valueChanged();
}
- boldChecked(event){
+
+ boldChecked(event) {
this.cloudParameters.fontWeight = event.checked === true ? 'bold' : 'normal';
this.valueChanged();
}
@@ -238,20 +253,20 @@ export class CloudConfigurationComponent implements OnInit {
return this.cloudParameters.fontWeight === 'bold';
}
- readMaxFont(){
- let valMax:number = this.cloudParameters.fontSizeMax;
- let valMin:number = this.cloudParameters.fontSizeMin;
- this.MaxFont = Math.floor(valMax/valMin);
+ readMaxFont() {
+ let valMax: number = this.cloudParameters.fontSizeMax;
+ let valMin: number = this.cloudParameters.fontSizeMin;
+ this.MaxFont = Math.floor(valMax / valMin);
}
- calcMaxFont(event,setMin:Boolean){
- let val:number = Number(event.target.value);
- if(val >0 && val <=10 && !setMin){
+ calcMaxFont(event, setMin: Boolean) {
+ let val: number = Number(event.target.value);
+ if (val > 0 && val <= 10 && !setMin) {
this.cloudParameters.fontSizeMax = this.cloudParameters.fontSizeMin * val;
this.MaxFont = val;
this.valueChanged();
}
- if(setMin){
+ if (setMin) {
this.cloudParameters.fontSizeMax = this.cloudParameters.fontSizeMin * this.MaxFont;
this.valueChanged();
}
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 aeb369475c8246c8b0e2029073ea3a6b20eeec3f..0347f4a1c2c13172c71a48055975ddc19f33d6db 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
@@ -125,10 +125,7 @@
{{ 'comment-page.grammar-check' | translate}}
<mat-icon *ngIf="grammarChecker.isSpellchecking"
class="spinner-container">
- <app-mat-spinner-overlay diameter="20"
- strokeWidth="2"
- [useCustomCSSColor]="true">
- </app-mat-spinner-overlay>
+ <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
</mat-icon>
</button>
</ars-col>
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 627a3b4fc074e4df20eccc12bbae1e46a25bcd5b..290fdaffbb54c2ace7939b1195e61c785becf998 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>
- <app-mat-spinner-overlay *ngIf="isLoading" useCustomCSSColor="true"></app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading"></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 8777cc69a22994426afdb48325b7ad0d948e6379..29d07cae3203aad421599e3cf54125088ef00b0e 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
@@ -138,7 +138,3 @@
.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 5e2ad24517e187c1c83352feeb81ba6fb19861b7..222f911ca6e74c857377ccd66b5be3d498e777a8 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>
- <app-mat-spinner-overlay *ngIf="isLoading" [useCustomCSSColor]="true"></app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>
</div>
<div *ngIf="!isLoading">
<mat-accordion hideToggle>
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 de118a9b851e3632354f6838a78da700b6a400e4..86c644ce629cd8a7704e986c99957c3071e622fb 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,7 +181,3 @@ mat-dialog-content {
color: black;
width: 100%;
}
-
-app-mat-spinner-overlay {
- color: var(--primary);
-}
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
index 5ef513b80807bb6edda44d9def652adf0395c0a5..f5e3f893c2d878a85eafe33baf9ad06610279ed7 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.html
@@ -67,6 +67,7 @@
autofocus
autocomplete="off"
type="text"
+ (keyup)="checkForEnter($event)"
[(ngModel)]="question">
<button *ngIf="question"
matSuffix
diff --git a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
index 3e80e92eb51beb624a3a9f3acf9316140e37fcd6..769f5d25a10dbe4577d94428659968d12477551c 100644
--- a/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
+++ b/src/app/components/shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component.ts
@@ -143,9 +143,7 @@ export class TopicCloudFilterComponent implements OnInit {
return;
}
- const params = CloudParameters.currentParameters;
- params.question = this.question;
- CloudParameters.currentParameters = params;
+ localStorage.setItem('tag-cloud-question', this.question);
CommentFilter.currentFilter = filter;
@@ -153,6 +151,12 @@ export class TopicCloudFilterComponent implements OnInit {
};
}
+ checkForEnter(e: KeyboardEvent) {
+ if (e.key === 'Enter') {
+ this.confirmButtonActionCallback()();
+ }
+ }
+
private isUpdatable(): boolean {
if (this.comments.length < 3) {
return false;
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 96993bcf257750c76b43c49d50d2313b12442166..57c911f4287403b2c895640e6bb8d85afa9b6e5f 100644
--- a/src/app/components/shared/comment-answer/comment-answer.component.html
+++ b/src/app/components/shared/comment-answer/comment-answer.component.html
@@ -95,10 +95,7 @@
{{ 'comment-page.grammar-check' | translate}}
<mat-icon *ngIf="grammarChecker.isSpellchecking"
class="spinner-container">
- <app-mat-spinner-overlay diameter="20"
- strokeWidth="2"
- [useCustomCSSColor]="true">
- </app-mat-spinner-overlay>
+ <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
</mat-icon>
</button>
</ars-col>
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 23286baa3333ed535aab5448decd1d2b8fec074a..53c769b51c4b1bf039183cbeb9f1c12faabfe4a7 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -250,10 +250,7 @@
<mat-icon>add</mat-icon>
</button>
-<app-mat-spinner-overlay *ngIf="isLoading"
- overlay="true"
- [useCustomCSSColor]="true">
-</app-mat-spinner-overlay>
+<app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : commentsFilteredByTime"
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 109b80571f4500c0ad2d2526997985b9b3d3668c..21d69eedf08719ea39897b7f03387e9397066408 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -258,7 +258,3 @@ h3 {
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 76a2bf7d8af64259d8e094dce9413ca84b4fd500..1d8f72a6ab3c06dc65b2df6431990c84828187ed 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
@@ -19,10 +19,7 @@
style="margin-right: 5px;">{{buttonIcon}}</mat-icon>
{{ buttonsLabelSection + '.' + confirmButtonLabel | translate}}
<mat-icon *ngIf="showLoadingCycle" class="spinner-container">
- <app-mat-spinner-overlay diameter="20"
- strokeWidth="2"
- [useCustomCSSColor]="true">
- </app-mat-spinner-overlay>
+ <app-mat-spinner-overlay diameter="20" strokeWidth="2" [color]="'on-primary'"></app-mat-spinner-overlay>
</mat-icon>
</button>
<button
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
index 161e84155fbeb0c4f317bdf15c7251140bf3549c..33aa502fc768480606f36896c5ad111def2bff13 100644
--- 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
@@ -1,5 +1,5 @@
<ng-container *ngIf="overlay;else progressSpinner">
- <div class="overlay">
+ <div class="overlay {{color}}">
<div class="center">
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
@@ -9,9 +9,9 @@
<mat-progress-spinner
#containerRef
[ngClass]="{'inline-spinner': !overlay}"
+ class="{{color}}"
[diameter]="diameter"
[mode]="mode"
- [color]="color"
[strokeWidth]="strokeWidth"
[value]="value">
</mat-progress-spinner>
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
index 0437c8816aa2b083a50fe8073ce233808740a075..a96b55fcf08f20caff61f685f749e67876eb150b 100644
--- 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
@@ -13,15 +13,39 @@ mat-progress-spinner {
.overlay {
height: 100vh;
width: 100%;
- background-color: rgba(0, 0, 0, 0.286);
+ opacity: 0.2;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
+.overlay.primary {
+ background-color: var(--primary);
+}
+
+.overlay.secondary {
+ background-color: var(--secondary);
+}
+
mat-progress-spinner.inline-spinner {
display: inline;
margin-left: 0.25em;
top: 0.115em;
}
+
+mat-progress-spinner.primary, mat-progress-spinner.on-primary {
+ color: var(--on-primary);
+}
+
+mat-progress-spinner.primary.inline-spinner {
+ color: var(--primary);
+}
+
+mat-progress-spinner.secondary, mat-progress-spinner.on-secondary {
+ color: var(--on-secondary);
+}
+
+mat-progress-spinner.secondary.inline-spinner {
+ color: var(--secondary);
+}
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
index fccc0f9a21360fd8e1df0bbb3c82931f3d46de3a..e04fcd09496f6749345fcb3ee28f6dee66f53a37 100644
--- 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
@@ -9,7 +9,8 @@ import {
ViewChild
} from '@angular/core';
import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
-import { ThemePalette } from '@angular/material/core';
+
+export type SpinnerTheme = 'primary' | 'on-primary' | 'secondary' | 'on-secondary';
@Component({
selector: 'app-mat-spinner-overlay',
@@ -24,12 +25,11 @@ export class MatSpinnerOverlayComponent implements OnInit, AfterViewInit {
@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;
+ @Input() color: SpinnerTheme = 'primary';
constructor(private element: ElementRef<HTMLElement>,
private renderer2: Renderer2) {
@@ -53,7 +53,7 @@ export class MatSpinnerOverlayComponent implements OnInit, AfterViewInit {
return;
}
this.renderer2.setStyle(svg[0], 'position', 'static');
- if (this.useCustomCSSColor && svg[0].firstElementChild) {
+ if (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 5c780b45a7b9995f3d6a341a47136f7f26c9f767..6161296e31747039d2026a4d252ea2f5908d3377 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,7 +1,4 @@
-<app-mat-spinner-overlay *ngIf="isLoading"
- [overlay]="true"
- [useCustomCSSColor]="true">
-</app-mat-spinner-overlay>
+<app-mat-spinner-overlay *ngIf="isLoading" [overlay]="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>
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 e435ea8944df7595c087572a043ef6b71af23a9c..58dac5ddeb9628f3b4711f21fac53c92e5686cc1 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
@@ -309,7 +309,3 @@ h2 {
font-weight: normal !important;
padding-top: 10px !important;
}
-
-app-mat-spinner-overlay {
- color: var(--primary);
-}
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 0b24598d6eeb81b767bfc5e3ad1501b19cf2c194..ecbb031e7aa4e1dc0c2924af2380dac708ea7872 100644
--- a/src/app/components/shared/quiz-now/quiz-now.component.html
+++ b/src/app/components/shared/quiz-now/quiz-now.component.html
@@ -1,7 +1,4 @@
-<app-mat-spinner-overlay *ngIf="isLoading"
- overlay="true"
- useCustomCSSColor="true">
-</app-mat-spinner-overlay>
+<app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
<div class="container">
<iframe class="responsive-iframe" [src]="urlSafe"
(load)="isLoading = false"
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 7c334602eeae117754d9201661d8c9f3bdff6e7d..c4785b36853df6e11b794b3f6b9a944a4163e941 100644
--- a/src/app/components/shared/quiz-now/quiz-now.component.scss
+++ b/src/app/components/shared/quiz-now/quiz-now.component.scss
@@ -16,7 +16,3 @@ iframe {
width: 100%;
height: 100%;
}
-
-app-mat-spinner-overlay {
- color: var(--primary);
-}
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 9740726c01f3e91fc35b44374086ae2e2fc2144a..cb1e4025c63f67922518909b9055829a50e24da6 100644
--- a/src/app/components/shared/room-list/room-list.component.html
+++ b/src/app/components/shared/room-list/room-list.component.html
@@ -1,7 +1,6 @@
<div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <app-mat-spinner-overlay [useCustomCSSColor]="true" diameter="80" strokeWidth="8">
- </app-mat-spinner-overlay>
+ <app-mat-spinner-overlay diameter="80" strokeWidth="8"></app-mat-spinner-overlay>
</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 2d9123091ea75f58036953316fcf7971c1f0cb5f..a5c5f7d854e7b690113e9f2c21e5154f02c27306 100644
--- a/src/app/components/shared/room-list/room-list.component.scss
+++ b/src/app/components/shared/room-list/room-list.component.scss
@@ -100,7 +100,3 @@ th, tr {
.warn {
color: var(--red) !important;
}
-
-app-mat-spinner-overlay {
- color: var(--primary);
-}
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 5d61d5aba8ecef9d1c41f3e52b674d05b93a4d01..d9c02c754ef0e66571e3fe232902d212454864a1 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.html
@@ -3,20 +3,17 @@
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>
- <mat-drawer-container class="spacyTagCloudContainer">
- <mat-drawer [(opened)]="configurationOpen" position="end" mode="over">
- <app-cloud-configuration [parent]="this"></app-cloud-configuration>
+ <mat-drawer-container class="spacyTagCloudContainer" [hasBackdrop]="true">
+ <mat-drawer position="end" mode="over" (closed)="cloudComponent.closePanel()" (opened)="cloudComponent.openPanel()">
+ <app-cloud-configuration #cloudComponent [parent]="this"></app-cloud-configuration>
</mat-drawer>
<mat-drawer-content>
+ <h1 *ngIf="user && user.role > 0 && question" class="tag-cloud-brainstorming-question mat-display-1">
+ {{question}}
+ </h1>
<ars-fill ars-flex-box>
<app-tag-cloud-pop-up></app-tag-cloud-pop-up>
- <app-mat-spinner-overlay *ngIf="isLoading"
- overlay="true"
- [useCustomCSSColor]="true">
- </app-mat-spinner-overlay>
+ <app-mat-spinner-overlay *ngIf="isLoading" overlay="true"></app-mat-spinner-overlay>
<angular-tag-cloud
id="tagCloudComponent"
class="spacyTagCloud"
@@ -33,15 +30,15 @@
</angular-tag-cloud>
<app-active-user [room]="this.room" [top]="120"></app-active-user>
</ars-fill>
+ <button *ngIf="((user && user.role > 0) || (room && !room.questionsBlocked)) && drawer && !drawer.opened"
+ mat-fab
+ mat-icon-button
+ aria-labelledby="add"
+ class="fab_add_comment"
+ (click)="createCommentWrapper.openCreateDialog(this.user)"
+ matTooltip="{{ 'comment-list.add-comment' | translate }}">
+ <mat-icon>add</mat-icon>
+ </button>
</mat-drawer-content>
</mat-drawer-container>
</ars-screen>
-<button *ngIf="((user && user.role > 0) || (room && !room.questionsBlocked)) && !configurationOpen"
- mat-fab
- mat-icon-button
- aria-labelledby="add"
- class="fab_add_comment"
- (click)="createCommentWrapper.openCreateDialog(this.user)"
- matTooltip="{{ 'comment-list.add-comment' | translate }}">
- <mat-icon>add</mat-icon>
-</button>
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 342b41d255963ec864477525ca77729ee0118cab..e277c89c4e79591d037bb07a1d02498f6a39b206 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
@@ -69,7 +69,3 @@ app-tag-cloud-pop-up {
font-family: var(--tag-cloud-font-family, 'Dancing Script');
font-size: 50px;
}
-
-app-mat-spinner-overlay {
- color: var(--primary);
-}
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.ts b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
index f87a6424c3aa73aefb5e9db0c5fa23a8fbe33aa5..b182d018b15ea06560919ccb1d7cb5f8705fc5f6 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.ts
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterContentInit, AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import {
CloudData,
@@ -30,6 +30,7 @@ import { WsRoomService } from '../../../services/websockets/ws-room.service';
import { CloudParameters, CloudTextStyle } from '../../../utils/cloud-parameters';
import { SmartDebounce } from '../../../utils/smart-debounce';
import { Theme } from '../../../../theme/Theme';
+import { MatDrawer } from '@angular/material/sidenav';
class CustomPosition implements Position {
left: number;
@@ -74,6 +75,8 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
@ViewChild(TCloudComponent, { static: false }) child: TCloudComponent;
@ViewChild(TagCloudPopUpComponent) popup: TagCloudPopUpComponent;
+ @ViewChild(MatDrawer) drawer: MatDrawer;
+
@Input() user: User;
@Input() roomId: string;
room: Room;
@@ -93,7 +96,6 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
};
userRole: UserRole;
data: TagComment[] = [];
- configurationOpen = false;
isLoading = true;
headerInterface = null;
themeSubscription = null;
@@ -105,7 +107,7 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
private _calcCanvas: HTMLCanvasElement = null;
private _calcRenderContext: CanvasRenderingContext2D = null;
private _calcFont: string = null;
- private readonly _smartDebounce = new SmartDebounce(1, 1_000);
+ private readonly _smartDebounce = new SmartDebounce(50, 1_000);
private _currentTheme: Theme;
constructor(private commentService: CommentService,
@@ -128,7 +130,7 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
this.translateService.use(lang);
});
this._currentSettings = TagCloudComponent.getCurrentCloudParameters();
- this.question = this._currentSettings.question;
+ this.question = localStorage.getItem('tag-cloud-question');
this._calcCanvas = document.createElement('canvas');
this._calcRenderContext = this._calcCanvas.getContext('2d');
}
@@ -150,7 +152,11 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
if (e === 'createQuestion') {
this.createCommentWrapper.openCreateDialog(this.user);
} else if (e === 'topicCloudConfig') {
- this.configurationOpen = !this.configurationOpen;
+ if (this.drawer.opened) {
+ this.drawer.close();
+ } else {
+ this.drawer.open();
+ }
} else if (e === 'topicCloudAdministration') {
this.dialog.open(TopicCloudAdministrationComponent, {
minWidth: '50%',
@@ -267,7 +273,8 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
resetColorsToTheme() {
const param = new CloudParameters();
param.resetToDefault(this._currentTheme.isDark);
- this.setCloudParameters(param, true);
+ this.setCloudParameters(param, false);
+ CloudParameters.removeParameters();
}
onResize(event: UIEvent): any {
diff --git a/src/app/models/rescale.ts b/src/app/models/rescale.ts
index dfeeb693f5d8b186ddf2e2a0036179c850fe8552..26c79a97bb87c3f91ab4b4c87059615bd690eee4 100644
--- a/src/app/models/rescale.ts
+++ b/src/app/models/rescale.ts
@@ -1,4 +1,3 @@
-
export class Rescale {
private static isFullscreen: boolean;
@@ -12,14 +11,20 @@ export class Rescale {
private state = 0;
public static requestFullscreen() {
- if (Rescale.isFullscreen) {return; }
+ if (Rescale.isFullscreen) {
+ return;
+ }
Rescale.isFullscreen = true;
document.body.requestFullscreen();
}
public static exitFullscreen() {
- if (!Rescale.isFullscreen) {return; }
- if (Rescale.isRescaleFullscreen) {return; }
+ if (!Rescale.isFullscreen) {
+ return;
+ }
+ if (Rescale.isRescaleFullscreen) {
+ return;
+ }
Rescale.isFullscreen = false;
document.exitFullscreen();
}
@@ -52,6 +57,10 @@ export class Rescale {
this.setScale(this.defaultScale);
}
+ public getInitialScale() {
+ return this.cachedScale;
+ }
+
public setScale(scale: number) {
this.scale = scale;
if (this.scale < 0.1) {
@@ -89,7 +98,7 @@ export class Rescale {
this.toggleHeader(true);
this.toggleFooter(true);
}, 600);
- break;
+ break;
case 1:
Rescale.requestFullscreenByRescale();
setTimeout(() => {
@@ -99,8 +108,10 @@ export class Rescale {
setTimeout(() => {
this.toggleRescaler(true);
}, 600);
- break;
- default: console.error('updateState, this should not happen.'); break;
+ break;
+ default:
+ console.error('updateState, this should not happen.');
+ break;
}
}
diff --git a/src/app/utils/cloud-parameters.ts b/src/app/utils/cloud-parameters.ts
index 74d7a02efc87cd6347736816c1a0be5a67d7735c..751bd0b2eef276658caf730bca3f1cd8303fffbb 100644
--- a/src/app/utils/cloud-parameters.ts
+++ b/src/app/utils/cloud-parameters.ts
@@ -51,6 +51,10 @@ export class CloudParameters {
localStorage.setItem('tagCloudConfiguration', JSON.stringify(parameters));
}
+ static removeParameters() {
+ localStorage.removeItem('tagCloudConfiguration');
+ }
+
fontFamily: string;
fontStyle: string;
fontWeight: string;
@@ -65,7 +69,6 @@ export class CloudParameters {
delayWord: number;
randomAngles: boolean;
sortAlphabetically: boolean;
- question: string;
textTransform: CloudTextStyle;
cloudWeightSettings: CloudWeightSettings;
@@ -85,7 +88,6 @@ export class CloudParameters {
this.delayWord = obj.delayWord;
this.randomAngles = obj.randomAngles;
this.sortAlphabetically = obj.sortAlphabetically;
- this.question = obj.question;
this.textTransform = obj.textTransform;
this.cloudWeightSettings = [
{ ...obj.cloudWeightSettings[0] },
@@ -149,7 +151,6 @@ export class CloudParameters {
this.delayWord = 100;
this.randomAngles = false;
this.sortAlphabetically = false;
- this.question = '';
this.textTransform = CloudTextStyle.capitalized;
this.cloudWeightSettings = [
{