Alanren/custom message box location (#3139)

* make message box associated with wizard page

* missed one condition check after renaming

* fix compilation error
This commit is contained in:
Alan Ren
2018-11-06 10:44:02 -08:00
committed by GitHub
parent dbb0fc519f
commit f7879bdbf9
3 changed files with 31 additions and 4 deletions

View File

@@ -72,8 +72,8 @@ const defaultOptions: IModalOptions = {
}; };
export abstract class Modal extends Disposable implements IThemable { export abstract class Modal extends Disposable implements IThemable {
protected _useDefaultMessageBoxLocation: boolean = true;
private _messageElement: HTMLElement; protected _messageElement: HTMLElement;
private _messageIcon: HTMLElement; private _messageIcon: HTMLElement;
private _messageSeverity: Builder; private _messageSeverity: Builder;
private _messageSummary: Builder; private _messageSummary: Builder;
@@ -253,7 +253,9 @@ export abstract class Modal extends Disposable implements IThemable {
this._messageElement = this._modalMessageSection.getHTMLElement(); this._messageElement = this._modalMessageSection.getHTMLElement();
this.updateElementVisibility(this._messageElement, false); this.updateElementVisibility(this._messageElement, false);
parts.push(this._messageElement); if (this._useDefaultMessageBoxLocation) {
parts.push(this._messageElement);
}
} }
// This modal body section refers to the body of of the dialog // This modal body section refers to the body of of the dialog

View File

@@ -16,6 +16,18 @@
min-width: 800px; min-width: 800px;
} }
.dialog-message-and-page-container {
display: flex;
flex-direction: column;
flex: 1 1;
overflow: hidden;
}
.dialogModal-page-container {
flex: 1 1;
overflow: hidden;
}
.dialogModal-pane { .dialogModal-pane {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -34,6 +34,9 @@ export class WizardModal extends Modal {
// Wizard HTML elements // Wizard HTML elements
private _body: HTMLElement; private _body: HTMLElement;
private _messageAndPageContainer: HTMLElement;
private _pageContainer: HTMLElement;
// Buttons // Buttons
private _previousButton: Button; private _previousButton: Button;
private _nextButton: Button; private _nextButton: Button;
@@ -53,6 +56,7 @@ export class WizardModal extends Modal {
@IClipboardService clipboardService: IClipboardService @IClipboardService clipboardService: IClipboardService
) { ) {
super(_wizard.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options); super(_wizard.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options);
this._useDefaultMessageBoxLocation = false;
} }
public layout(): void { public layout(): void {
@@ -126,12 +130,21 @@ export class WizardModal extends Modal {
} }
protected renderBody(container: HTMLElement): void { protected renderBody(container: HTMLElement): void {
let bodyBuilderObj;
new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => { new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => {
bodyBuilderObj = bodyBuilder;
this._body = bodyBuilder.getHTMLElement(); this._body = bodyBuilder.getHTMLElement();
}); });
this.initializeNavigation(this._body); this.initializeNavigation(this._body);
bodyBuilderObj.div({ class: 'dialog-message-and-page-container' }, (mpContainer) => {
this._messageAndPageContainer = mpContainer.getHTMLElement();
mpContainer.append(this._messageElement);
this._pageContainer = mpContainer.div({ class: 'dialogModal-page-container' }).getHTMLElement();
});
this._wizard.pages.forEach(page => { this._wizard.pages.forEach(page => {
this.registerPage(page); this.registerPage(page);
}); });
@@ -159,7 +172,7 @@ export class WizardModal extends Modal {
private registerPage(page: WizardPage): void { private registerPage(page: WizardPage): void {
let dialogPane = new DialogPane(page.title, page.content, valid => page.notifyValidityChanged(valid), this._instantiationService, this._wizard.displayPageTitles, page.description); let dialogPane = new DialogPane(page.title, page.content, valid => page.notifyValidityChanged(valid), this._instantiationService, this._wizard.displayPageTitles, page.description);
dialogPane.createBody(this._body); dialogPane.createBody(this._pageContainer);
this._dialogPanes.set(page, dialogPane); this._dialogPanes.set(page, dialogPane);
page.onUpdate(() => this.setButtonsForPage(this._wizard.currentPage)); page.onUpdate(() => this.setButtonsForPage(this._wizard.currentPage));
} }