Expose custom dialog extension APIs (#1206)

This commit is contained in:
Matt Irvine
2018-04-24 16:43:14 -07:00
committed by GitHub
parent 3abbc8fd97
commit 1811dfa423
10 changed files with 432 additions and 35 deletions

View File

@@ -12,7 +12,7 @@ import { Dialog } 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: true, isWide: true };
const defaultOptions: IModalOptions = { hasBackButton: true, isWide: false };
export class CustomDialogService {
constructor( @IInstantiationService private _instantiationService: IInstantiationService) { }

View File

@@ -8,7 +8,7 @@
import 'vs/css!./media/dialogModal';
import { Modal, IModalOptions } from 'sql/base/browser/ui/modal/modal';
import { attachModalDialogStyler } from 'sql/common/theme/styler';
import { Dialog } from 'sql/platform/dialog/dialogTypes';
import { Dialog, DialogButton } from 'sql/platform/dialog/dialogTypes';
import { DialogPane } from 'sql/platform/dialog/dialogPane';
import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
import { Builder } from 'vs/base/browser/builder';
@@ -23,9 +23,6 @@ import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { localize } from 'vs/nls';
export class DialogModal extends Modal {
private static readonly DONE_BUTTON_LABEL = localize('dialogModalDoneButtonLabel', 'Done');
private static readonly CANCEL_BUTTON_LABEL = localize('dialogModalCancelButtonLabel', 'Cancel');
private _dialogPane: DialogPane;
// Wizard HTML elements
@@ -61,12 +58,28 @@ export class DialogModal extends Modal {
attachButtonStyler(this.backButton, this._themeService, { buttonBackground: SIDE_BAR_BACKGROUND, buttonHoverBackground: SIDE_BAR_BACKGROUND });
}
this._cancelButton = this.addFooterButton(DialogModal.CANCEL_BUTTON_LABEL, () => this.cancel());
this._doneButton = this.addFooterButton(DialogModal.DONE_BUTTON_LABEL, () => this.done());
if (this._dialog.customButtons) {
this._dialog.customButtons.forEach(button => {
let buttonElement = this.addDialogButton(button);
buttonElement.enabled = button.enabled;
attachButtonStyler(buttonElement, this._themeService);
});
}
this._cancelButton = this.addDialogButton(this._dialog.cancelButton, () => this.cancel());
this._cancelButton.enabled = this._dialog.cancelButton.enabled;
this._doneButton = this.addDialogButton(this._dialog.okButton, () => this.done());
this._doneButton.enabled = this._dialog.okButton.enabled;
attachButtonStyler(this._cancelButton, this._themeService);
attachButtonStyler(this._doneButton, this._themeService);
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined): Button {
let buttonElement = this.addFooterButton(button.label, onSelect);
button.registerClickEvent(buttonElement.onDidClick);
return buttonElement;
}
protected renderBody(container: HTMLElement): void {
new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => {
this._body = bodyBuilder.getHTMLElement();

View File

@@ -6,6 +6,7 @@
'use strict';
import * as sqlops from 'sqlops';
import { localize } from 'vs/nls';
import Event, { Emitter } from 'vs/base/common/event';
export class DialogTab implements sqlops.window.modelviewdialog.DialogTab {
@@ -21,15 +22,13 @@ export class DialogTab implements sqlops.window.modelviewdialog.DialogTab {
}
export class Dialog implements sqlops.window.modelviewdialog.Dialog {
public content: string | DialogTab[];
public okTitle: string;
public cancelTitle: string;
public customButtons: DialogButton[];
private static readonly DONE_BUTTON_LABEL = localize('dialogModalDoneButtonLabel', 'Done');
private static readonly CANCEL_BUTTON_LABEL = localize('dialogModalCancelButtonLabel', 'Cancel');
private _onOk: Emitter<void> = new Emitter<void>();
public readonly onOk: Event<void> = this._onOk.event;
private _onCancel: Emitter<void> = new Emitter<void>();
public readonly onCancel: Event<void> = this._onCancel.event;
public content: string | DialogTab[];
public okButton: DialogButton = new DialogButton(Dialog.DONE_BUTTON_LABEL, true);
public cancelButton: DialogButton = new DialogButton(Dialog.CANCEL_BUTTON_LABEL, true);
public customButtons: DialogButton[];
constructor(public title: string, content?: string | DialogTab[]) {
if (content) {
@@ -52,4 +51,11 @@ export class DialogButton implements sqlops.window.modelviewdialog.Button {
this.label = label;
this.enabled = enabled;
}
/**
* Register an event that notifies the button that it has been clicked
*/
public registerClickEvent(clickEvent: Event<void>): void {
clickEvent(() => this._onClick.fire());
}
}