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:
parent
e3a7cbf935
commit
421feb8e72
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user