ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-02 01:25:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding wizard and dialog footer loading spinner (#21230)

Browse Source 
* Adding wizard and dialog loading

* Moving apis to proposed

* fixing namespace

* Only firing event when the value changes

* Only firing when value is changed

* Adding loading complete message to dialog and wizard

* Registering listeners and making a new base interface for loading components

* Fixing api comment

* Renaming prop to loadingCompleted

* old loading icon
This commit is contained in:
Aasim Khan
2022-11-30 12:18:34 -08:00
committed by GitHub
parent 62d5c1f2d6
commit c0a194df4a
12 changed files with 242 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/workbench/services/dialog/browser/customDialogService.ts
View File

@@ -9,8 +9,8 @@ import { Dialog, Wizard } from 'sql/workbench/services/dialog/common/dialogTypes
import { IModalOptions } from 'sql/workbench/browser/modal/modal';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export const DefaultDialogOptions: IModalOptions = { hasBackButton: false, width: 'narrow', hasErrors: true };
export const DefaultWizardOptions: IModalOptions = { hasBackButton: false, width: 'wide', hasErrors: true };
export const DefaultDialogOptions: IModalOptions = { hasBackButton: false, width: 'narrow', hasErrors: true, hasSpinner: true };
export const DefaultWizardOptions: IModalOptions = { hasBackButton: false, width: 'wide', hasErrors: true, hasSpinner: true };
export class CustomDialogService {
private _dialogModals = new Map<Dialog, DialogModal>();

12
src/sql/workbench/services/dialog/browser/dialogModal.ts
View File

@@ -93,7 +93,17 @@ export class DialogModal extends Modal {
};
messageChangeHandler(this._dialog.message);
this._dialog.onMessageChange(message => messageChangeHandler(message));
this._register(this._dialog.onMessageChange(message => messageChangeHandler(message)));
this._register(this._dialog.onLoadingChange((loadingState) => {
this.spinner = loadingState;
}));
this._register(this._dialog.onLoadingTextChange((loadingText) => {
this._modalOptions.spinnerTitle = loadingText;
}));
this._register(this._dialog.onLoadingCompletedTextChange((loadingCompletedText) => {
this._modalOptions.onSpinnerHideText = loadingCompletedText;
}));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requireDialogValid: boolean = false): Button {

16
src/sql/workbench/services/dialog/browser/wizardModal.ts
View File

@@ -96,7 +96,21 @@ export class WizardModal extends Modal {
};
messageChangeHandler(this._wizard.message);
this._wizard.onMessageChange(message => messageChangeHandler(message));
this._register(this._wizard.onMessageChange(message => messageChangeHandler(message)));
this._register(this._wizard.onLoadingChange((loadingState) => {
this.spinner = loadingState;
}));
this._register(this._wizard.onLoadingChange((loadingState) => {
this.spinner = loadingState;
}));
this._register(this._wizard.onLoadingTextChange((loadingText) => {
this._modalOptions.spinnerTitle = loadingText;
}));
this._register(this._wizard.onLoadingCompletedTextChange((loadingCompletedText) => {
this._modalOptions.onSpinnerHideText = loadingCompletedText;
}));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false, index?: number): Button {

87
src/sql/workbench/services/dialog/common/dialogTypes.ts
View File

@@ -53,6 +53,16 @@ export class Dialog extends ModelViewPane {
public customButtons: DialogButton[] = [];
private _onMessageChange = new Emitter<DialogMessage | undefined>();
public readonly onMessageChange = this._onMessageChange.event;
private _loading: boolean = false;
private _loadingText: string;
private _loadingCompletedText: string;
private _onLoadingChange = new Emitter<boolean | undefined>();
private _onLoadingTextChange = new Emitter<string | undefined>();
private _onLoadingCompletedTextChange = new Emitter<string | undefined>();
public readonly onLoadingChange = this._onLoadingChange.event;
public readonly onLoadingTextChange = this._onLoadingTextChange.event;
public readonly onLoadingCompletedTextChange = this._onLoadingCompletedTextChange.event;
private _message: DialogMessage | undefined;
private _closeValidator: CloseValidator | undefined;
@@ -87,6 +97,39 @@ export class Dialog extends ModelViewPane {
this._onMessageChange.fire(this._message);
}
public get loading(): boolean {
return this._loading;
}
public set loading(value: boolean) {
if (this.loading !== value) {
this._loading = value;
this._onLoadingChange.fire(this._loading);
}
}
public get loadingText(): string | undefined {
return this._loadingText;
}
public set loadingText(value: string | undefined) {
if (this.loadingText !== value) {
this._loadingText = value;
this._onLoadingTextChange.fire(this._loadingText);
}
}
public get loadingCompletedText(): string | undefined {
return this._loadingCompletedText;
}
public set loadingCompletedText(value: string | undefined) {
if (this._loadingCompletedText !== value) {
this._loadingCompletedText = value;
this._onLoadingCompletedTextChange.fire(this._loadingCompletedText);
}
}
public registerCloseValidator(validator: CloseValidator): void {
this._closeValidator = validator;
}
@@ -247,6 +290,15 @@ export class Wizard {
private _message: DialogMessage | undefined;
public displayPageTitles: boolean = false;
public width: DialogWidth | undefined;
private _loading: boolean = false;
private _loadingText: string;
private _loadingCompletedText: string;
private _onLoadingChange = new Emitter<boolean | undefined>();
private _onLoadingTextChange = new Emitter<string | undefined>();
private _onLoadingCompletedTextChange = new Emitter<string | undefined>();
public readonly onLoadingChange = this._onLoadingChange.event;
public readonly onLoadingTextChange = this._onLoadingTextChange.event;
public readonly onLoadingCompletedTextChange = this._onLoadingCompletedTextChange.event;
constructor(public title: string,
public readonly name: string,
@@ -329,4 +381,39 @@ export class Wizard {
this._message = value;
this._onMessageChange.fire(this._message);
}
public get loading(): boolean {
return this._loading;
}
public set loading(value: boolean) {
if (this.loading !== value) {
this._loading = value;
this._onLoadingChange.fire(this._loading);
}
}
public get loadingText(): string | undefined {
return this._loadingText;
}
public set loadingText(value: string | undefined) {
if (this.loadingText !== value) {
this._loadingText = value;
this._onLoadingTextChange.fire(this._loadingText);
}
}
public get loadingCompletedText(): string | undefined {
return this._loadingCompletedText;
}
public set loadingCompletedText(value: string | undefined) {
if (this._loadingCompletedText !== value) {
this._loadingCompletedText = value;
this._onLoadingCompletedTextChange.fire(this._loadingCompletedText);
}
}
}