Remove builder references from options dialog (#4774)

* remove more builder references; remove $ from declarations

* fix jquery references

* formatting

* fixing backup

* fix backup box
This commit is contained in:
Anthony Dresser
2019-04-02 13:49:50 -07:00
committed by GitHub
parent 72ef024678
commit 63485c8c78
29 changed files with 261 additions and 407 deletions

View File

@@ -26,7 +26,6 @@ import { IWorkbenchThemeService, IColorTheme } from 'vs/workbench/services/theme
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import * as styler from 'vs/platform/theme/common/styler';
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { Builder, $ } from 'sql/base/browser/builder';
import { Widget } from 'vs/base/browser/ui/widget';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { IViewletPanelOptions, ViewletPanel } from 'vs/workbench/browser/parts/views/panelViewlet';
@@ -34,6 +33,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService';
import { append, $ } from 'vs/base/browser/dom';
export class CategoryView extends ViewletPanel {
@@ -68,9 +68,9 @@ export interface IOptionsDialogOptions extends IModalOptions {
export class OptionsDialog extends Modal {
private _body: HTMLElement;
private _optionGroups: HTMLElement;
private _dividerBuilder: Builder;
private _optionTitle: Builder;
private _optionDescription: Builder;
private _dividerBuilder: HTMLElement;
private _optionTitle: HTMLElement;
private _optionDescription: HTMLElement;
private _optionElements: { [optionName: string]: OptionsDialogHelper.IOptionElement } = {};
private _optionValues: { [optionName: string]: string };
private _optionRowSize = 31;
@@ -116,23 +116,14 @@ export class OptionsDialog extends Modal {
}
protected renderBody(container: HTMLElement) {
new Builder(container).div({ class: 'optionsDialog-options' }, (bodyBuilder) => {
this._body = bodyBuilder.getHTMLElement();
});
this._body = append(container, $('div.optionsDialog-options'));
let builder = new Builder(this._body);
builder.div({}, (dividerContainer) => {
this._dividerBuilder = dividerContainer;
});
this._dividerBuilder = append(this._body, $('div'));
builder.div({ class: 'optionsDialog-description' }, (descriptionContainer) => {
descriptionContainer.div({ class: 'modal-title' }, (optionTitle) => {
this._optionTitle = optionTitle;
});
descriptionContainer.div({ class: 'optionsDialog-description-content' }, (optionDescription) => {
this._optionDescription = optionDescription;
});
});
let descriptionContainer = append(this._body, $('div.optionsDialog-description'));
this._optionTitle = append(descriptionContainer, $('div.modal-title'));
this._optionDescription = append(descriptionContainer, $('div.optionsDialog-description-content'));
}
// Update theming that is specific to options dialog flyout body
@@ -140,19 +131,19 @@ export class OptionsDialog extends Modal {
let borderColor = theme.getColor(contrastBorder);
let border = borderColor ? borderColor.toString() : null;
if (this._dividerBuilder) {
this._dividerBuilder.style('border-top-width', border ? '1px' : null);
this._dividerBuilder.style('border-top-style', border ? 'solid' : null);
this._dividerBuilder.style('border-top-color', border);
this._dividerBuilder.style.borderTopWidth = border ? '1px' : null;
this._dividerBuilder.style.borderTopStyle = border ? 'solid' : null;
this._dividerBuilder.style.borderTopColor = border;
}
}
private onOptionLinkClicked(optionName: string): void {
let option = this._optionElements[optionName].option;
this._optionTitle.text(option.displayName);
this._optionDescription.text(option.description);
this._optionTitle.innerText = option.displayName;
this._optionDescription.innerText = option.description;
}
private fillInOptions(container: Builder, options: azdata.ServiceOption[]): void {
private fillInOptions(container: HTMLElement, options: azdata.ServiceOption[]): void {
for (let i = 0; i < options.length; i++) {
let option: azdata.ServiceOption = options[i];
let rowContainer = DialogHelper.appendRow(container, option.displayName, 'optionsDialog-label', 'optionsDialog-input');
@@ -226,21 +217,16 @@ export class OptionsDialog extends Modal {
public open(options: azdata.ServiceOption[], optionValues: { [name: string]: any }) {
this._optionValues = optionValues;
let firstOption: string;
let containerGroup: Builder;
let optionsContentBuilder: Builder = $().div({ class: 'optionsDialog-options-groups monaco-panel-view' }, (container) => {
containerGroup = container;
this._optionGroups = container.getHTMLElement();
});
this.splitview = new ScrollableSplitView(containerGroup.getHTMLElement(), { enableResizing: false, scrollDebounce: 0 });
this._optionGroups = $('div.optionsDialog-options-groups.monaco-panel-view');
this.splitview = new ScrollableSplitView(this._optionGroups, { enableResizing: false, scrollDebounce: 0 });
let categoryMap = OptionsDialogHelper.groupOptionsByCategory(options);
for (let category in categoryMap) {
let serviceOptions: azdata.ServiceOption[] = categoryMap[category];
let bodyContainer = $().element('table', { class: 'optionsDialog-table' }, (tableContainer: Builder) => {
this.fillInOptions(tableContainer, serviceOptions);
});
let bodyContainer = $('table.optionsDialog-table');
this.fillInOptions(bodyContainer, serviceOptions);
let viewSize = this._optionCategoryPadding + serviceOptions.length * this._optionRowSize;
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer.getHTMLElement(), viewSize, { title: category, ariaHeaderLabel: category, id: category });
let categoryView = this._instantiationService.createInstance(CategoryView, bodyContainer, viewSize, { title: category, ariaHeaderLabel: category, id: category });
this.splitview.addView(categoryView, viewSize);
categoryView.render();
attachPanelStyler(categoryView, this._themeService);
@@ -252,8 +238,7 @@ export class OptionsDialog extends Modal {
if (this.height) {
this.splitview.layout(this.height - 120);
}
let body = new Builder(this._body);
body.append(optionsContentBuilder.getHTMLElement(), 0);
append(this._body, this._optionGroups);
this.show();
let firstOptionWidget = this._optionElements[firstOption].optionWidget;
this.registerStyling();