diff --git a/client/src/app/core/ui-services/overlay.service.ts b/client/src/app/core/ui-services/overlay.service.ts index 3d7ab98fc..67dd3637f 100644 --- a/client/src/app/core/ui-services/overlay.service.ts +++ b/client/src/app/core/ui-services/overlay.service.ts @@ -1,33 +1,11 @@ import { Injectable } from '@angular/core'; -import { MatDialog, MatDialogRef, ProgressSpinnerMode } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { Observable, Subject } from 'rxjs'; import { largeDialogSettings } from 'app/shared/utils/dialog-settings'; import { SuperSearchComponent } from 'app/site/common/components/super-search/super-search.component'; -/** - * Optional configuration for the spinner. - */ -export interface SpinnerConfig { - /** - * The mode of the spinner. Defaults to `'indeterminate'` - */ - mode?: ProgressSpinnerMode; - /** - * The diameter of the svg. - */ - diameter?: number; - /** - * The width of the stroke of the spinner. - */ - stroke?: number; - /** - * An optional value, if the spinner is in `'determinate'-mode`. - */ - value?: number; -} - /** * Component to control the visibility of components, that overlay the whole window. * Like `global-spinner.component` and `super-search.component`. @@ -45,7 +23,7 @@ export class OverlayService { /** * Subject, that holds the visibility and message. The component can observe this. */ - private spinner: Subject<{ isVisible: boolean; text?: string; config?: SpinnerConfig }> = new Subject(); + private spinner: Subject<{ isVisible: boolean; text?: string }> = new Subject(); /** * Boolean, whether appearing of the spinner should be prevented next time. @@ -70,9 +48,9 @@ export class OverlayService { * @param text optional. If the spinner should show a message. * @param preventAppearing optional. Wether to prevent showing the spinner the next time. */ - public setSpinner(isVisible: boolean, text?: string, preventAppearing?: boolean, config?: SpinnerConfig): void { + public setSpinner(isVisible: boolean, text?: string, preventAppearing?: boolean): void { if (!(this.preventAppearingSpinner && !this.spinnerHasAppeared && isVisible)) { - setTimeout(() => this.spinner.next({ isVisible, text, config })); + setTimeout(() => this.spinner.next({ isVisible, text })); if (isVisible) { this.spinnerHasAppeared = true; } @@ -85,7 +63,7 @@ export class OverlayService { * * @returns class member `visibility`. */ - public getSpinner(): Observable<{ isVisible: boolean; text?: string; config?: SpinnerConfig }> { + public getSpinner(): Observable<{ isVisible: boolean; text?: string }> { return this.spinner; } diff --git a/client/src/app/site/common/components/global-spinner/global-spinner.component.html b/client/src/app/site/common/components/global-spinner/global-spinner.component.html index de29fe8af..432c34768 100644 --- a/client/src/app/site/common/components/global-spinner/global-spinner.component.html +++ b/client/src/app/site/common/components/global-spinner/global-spinner.component.html @@ -1,12 +1,8 @@ -
- -
{{ text }}
+
+
+
+
{{ text }}
+
diff --git a/client/src/app/site/common/components/global-spinner/global-spinner.component.scss b/client/src/app/site/common/components/global-spinner/global-spinner.component.scss index 9cadf9c96..b0cbe5125 100644 --- a/client/src/app/site/common/components/global-spinner/global-spinner.component.scss +++ b/client/src/app/site/common/components/global-spinner/global-spinner.component.scss @@ -1,13 +1,51 @@ @import '~@angular/material/theming'; @mixin os-global-spinner-theme($theme) { - .spinner { - display: inline-block; - } + .spinner-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; - .text { - text-align: center; - color: white; - font-size: 1.4rem; + .spinner-text { + text-align: center; + color: white; + font-size: 1.4rem; + } + + .spinner-component { + display: inline-block; + height: 100px; + width: 100px; + border: 6px solid #000; + border-radius: 100%; + opacity: 0.2; + + animation: rotation 1s infinite linear; + + &:before { + position: absolute; + top: -6px; + left: -6px; + + content: ''; + display: block; + height: 100%; + width: 100%; + border-radius: 100%; + border-style: solid; + border-width: 6px; + border-color: white transparent transparent; + } + + @keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } + } + } } } diff --git a/client/src/app/site/common/components/global-spinner/global-spinner.component.ts b/client/src/app/site/common/components/global-spinner/global-spinner.component.ts index 99e7ae751..f7a81d5df 100644 --- a/client/src/app/site/common/components/global-spinner/global-spinner.component.ts +++ b/client/src/app/site/common/components/global-spinner/global-spinner.component.ts @@ -1,11 +1,10 @@ // External imports import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; -import { ProgressSpinnerMode } from '@angular/material'; import { TranslateService } from '@ngx-translate/core'; import { Subscription } from 'rxjs'; -import { OverlayService, SpinnerConfig } from 'app/core/ui-services/overlay.service'; +import { OverlayService } from 'app/core/ui-services/overlay.service'; /** * Component for the global spinner. @@ -16,26 +15,6 @@ import { OverlayService, SpinnerConfig } from 'app/core/ui-services/overlay.serv styleUrls: ['./global-spinner.component.scss'] }) export class GlobalSpinnerComponent implements OnInit, OnDestroy { - /** - * Defines the mode of the spinner. In `'determinate'-mode` a value can be passed to the spinner. - */ - public mode: ProgressSpinnerMode = 'indeterminate'; - - /** - * Defines the diameter of the spinner. Defaults to `140`. - */ - public diameter = 140; - - /** - * Defines the stroke-width of the spinner. Defaults to `10`. - */ - public stroke = 10; - - /** - * If the `'determinate'-mode` is applied, a value can be given to the spinner to indicate a progress. - */ - public value: number; - /** * Text, which will be shown if the spinner is shown. */ @@ -57,6 +36,7 @@ export class GlobalSpinnerComponent implements OnInit, OnDestroy { private LOADING = this.translate.instant('Loading data. Please wait ...'); /** + * Constructor * * @param overlayService Reference to the service for this spinner. * @param translate Service to get translations for the messages. @@ -74,15 +54,12 @@ export class GlobalSpinnerComponent implements OnInit, OnDestroy { public ngOnInit(): void { this.spinnerSubscription = this.overlayService // subscribe to the service. .getSpinner() - .subscribe((value: { isVisible: boolean; text: string; config?: SpinnerConfig }) => { + .subscribe((value: { isVisible: boolean; text: string }) => { this.isVisible = value.isVisible; this.text = this.translate.instant(value.text); if (!this.text) { this.text = this.LOADING; } - if (value.config) { - this.setConfig(value.config); - } this.cd.detectChanges(); }); } @@ -99,16 +76,4 @@ export class GlobalSpinnerComponent implements OnInit, OnDestroy { } this.spinnerSubscription = null; } - - /** - * Function to set properties to the spinner. - * - * @param config The `SpinnerConfig`. - */ - private setConfig(config?: SpinnerConfig): void { - this.mode = config.mode || this.mode; - this.diameter = config.diameter || this.diameter; - this.stroke = config.stroke || this.stroke; - this.value = config.value || this.value; - } }