Replaces the new spinner with the old one

- The spinner from Angular/Material in `global-spinner.component` is replaced by the old, custom one.
This commit is contained in:
GabrielMeyer 2019-08-26 18:07:18 +02:00
parent e3a7cbf935
commit 421feb8e72
4 changed files with 58 additions and 81 deletions

View File

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

View File

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

View File

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

View File

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