diff --git a/src/sql/base/browser/ui/modal/modal.ts b/src/sql/base/browser/ui/modal/modal.ts index 016e9968ce..bd33c5f816 100644 --- a/src/sql/base/browser/ui/modal/modal.ts +++ b/src/sql/base/browser/ui/modal/modal.ts @@ -72,8 +72,8 @@ const defaultOptions: IModalOptions = { }; export abstract class Modal extends Disposable implements IThemable { - - private _messageElement: HTMLElement; + protected _useDefaultMessageBoxLocation: boolean = true; + protected _messageElement: HTMLElement; private _messageIcon: HTMLElement; private _messageSeverity: Builder; private _messageSummary: Builder; @@ -253,7 +253,9 @@ export abstract class Modal extends Disposable implements IThemable { this._messageElement = this._modalMessageSection.getHTMLElement(); 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 diff --git a/src/sql/platform/dialog/media/dialogModal.css b/src/sql/platform/dialog/media/dialogModal.css index 4f0e201e11..d0954903a7 100644 --- a/src/sql/platform/dialog/media/dialogModal.css +++ b/src/sql/platform/dialog/media/dialogModal.css @@ -16,6 +16,18 @@ 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 { display: flex; flex-direction: column; diff --git a/src/sql/platform/dialog/wizardModal.ts b/src/sql/platform/dialog/wizardModal.ts index 2b639aa1d5..1580e0f3d1 100644 --- a/src/sql/platform/dialog/wizardModal.ts +++ b/src/sql/platform/dialog/wizardModal.ts @@ -34,6 +34,9 @@ export class WizardModal extends Modal { // Wizard HTML elements private _body: HTMLElement; + private _messageAndPageContainer: HTMLElement; + private _pageContainer: HTMLElement; + // Buttons private _previousButton: Button; private _nextButton: Button; @@ -53,6 +56,7 @@ export class WizardModal extends Modal { @IClipboardService clipboardService: IClipboardService ) { super(_wizard.title, name, partService, telemetryService, clipboardService, themeService, contextKeyService, options); + this._useDefaultMessageBoxLocation = false; } public layout(): void { @@ -126,12 +130,21 @@ export class WizardModal extends Modal { } protected renderBody(container: HTMLElement): void { + let bodyBuilderObj; new Builder(container).div({ class: 'dialogModal-body' }, (bodyBuilder) => { + bodyBuilderObj = bodyBuilder; this._body = bodyBuilder.getHTMLElement(); }); 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.registerPage(page); }); @@ -159,7 +172,7 @@ export class WizardModal extends Modal { private registerPage(page: WizardPage): void { 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); page.onUpdate(() => this.setButtonsForPage(this._wizard.currentPage)); }