ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 17:23:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

Remove builder references from options dialog (#4774)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

56
src/sql/workbench/browser/modal/dialogHelper.ts
View File

@@ -6,50 +6,38 @@
'use strict';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { Button } from 'sql/base/browser/ui/button/button';
import { append, $, addClass, addClasses } from 'vs/base/browser/dom';
import { Builder } from 'sql/base/browser/builder';
import * as types from 'vs/base/common/types';
import * as azdata from 'azdata';
export function appendRow(container: Builder, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string): Builder {
let cellContainer: Builder;
let rowAttributes = rowContainerClass ? { class: rowContainerClass } : {};
container.element('tr', rowAttributes, (rowContainer) => {
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
labelCellContainer.div({}, (labelContainer) => {
labelContainer.text(label);
});
});
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
cellContainer = inputCellContainer;
});
});
export function appendRow(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string, rowContainerClass?: string | Array<string>): HTMLElement {
let rowContainer = append(container, $('tr'));
if (rowContainerClass) {
if (types.isString(rowContainerClass)) {
addClass(rowContainer, rowContainerClass);
} else {
addClasses(rowContainer, ...rowContainerClass);
}
}
append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
let inputCellContainer = append(rowContainer, $(`td.${cellContainerClass}`));
return cellContainer;
return inputCellContainer;
}
export function appendRowLink(container: Builder, label: string, labelClass: string, cellContainerClass: string): Builder {
let rowButton: Button;
container.element('tr', {}, (rowContainer) => {
rowContainer.element('td', { class: labelClass }, (labelCellContainer) => {
labelCellContainer.div({}, (labelContainer) => {
labelContainer.text(label);
});
});
rowContainer.element('td', { class: cellContainerClass }, (inputCellContainer) => {
inputCellContainer.element('div', {}, (rowContainer) => {
rowButton = new Button(rowContainer.getHTMLElement());
export function appendRowLink(container: HTMLElement, label: string, labelClass: string, cellContainerClass: string): HTMLElement {
let rowContainer = append(container, $('tr'));
append(append(rowContainer, $(`td.${labelClass}`)), $('div')).innerText = label;
let buttonContainer = append(append(rowContainer, $(`td.${cellContainerClass}`)), $('div'));
let rowButton = new Button(buttonContainer);
});
});
});
return new Builder(rowButton.element);
return rowButton.element;
}
export function appendInputSelectBox(container: Builder, selectBox: SelectBox): SelectBox {
selectBox.render(container.getHTMLElement());
export function appendInputSelectBox(container: HTMLElement, selectBox: SelectBox): SelectBox {
selectBox.render(container);
return selectBox;
}
@@ -80,4 +68,4 @@ export function getCategoryName(categories: azdata.CategoryValue[], categoryDisp
}
});
return categoryName;
}
}

59
src/sql/workbench/browser/modal/optionsDialog.ts
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();

21
src/sql/workbench/browser/modal/optionsDialogHelper.ts
View File

@@ -6,7 +6,6 @@
'use strict';
import * as DialogHelper from './dialogHelper';
import { Builder } from 'sql/base/browser/builder';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
@@ -22,7 +21,7 @@ export interface IOptionElement {
optionValue: any;
}
export function createOptionElement(option: azdata.ServiceOption, rowContainer: Builder, options: { [name: string]: any },
export function createOptionElement(option: azdata.ServiceOption, rowContainer: HTMLElement, options: { [name: string]: any },
optionsMap: { [optionName: string]: IOptionElement }, contextViewService: IContextViewService, onFocus: (name) => void): void {
let possibleInputs: string[] = [];
let optionValue = getOptionValueAndCategoryValues(option, options, possibleInputs);
@@ -32,7 +31,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
let invalidInputMessage = localize('optionsDialog.invalidInput', 'Invalid input. Numeric value expected.');
if (option.valueType === ServiceOptionType.number) {
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
optionWidget = new InputBox(rowContainer, contextViewService, {
validationOptions: {
validation: (value: string) => {
if (!value && option.isRequired) {
@@ -53,7 +52,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer:
DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
inputElement = findElement(rowContainer, 'monaco-select-box');
} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {
optionWidget = new InputBox(rowContainer.getHTMLElement(), contextViewService, {
optionWidget = new InputBox(rowContainer, contextViewService, {
validationOptions: {
validation: (value: string) => (!value && option.isRequired) ? ({ type: MessageType.ERROR, content: option.displayName + missingErrorMessage }) : null
},
@@ -149,16 +148,16 @@ export function updateOptions(options: { [optionName: string]: any }, optionsMap
export let trueInputValue: string = 'True';
export let falseInputValue: string = 'False';
export function findElement(container: Builder, className: string): HTMLElement {
var elementBuilder: Builder = container;
while (elementBuilder.getHTMLElement()) {
var htmlElement = elementBuilder.getHTMLElement();
export function findElement(container: HTMLElement, className: string): HTMLElement {
var elementBuilder = container;
while (elementBuilder) {
var htmlElement = elementBuilder;
if (htmlElement.className.startsWith(className)) {
break;
}
elementBuilder = elementBuilder.child(0);
elementBuilder = elementBuilder.firstChild as HTMLElement;
}
return elementBuilder.getHTMLElement();
return elementBuilder;
}
export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [category: string]: azdata.ServiceOption[] } {
@@ -176,4 +175,4 @@ export function groupOptionsByCategory(options: azdata.ServiceOption[]): { [cate
}
});
return connectionOptionsMap;
}
}