align with portal button style (#14187)

* align with portal button style

* fix welcome page

* image button

* more fixes

* use withProperties

* add comment back

* add border radius
This commit is contained in:
Alan Ren
2021-02-08 15:12:54 -08:00
committed by GitHub
parent 7a0ac71b98
commit a3cddbc8aa
67 changed files with 384 additions and 251 deletions

View File

@@ -135,6 +135,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
button = new DialogButton(details.label, details.enabled);
button.position = details.position;
button.hidden = details.hidden;
button.secondary = details.secondary;
button.onClick(() => this.onButtonClick(handle));
this._buttons.set(handle, button);
} else {
@@ -143,6 +144,7 @@ export class MainThreadModelViewDialog implements MainThreadModelViewDialogShape
button.hidden = details.hidden;
button.focused = details.focused;
button.position = details.position;
button.secondary = details.secondary;
}
return Promise.resolve();

View File

@@ -134,7 +134,7 @@ class DialogImpl extends ModelViewPanelImpl implements azdata.window.Dialog {
extension: IExtensionDescription) {
super('modelViewDialog', extHostModelViewDialog, extHostModelView, extension);
this.okButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
this._operationHandler = new BackgroundOperationHandler('dialog', extHostTaskManagement);
this.okButton.onClick(() => {
this._operationHandler.createOperation();
@@ -219,6 +219,7 @@ class ButtonImpl implements azdata.window.Button {
private _hidden: boolean;
private _focused: boolean;
private _position: azdata.window.DialogButtonPosition;
private _secondary: boolean;
private _onClick = new Emitter<void>();
public onClick = this._onClick.event;
@@ -265,6 +266,15 @@ class ButtonImpl implements azdata.window.Button {
this._extHostModelViewDialog.updateButton(this);
}
public get secondary(): boolean {
return this._secondary;
}
public set secondary(value: boolean) {
this._secondary = value;
this._extHostModelViewDialog.updateButton(this);
}
public get focused(): boolean {
return this._focused;
}
@@ -386,10 +396,10 @@ class WizardImpl implements azdata.window.Wizard {
constructor(public title: string, public name: string, private _extHostModelViewDialog: ExtHostModelViewDialog, extHostTaskManagement: ExtHostBackgroundTaskManagementShape) {
this.doneButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL, 'right', true);
this.generateScriptButton = this._extHostModelViewDialog.createButton(GENERATE_SCRIPT_LABEL, 'right', true);
this.nextButton = this._extHostModelViewDialog.createButton(NEXT_LABEL);
this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL);
this.backButton = this._extHostModelViewDialog.createButton(PREVIOUS_LABEL, 'right', true);
this._extHostModelViewDialog.registerWizardPageInfoChangedCallback(this, info => this.handlePageInfoChanged(info));
this._currentPage = 0;
this.onPageChanged(info => this._currentPage = info.newPage);
@@ -670,7 +680,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
tabs.forEach(tab => this.updateTabContent(tab));
}
if (dialog.customButtons) {
dialog.customButtons.forEach(button => this.updateButton(button));
dialog.customButtons.forEach(button => {
button.secondary = true;
this.updateButton(button);
});
}
this.updateButton(dialog.okButton);
this.updateButton(dialog.cancelButton);
@@ -708,7 +721,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
enabled: button.enabled,
hidden: button.hidden,
focused: button.focused,
position: button.position
position: button.position,
secondary: button.secondary
});
}
@@ -735,12 +749,13 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
return tab;
}
public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right'): azdata.window.Button {
public createButton(label: string, position: azdata.window.DialogButtonPosition = 'right', secondary: boolean = false): azdata.window.Button {
let button = new ButtonImpl(this);
this.getHandle(button);
this.registerOnClickCallback(button, button.getOnClickCallback());
button.label = label;
button.position = position;
button.secondary = secondary;
return button;
}
@@ -796,7 +811,10 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this.updateButton(wizard.doneButton);
this.updateButton(wizard.nextButton);
if (wizard.customButtons) {
wizard.customButtons.forEach(button => this.updateButton(button));
wizard.customButtons.forEach(button => {
button.secondary = true;
this.updateButton(button);
});
}
return this._proxy.$setWizardDetails(handle, {
title: wizard.title,

View File

@@ -272,6 +272,7 @@ export interface IModelViewButtonDetails {
hidden: boolean;
focused?: boolean;
position?: 'left' | 'right';
secondary?: boolean;
}
export interface IModelViewWizardPageDetails {