diff --git a/src/sql/parts/modelComponents/button.component.ts b/src/sql/parts/modelComponents/button.component.ts index b32b075662..4b0bd413f9 100644 --- a/src/sql/parts/modelComponents/button.component.ts +++ b/src/sql/parts/modelComponents/button.component.ts @@ -93,10 +93,10 @@ export default class ButtonComponent extends ComponentBase implements IComponent this._button.enabled = this.enabled; this._button.label = this.label; if (this.width) { - this._button.setWidth(this.width.toString()); + this._button.setWidth(this.convertSize(this.width.toString())); } if (this.height) { - this._button.setWidth(this.height.toString()); + this._button.setWidth(this.convertSize(this.height.toString())); } this.updateIcon(); } diff --git a/src/sql/parts/modelComponents/checkbox.component.ts b/src/sql/parts/modelComponents/checkbox.component.ts index c0f894b065..593f872cf5 100644 --- a/src/sql/parts/modelComponents/checkbox.component.ts +++ b/src/sql/parts/modelComponents/checkbox.component.ts @@ -20,7 +20,7 @@ import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common @Component({ selector: 'modelview-checkbox', template: ` -
+
` }) export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index c812f34272..c60fbbc32c 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/src/sql/parts/modelComponents/componentBase.ts @@ -146,11 +146,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On return this.height ? this.convertSize(this.height) : ''; } - protected convertSize(size: number | string): string { + protected convertSize(size: number | string, defaultValue?: string): string { + defaultValue = defaultValue || ''; if (types.isUndefinedOrNull(size)) { - return '100%'; + return defaultValue; } - let convertedSize: string = size ? size.toString() : '100%'; + let convertedSize: string = size ? size.toString() : defaultValue; if (!convertedSize.toLowerCase().endsWith('px') && !convertedSize.toLowerCase().endsWith('%')) { convertedSize = convertedSize + 'px'; } diff --git a/src/sql/parts/modelComponents/dropdown.component.ts b/src/sql/parts/modelComponents/dropdown.component.ts index 2f3f2788fa..4049aaac8a 100644 --- a/src/sql/parts/modelComponents/dropdown.component.ts +++ b/src/sql/parts/modelComponents/dropdown.component.ts @@ -145,18 +145,26 @@ export default class DropDownComponent extends ComponentBase implements ICompone } private getSelectedValue(): string { - if (this.values && this.valuesHaveDisplayName()) { - let valueCategory = (this.values).find(v => v.name === this.value); + if (this.values && this.values.length > 0 && this.valuesHaveDisplayName()) { + let selectedValue = this.value || this.values[0]; + if (!this.value) { + this.value = selectedValue; + } + let valueCategory = (this.values).find(v => v.name === selectedValue.name); + return valueCategory && valueCategory.displayName; } else { - return this.value; + if (!this.value && this.values && this.values.length > 0) { + this.value = this.values[0]; + } + return this.value; } } private setSelectedValue(newValue: string): void { if (this.values && this.valuesHaveDisplayName()) { let valueCategory = (this.values).find(v => v.displayName === newValue); - this.value = valueCategory && valueCategory.name; + this.value = valueCategory; } else { this.value = newValue; } @@ -164,8 +172,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone // CSS-bound properties - private get value(): string { - return this.getPropertyOrDefault((props) => props.value, ''); + private get value(): string | sqlops.CategoryValue { + return this.getPropertyOrDefault((props) => props.value, ''); } private get editable(): boolean { @@ -180,8 +188,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone return !this.editable ? '' : 'none'; } - private set value(newValue: string) { - this.setPropertyFromUI(this.setValueProperties, newValue); + private set value(newValue: string | sqlops.CategoryValue) { + this.setPropertyFromUI(this.setValueProperties, newValue); } private get values(): string[] | sqlops.CategoryValue[] { diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index 5afddcb365..49067418f6 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -16,13 +16,15 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar import { ContainerBase } from 'sql/parts/modelComponents/componentBase'; import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; +import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom'; export interface TitledFormItemLayout { title: string; actions?: string[]; isFormComponent: Boolean; horizontal: boolean; - componentWidth: number; + componentWidth?: number | string; + componentHeight?: number | string; } export interface FormLayout { @@ -37,7 +39,7 @@ class FormItem { template: `
-
+
{{getItemTitle(item)}}
@@ -56,10 +58,10 @@ class FormItem {
-
+
{{getItemTitle(item)}}
-
- +
+
@@ -101,6 +103,10 @@ export default class FormContainer extends ContainerBase impleme ngAfterViewInit(): void { } + public layout(): void { + super.layout(); + } + /// IComponent implementation public get alignItems(): string { @@ -112,16 +118,21 @@ export default class FormContainer extends ContainerBase impleme } private getFormWidth(): string { - return this.convertSize(this._formLayout && this._formLayout.width); + return this.convertSize(this._formLayout && this._formLayout.width, '100%'); } private getFormHeight(): string { - return this.convertSize(this._formLayout && this._formLayout.height); + return this.convertSize(this._formLayout && this._formLayout.height, '100%'); } private getComponentWidth(item: FormItem): string { let itemConfig = item.config; - return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : ''; + return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : ''; + } + + private getRowHeight(item: FormItem): string { + let itemConfig = item.config; + return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : ''; } private getItemTitle(item: FormItem): string { diff --git a/src/sql/parts/modelComponents/table.component.ts b/src/sql/parts/modelComponents/table.component.ts index b38b5c8f28..2ca84d66f9 100644 --- a/src/sql/parts/modelComponents/table.component.ts +++ b/src/sql/parts/modelComponents/table.component.ts @@ -23,7 +23,7 @@ import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectio @Component({ selector: 'modelview-table', template: ` -
+
` }) export default class TableComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { @@ -92,9 +92,8 @@ export default class TableComponent extends ComponentBase implements IComponent, let options = >{ syncColumnCellResize: true, enableColumnReorder: false, - rowHeight: 45, enableCellNavigation: true, - forceFitColumns: true + forceFitColumns: true, }; this._table = new Table(this._inputContainer.nativeElement, this._tableData, this._tableColumns, options); diff --git a/src/sql/platform/dialog/dialogPane.ts b/src/sql/platform/dialog/dialogPane.ts index d4dc349ee6..7584eb2af8 100644 --- a/src/sql/platform/dialog/dialogPane.ts +++ b/src/sql/platform/dialog/dialogPane.ts @@ -67,6 +67,7 @@ export class DialogPane extends Disposable implements IThemable { this._body.appendChild(tabContainer); this.initializeModelViewContainer(tabContainer, tab.content, tab); this._tabbedPanel.onTabChange(e => { + tabContainer.style.height = (this.getTabDimension().height - this._tabbedPanel.headersize) + 'px'; this._onTabChange.fire(tab.content); }); this._tabbedPanel.pushTab({ @@ -91,7 +92,7 @@ export class DialogPane extends Disposable implements IThemable { } private getTabDimension(): DOM.Dimension { - return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body)) + return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body)); } public layout(): void { diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 1e6e7a9db3..206ae39aff 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -232,7 +232,8 @@ declare module 'sqlops' { export interface FormItemLayout { horizontal?: boolean; - componentWidth?: number; + componentWidth?: number | string; + componentHeight?: number | string; } export interface FormLayout { @@ -354,7 +355,7 @@ declare module 'sqlops' { } export interface DropDownProperties extends ComponentProperties { - value?: string; + value?: string | CategoryValue; values?: string[] | CategoryValue[]; editable?: boolean; } @@ -418,7 +419,7 @@ declare module 'sqlops' { } export interface DropDownComponent extends Component, DropDownProperties { - value: string; + value: string | CategoryValue; values: string[] | CategoryValue[]; onValueChanged: vscode.Event; } diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index 3695c3fa96..c2cf3549e2 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -771,10 +771,10 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone this._emitterMap.set(ComponentEventType.onDidChange, new Emitter()); } - public get value(): string { + public get value(): string | sqlops.CategoryValue { return this.properties['value']; } - public set value(v: string) { + public set value(v: string | sqlops.CategoryValue) { this.setProperty('value', v); }