ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-16 17:22:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

improve the loading component (#8251)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

27
src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
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;
}
}

18
src/sql/workbench/browser/modelComponents/media/loadingComponent.css
View File

@@ -7,6 +7,11 @@
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.modelview-loadingComponent-status-text {
margin-left: 5px;
}
.vs .modelview-loadingComponent-spinner {
@@ -26,4 +31,15 @@
.modelview-loadingComponent-content-loading {
display: none;
}
}
/* We want to make this on DOM but not visible so that screen reader can read the status message */
.modelview-loading-component-status-message {
top: -1;
left: -1px;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}