Add info/warning/error messages for wizards and dialogs (#1696)

This commit is contained in:
Matt Irvine
2018-06-21 11:55:23 -07:00
committed by GitHub
parent 9d2b206156
commit f5b147ca4b
16 changed files with 238 additions and 30 deletions

View File

@@ -13,8 +13,8 @@ import { Dialog, Wizard, DialogTab } from 'sql/platform/dialog/dialogTypes';
import { IModalOptions } from 'sql/base/browser/ui/modal/modal';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
const defaultOptions: IModalOptions = { hasBackButton: false, isWide: false };
const defaultWizardOptions: IModalOptions = { hasBackButton: false, isWide: true };
const defaultOptions: IModalOptions = { hasBackButton: false, isWide: false, hasErrors: true };
const defaultWizardOptions: IModalOptions = { hasBackButton: false, isWide: true, hasErrors: true };
export class CustomDialogService {
private _dialogModals = new Map<Dialog, DialogModal>();

View File

@@ -24,6 +24,7 @@ import { localize } from 'vs/nls';
import { Emitter } from 'vs/base/common/event';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { DialogMessage, MessageLevel } from '../../workbench/api/common/sqlExtHostTypes';
export class DialogModal extends Modal {
private _dialogPane: DialogPane;
@@ -52,7 +53,7 @@ export class DialogModal extends Modal {
}
public render() {
super.render();
super.render(true);
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
@@ -71,6 +72,17 @@ export class DialogModal extends Modal {
this._dialog.okButton.registerClickEvent(this._onDone.event);
this._cancelButton = this.addDialogButton(this._dialog.cancelButton, () => this.cancel(), false);
this._dialog.cancelButton.registerClickEvent(this._onCancel.event);
let messageChangeHandler = (message: DialogMessage) => {
if (message && message.text) {
this.setError(message.text, message.level);
} else {
this.setError('');
}
};
messageChangeHandler(this._dialog.message);
this._dialog.onMessageChange(message => messageChangeHandler(message));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true): Button {

View File

@@ -15,6 +15,7 @@ import { TabbedPanel, IPanelTab, IPanelView } from 'sql/base/browser/ui/panel/pa
import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
import { DialogModule } from 'sql/platform/dialog/dialog.module';
import { DialogComponentParams } from 'sql/platform/dialog/dialogContainer.component';
import { DialogMessage } from 'sql/workbench/api/common/sqlExtHostTypes';
import * as DOM from 'vs/base/browser/dom';
import { Builder } from 'vs/base/browser/builder';

View File

@@ -8,6 +8,7 @@
import * as sqlops from 'sqlops';
import { localize } from 'vs/nls';
import { Event, Emitter } from 'vs/base/common/event';
import { DialogMessage } from 'sql/workbench/api/common/sqlExtHostTypes';
export class ModelViewPane {
private _valid: boolean = true;
@@ -45,6 +46,9 @@ export class Dialog extends ModelViewPane {
public okButton: DialogButton = new DialogButton(Dialog.DONE_BUTTON_LABEL, true);
public cancelButton: DialogButton = new DialogButton(Dialog.CANCEL_BUTTON_LABEL, true);
public customButtons: DialogButton[];
private _onMessageChange = new Emitter<DialogMessage>();
public readonly onMessageChange = this._onMessageChange.event;
private _message: DialogMessage;
constructor(public title: string, content?: string | DialogTab[]) {
super();
@@ -52,6 +56,17 @@ export class Dialog extends ModelViewPane {
this.content = content;
}
}
public get message(): DialogMessage {
return this._message;
}
public set message(value: DialogMessage) {
if (this._message && !value || !this._message && value || this._message && value && (this._message.level !== value.level || this._message.text !== value.text)) {
this._message = value;
this._onMessageChange.fire(this._message);
}
}
}
export class DialogButton implements sqlops.window.modelviewdialog.Button {
@@ -140,6 +155,9 @@ export class Wizard {
private _pageRemovedEmitter = new Emitter<WizardPage>();
public readonly onPageRemoved = this._pageRemovedEmitter.event;
private _navigationValidator: (pageChangeInfo: sqlops.window.modelviewdialog.WizardPageChangeInfo) => boolean | Thenable<boolean>;
private _onMessageChange = new Emitter<DialogMessage>();
public readonly onMessageChange = this._onMessageChange.event;
private _message: DialogMessage;
constructor(public title: string) { }
@@ -207,4 +225,15 @@ export class Wizard {
return Promise.resolve(true);
}
}
public get message(): DialogMessage {
return this._message;
}
public set message(value: DialogMessage) {
if (this._message && !value || !this._message && value || this._message && value && (this._message.level !== value.level || this._message.text !== value.text)) {
this._message = value;
this._onMessageChange.fire(this._message);
}
}
}

View File

@@ -5,7 +5,7 @@
.dialogModal-body {
display: flex;
flex-direction: row;
flex-direction: column;
height: 100%;
width: 100%;
min-width: 500px;
@@ -29,4 +29,4 @@
.footer-button.dialogModal-hidden {
margin: 0;
}
}

View File

@@ -24,6 +24,7 @@ import { localize } from 'vs/nls';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Emitter } from 'vs/base/common/event';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { DialogMessage, MessageLevel } from '../../workbench/api/common/sqlExtHostTypes';
export class WizardModal extends Modal {
private _dialogPanes = new Map<WizardPage, DialogPane>();
@@ -58,7 +59,7 @@ export class WizardModal extends Modal {
}
public render() {
super.render();
super.render(true);
attachModalDialogStyler(this, this._themeService);
if (this.backButton) {
@@ -66,6 +67,13 @@ export class WizardModal extends Modal {
attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
}
if (this._wizard.customButtons) {
this._wizard.customButtons.forEach(button => {
let buttonElement = this.addDialogButton(button);
this.updateButtonElement(buttonElement, button);
});
}
this._previousButton = this.addDialogButton(this._wizard.backButton, () => this.showPage(this.getCurrentPage() - 1));
this._nextButton = this.addDialogButton(this._wizard.nextButton, () => this.showPage(this.getCurrentPage() + 1));
this._generateScriptButton = this.addDialogButton(this._wizard.generateScriptButton, () => undefined);
@@ -73,6 +81,17 @@ export class WizardModal extends Modal {
this._wizard.doneButton.registerClickEvent(this._onDone.event);
this._cancelButton = this.addDialogButton(this._wizard.cancelButton, () => this.cancel(), false);
this._wizard.cancelButton.registerClickEvent(this._onCancel.event);
let messageChangeHandler = (message: DialogMessage) => {
if (message && message.text) {
this.setError(message.text, message.level);
} else {
this.setError('');
}
};
messageChangeHandler(this._wizard.message);
this._wizard.onMessageChange(message => messageChangeHandler(message));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true): Button {
@@ -100,7 +119,6 @@ export class WizardModal extends Modal {
this._body = bodyBuilder.getHTMLElement();
});
let builder = new Builder(this._body);
this._wizard.pages.forEach(page => {
this.registerPage(page);
});