improve the loading component (#8251)

* improve the loading component

* fix unused method warning

* revert the change
This commit is contained in:
Alan Ren
2019-11-07 11:28:38 -08:00
committed by GitHub
parent 7f51921176
commit b364e32beb
3 changed files with 43 additions and 5 deletions

View File

@@ -12,20 +12,23 @@ import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
import * as nls from 'vs/nls';
import { localize } from 'vs/nls';
@Component({
selector: 'modelview-loadingComponent',
template: `
<div class="modelview-loadingComponent-container" role="alert" aria-busy="true" *ngIf="loading">
<div class="modelview-loadingComponent-spinner" *ngIf="loading" [title]=_loadingTitle #spinnerElement></div>
<div role="status" aria-live="polite" class="modelview-loading-component-status-message">
{{getStatusText()}}
</div>
<div class="modelview-loadingComponent-container" aria-busy="true" *ngIf="loading">
<div class="modelview-loadingComponent-spinner" [title]="getStatusText()" #spinnerElement></div>
<div *ngIf="showText" class="modelview-loadingComponent-status-text">{{getStatusText()}}</div>
</div>
<model-component-wrapper #childElement [descriptor]="_component" [modelStore]="modelStore" *ngIf="_component" [ngClass]="{'modelview-loadingComponent-content-loading': loading}">
</model-component-wrapper>
`
})
export default class LoadingComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
public readonly _loadingTitle = nls.localize('loadingMessage', "Loading");
private _component: IComponentDescriptor;
@Input() descriptor: IComponentDescriptor;
@@ -75,8 +78,24 @@ export default class LoadingComponent extends ComponentBase implements IComponen
this.layout();
}
public get showText(): boolean {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.showText, false);
}
public get loadingText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
}
public get loadingCompletedText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
}
public addToContainer(componentDescriptor: IComponentDescriptor): void {
this._component = componentDescriptor;
this.layout();
}
public getStatusText(): string {
return this.loading ? this.loadingText : this.loadingCompletedText;
}
}