ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -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

3
src/sql/azdata.d.ts vendored
View File

@@ -3238,6 +3238,9 @@ declare module 'azdata' {
export interface LoadingComponentProperties { export interface LoadingComponentProperties {
loading?: boolean; loading?: boolean;
showText?: boolean;
loadingText?: string;
loadingCompletedText?: string;
} }
export interface DivContainerProperties extends ComponentProperties { export interface DivContainerProperties extends ComponentProperties {

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

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

@@ -7,6 +7,11 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center;
}
.modelview-loadingComponent-status-text {
margin-left: 5px;
} }
.vs .modelview-loadingComponent-spinner { .vs .modelview-loadingComponent-spinner {
@@ -27,3 +32,14 @@
.modelview-loadingComponent-content-loading { .modelview-loadingComponent-content-loading {
display: none; 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;
}