add custom width support for dialogs (#10641)

* add custom width support for dialogs

* comments

* fix test
This commit is contained in:
Alan Ren
2020-06-03 13:08:48 -07:00
committed by GitHub
parent 2e4aee944c
commit c4be667567
12 changed files with 123 additions and 33 deletions

View File

@@ -10,12 +10,13 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { MainThreadModelViewDialogShape, SqlMainContext, ExtHostModelViewDialogShape, SqlExtHostContext } from 'sql/workbench/api/common/sqlExtHost.protocol';
import { Dialog, DialogTab, DialogButton, WizardPage, Wizard } from 'sql/workbench/services/dialog/common/dialogTypes';
import { CustomDialogService } from 'sql/workbench/services/dialog/browser/customDialogService';
import { CustomDialogService, DefaultWizardOptions, DefaultDialogOptions } from 'sql/workbench/services/dialog/browser/customDialogService';
import { IModelViewDialogDetails, IModelViewTabDetails, IModelViewButtonDetails, IModelViewWizardPageDetails, IModelViewWizardDetails } from 'sql/workbench/api/common/sqlExtHostTypes';
import { ModelViewInput, ModelViewInputModel, ModeViewSaveHandler } from 'sql/workbench/browser/modelComponents/modelViewInput';
import * as vscode from 'vscode';
import * as azdata from 'azdata';
import { assign } from 'vs/base/common/objects';
@extHostNamedCustomer(SqlMainContext.MainThreadModelViewDialog)
export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape {
@@ -67,7 +68,9 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
public $openDialog(handle: number, dialogName?: string): Thenable<void> {
let dialog = this.getDialog(handle);
this._dialogService.showDialog(dialog, dialogName, { hasBackButton: false, isWide: dialog.isWide, hasErrors: true });
const options = assign({}, DefaultDialogOptions);
options.width = dialog.width;
this._dialogService.showDialog(dialog, dialogName, options);
return Promise.resolve();
}
@@ -91,7 +94,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
}
dialog.title = details.title;
dialog.isWide = details.isWide;
dialog.width = details.width;
if (details.content && typeof details.content !== 'string') {
dialog.content = details.content.map(tabHandle => this.getTab(tabHandle));
} else {
@@ -163,6 +166,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
let wizard = this._wizards.get(handle);
if (!wizard) {
wizard = new Wizard(details.title);
wizard.width = details.width;
wizard.backButton = this.getButton(details.backButton);
wizard.cancelButton = this.getButton(details.cancelButton);
wizard.generateScriptButton = this.getButton(details.generateScriptButton);
@@ -213,7 +217,9 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
public $openWizard(handle: number): Thenable<void> {
let wizard = this.getWizard(handle);
this._dialogService.showWizard(wizard);
const options = assign({}, DefaultWizardOptions);
options.width = wizard.width;
this._dialogService.showWizard(wizard, options);
return Promise.resolve();
}

View File

@@ -13,7 +13,7 @@ import * as azdata from 'azdata';
import { SqlMainContext, ExtHostModelViewDialogShape, MainThreadModelViewDialogShape, ExtHostModelViewShape, ExtHostBackgroundTaskManagementShape } from 'sql/workbench/api/common/sqlExtHost.protocol';
import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
import { TabOrientation } from 'sql/workbench/api/common/sqlExtHostTypes';
import { TabOrientation, DialogWidth } from 'sql/workbench/api/common/sqlExtHostTypes';
const DONE_LABEL = nls.localize('dialogDoneLabel', "Done");
const CANCEL_LABEL = nls.localize('dialogCancelLabel', "Cancel");
@@ -125,6 +125,7 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
private _operationHandler: BackgroundOperationHandler;
private _dialogName: string;
private _isWide: boolean;
private _width: DialogWidth;
constructor(extHostModelViewDialog: ExtHostModelViewDialog,
extHostModelView: ExtHostModelViewShape,
@@ -139,6 +140,14 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
});
}
public get width(): azdata.window.DialogWidth {
return this._width;
}
public set width(value: azdata.window.DialogWidth) {
this._width = value;
}
public registerOperation(operationInfo: azdata.BackgroundOperationInfo): void {
this._operationHandler.registerOperation(operationInfo);
}
@@ -372,6 +381,7 @@ class WizardImpl implements azdata.window.Wizard {
private _message: azdata.window.DialogMessage;
private _displayPageTitles: boolean = true;
private _operationHandler: BackgroundOperationHandler;
private _width: DialogWidth;
constructor(public title: string, private _extHostModelViewDialog: ExtHostModelViewDialog, extHostTaskManagement: ExtHostBackgroundTaskManagementShape) {
this.doneButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
@@ -392,6 +402,14 @@ class WizardImpl implements azdata.window.Wizard {
this._operationHandler.registerOperation(operationInfo);
}
public get width(): azdata.window.DialogWidth {
return this._width;
}
public set width(value: azdata.window.DialogWidth) {
this._width = value;
}
public get currentPage(): number {
return this._currentPage;
}
@@ -653,9 +671,17 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
}
this.updateButton(dialog.okButton);
this.updateButton(dialog.cancelButton);
let dialogWidth: DialogWidth = 'narrow';
if (dialog.isWide !== undefined) {
dialogWidth = dialog.isWide ? 'wide' : 'narrow';
} else if (dialog.width !== undefined) {
dialogWidth = dialog.width;
} else {
dialogWidth = 'narrow';
}
this._proxy.$setDialogDetails(handle, {
title: dialog.title,
isWide: dialog.isWide,
width: dialogWidth,
okButton: this.getHandle(dialog.okButton),
cancelButton: this.getHandle(dialog.cancelButton),
content: dialog.content && typeof dialog.content !== 'string' ? dialog.content.map(tab => this.getHandle(tab)) : dialog.content as string,
@@ -688,13 +714,13 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this._onClickCallbacks.set(handle, callback);
}
public createDialog(title: string, dialogName?: string, extension?: IExtensionDescription, isWide?: boolean): azdata.window.Dialog {
public createDialog(title: string, dialogName?: string, extension?: IExtensionDescription, width?: azdata.window.DialogWidth): azdata.window.Dialog {
let dialog = new DialogImpl(this, this._extHostModelView, this._extHostTaskManagement, extension);
if (dialogName) {
dialog.dialogName = dialogName;
}
dialog.title = title;
dialog.isWide = isWide;
dialog.width = width ?? 'narrow';
dialog.handle = this.getHandle(dialog);
return dialog;
}
@@ -736,8 +762,9 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
return page;
}
public createWizard(title: string): azdata.window.Wizard {
public createWizard(title: string, width: azdata.window.DialogWidth = 'wide'): azdata.window.Wizard {
let wizard = new WizardImpl(title, this, this._extHostTaskManagement);
wizard.width = width;
this.getHandle(wizard);
return wizard;
}
@@ -769,6 +796,7 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
}
return this._proxy.$setWizardDetails(handle, {
title: wizard.title,
width: wizard.width,
pages: wizard.pages.map(page => this.getHandle(page)),
currentPage: wizard.currentPage,
backButton: this.getHandle(wizard.backButton),

View File

@@ -402,8 +402,15 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
createWebViewDialog(name: string) {
return extHostModalDialogs.createDialog(name);
},
createModelViewDialog(title: string, dialogName?: string, isWide?: boolean): azdata.window.Dialog {
return extHostModelViewDialog.createDialog(title, dialogName, extension, !!isWide);
// the 'width' parameter used to be boolean type named 'isWide', the optional boolean type for 'width' parameter is added for backward compatibility support of 'isWide' parameter.
createModelViewDialog(title: string, dialogName?: string, width?: boolean | azdata.window.DialogWidth): azdata.window.Dialog {
let dialogWidth: azdata.window.DialogWidth;
if (typeof width === 'boolean') {
dialogWidth = width === true ? 'wide' : 'narrow';
} else {
dialogWidth = width;
}
return extHostModelViewDialog.createDialog(title, dialogName, extension, dialogWidth);
},
createTab(title: string): azdata.window.DialogTab {
return extHostModelViewDialog.createTab(title, extension);
@@ -420,8 +427,8 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
createWizardPage(title: string): azdata.window.WizardPage {
return extHostModelViewDialog.createWizardPage(title, extension);
},
createWizard(title: string): azdata.window.Wizard {
return extHostModelViewDialog.createWizard(title);
createWizard(title: string, width?: azdata.window.DialogWidth): azdata.window.Wizard {
return extHostModelViewDialog.createWizard(title, width);
},
createModelViewDashboard(title: string, options?: azdata.ModelViewDashboardOptions): azdata.window.ModelViewDashboard {
return extHostModelViewDialog.createModelViewDashboard(title, options, extension);

View File

@@ -249,12 +249,12 @@ export interface IComponentEventArgs {
export interface IModelViewDialogDetails {
title: string;
isWide: boolean;
content: string | number[];
okButton: number;
cancelButton: number;
customButtons: number[];
message: DialogMessage;
width: DialogWidth;
}
export interface IModelViewTabDetails {
@@ -290,8 +290,11 @@ export interface IModelViewWizardDetails {
customButtons: number[];
message: DialogMessage;
displayPageTitles: boolean;
width: DialogWidth;
}
export type DialogWidth = 'narrow' | 'medium' | 'wide' | number;
export enum MessageLevel {
Error = 0,
Warning = 1,