add page custom buttons (#16797)

This commit is contained in:
Alan Ren
2021-08-17 09:32:07 -07:00
committed by GitHub
parent 95a08d2ce7
commit b7b23dcecc
2 changed files with 23 additions and 8 deletions

View File

@@ -500,17 +500,22 @@ export abstract class Modal extends Disposable implements IThemable {
* Adds a button to the footer of the modal
* @param label Label to show on the button
* @param onSelect The callback to call when the button is selected
* @param isSecondary Set the css class if true
* @param position The position of the button. Optional values: 'left', 'right'. Default value is 'right'
* @param isSecondary Indicates whether the button is a secondary button
* @param index If specified, the button will be inserted at the specified index
*/
protected addFooterButton(label: string, onSelect: () => void, orientation: 'left' | 'right' = 'right', isSecondary: boolean = false): Button {
protected addFooterButton(label: string, onSelect: () => void, position: 'left' | 'right' = 'right', isSecondary: boolean = false, index?: number): Button {
let footerButton = DOM.$('.footer-button');
let button = this._register(new Button(footerButton, { secondary: isSecondary }));
button.label = label;
button.onDidClick(() => onSelect()); // @todo this should be registered to dispose but that brakes some dialogs
if (orientation === 'left') {
DOM.append(this._leftFooter!, footerButton);
const container = position === 'left' ? this._leftFooter! : this._rightFooter!;
const buttonIndex = index !== undefined && index <= container.childElementCount ? index : container.childElementCount;
if (buttonIndex < container.childElementCount) {
const insertBefore = container.children.item(buttonIndex);
container.insertBefore(footerButton, insertBefore);
} else {
DOM.append(this._rightFooter!, footerButton);
DOM.append(container, footerButton);
}
attachButtonStyler(button, this._themeService);
this._footerButtons.push(button);
@@ -542,7 +547,7 @@ export abstract class Modal extends Disposable implements IThemable {
});
if (buttonIndex > -1 && buttonIndex < this._footerButtons.length) {
let button = this._footerButtons[buttonIndex];
DOM.removeNode(button.element);
button.element.parentElement.remove(); // The parent element of the button is the top level element we added to the footer button container.
button.dispose();
this._footerButtons.splice(buttonIndex, 1);
}

View File

@@ -99,8 +99,8 @@ export class WizardModal extends Modal {
this._wizard.onMessageChange(message => messageChangeHandler(message));
}
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false): Button {
let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary);
private addDialogButton(button: DialogButton, onSelect: () => void = () => undefined, registerClickEvent: boolean = true, requirePageValid: boolean = false, index?: number): Button {
let buttonElement = this.addFooterButton(button.label, onSelect, button.position, button.secondary, index);
buttonElement.enabled = button.enabled;
if (registerClickEvent) {
button.registerClickEvent(buttonElement.onDidClick);
@@ -199,6 +199,16 @@ export class WizardModal extends Modal {
if (dialogPaneToShow && readHeader) {
status(`${dialogPaneToShow.pageNumberDisplayText} ${dialogPaneToShow.title}`);
}
// Remove the current page's custom buttons
this._wizard.pages[this._wizard.currentPage]?.customButtons.forEach(button => {
this.removeFooterButton(button.label);
});
// Add the custom buttons for the new page
this._wizard.pages[index]?.customButtons.forEach((button, buttonIndex) => {
let buttonElement = this.addDialogButton(button, undefined, undefined, undefined, buttonIndex);
this.updateButtonElement(buttonElement, button);
});
this.setButtonsForPage(index);
this._wizard.setCurrentPage(index);
let currentPageValid = this._wizard.pages[this._wizard.currentPage].valid;