Replaces the new spinner with the old one

- The spinner from Angular/Material in `global-spinner.component` is replaced by the old, custom one.

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;
     }
 

client/src/app/site/common/components/global-spinner/global-spinner.component.html

@@ -1,12 +1,8 @@
 <os-overlay *ngIf="isVisible">
-    <div>
+    <div class="spinner-container">
-        <mat-progress-spinner
+        <div>
-            [mode]="mode"
+            <div class="spinner-component"></div>
-            [diameter]="diameter"
+            <div class="spinner-text">{{ text }}</div>
-            [strokeWidth]="stroke"
+        </div>
-            [value]="value"
-            class="spinner"
-        ></mat-progress-spinner>
-        <div class="text">{{ text }}</div>
     </div>
 </os-overlay>

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 {
+    .spinner-container {
-        display: inline-block;
+        display: flex;
-    }
+        justify-content: center;
+        align-items: center;
+        height: 100%;
 
-    .text {
+        .spinner-text {
-        text-align: center;
+            text-align: center;
-        color: white;
+            color: white;
-        font-size: 1.4rem;
+            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);
+                }
+            }
+        }
     }
 }

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;
-    }
 }