diff --git a/src/sql/base/browser/ui/button/button.ts b/src/sql/base/browser/ui/button/button.ts index 320d798770..7766563865 100644 --- a/src/sql/base/browser/ui/button/button.ts +++ b/src/sql/base/browser/ui/button/button.ts @@ -33,4 +33,12 @@ export class Button extends vsButton { public set title(value: string) { this.$el.title(value); } + + public setHeight(value: string) { + this.$el.style('height', value); + } + + public setWidth(value: string) { + this.$el.style('width', value); + } } \ No newline at end of file diff --git a/src/sql/base/browser/ui/inputBox/inputBox.ts b/src/sql/base/browser/ui/inputBox/inputBox.ts index eb10b5117d..dd139a151e 100644 --- a/src/sql/base/browser/ui/inputBox/inputBox.ts +++ b/src/sql/base/browser/ui/inputBox/inputBox.ts @@ -32,6 +32,7 @@ export class InputBox extends vsInputBox { private _onLoseFocus = this._register(new Emitter()); public onLoseFocus: Event = this._onLoseFocus.event; + private _isTextAreaInput: boolean; constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) { super(container, contextViewProvider, options); @@ -48,6 +49,10 @@ export class InputBox extends vsInputBox { self._onLoseFocus.fire({ value: self.value, hasChanged: self._lastLoseFocusValue !== self.value }); self._lastLoseFocusValue = self.value; }); + + if (options && options.type === 'textarea') { + this._isTextAreaInput = true; + } } public style(styles: IInputBoxStyles): void { @@ -75,6 +80,12 @@ export class InputBox extends vsInputBox { this.inputElement.setAttribute('cols', value.toString()); } + public layout(): void { + if (!this._isTextAreaInput) { + super.layout(); + } + } + public disable(): void { super.disable(); this.inputBackground = this.disabledInputBackground; @@ -84,7 +95,9 @@ export class InputBox extends vsInputBox { } public setHeight(value: string) { - this.inputElement.style.height = value; + if (this._isTextAreaInput) { + this.inputElement.style.height = value; + } } public isEnabled(): boolean { diff --git a/src/sql/parts/modelComponents/button.component.ts b/src/sql/parts/modelComponents/button.component.ts index 23d1261d99..b32b075662 100644 --- a/src/sql/parts/modelComponents/button.component.ts +++ b/src/sql/parts/modelComponents/button.component.ts @@ -55,8 +55,6 @@ export default class ButtonComponent extends ComponentBase implements IComponent ngAfterViewInit(): void { if (this._inputContainer) { - - this._button = new Button(this._inputContainer.nativeElement); this._register(this._button); @@ -94,6 +92,12 @@ export default class ButtonComponent extends ComponentBase implements IComponent super.setProperties(properties); this._button.enabled = this.enabled; this._button.label = this.label; + if (this.width) { + this._button.setWidth(this.width.toString()); + } + if (this.height) { + this._button.setWidth(this.height.toString()); + } this.updateIcon(); } diff --git a/src/sql/parts/modelComponents/checkbox.component.ts b/src/sql/parts/modelComponents/checkbox.component.ts index dce4381fca..c0f894b065 100644 --- a/src/sql/parts/modelComponents/checkbox.component.ts +++ b/src/sql/parts/modelComponents/checkbox.component.ts @@ -50,7 +50,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone this._register(this._input); this._register(this._input.onChange(e => { - this.value = this._input.checked; + this.checked = this._input.checked; this._onEventEmitter.fire({ eventType: ComponentEventType.onDidChange, args: e @@ -88,10 +88,10 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone // CSS-bound properties public get checked(): boolean { - return this.getPropertyOrDefault((props) => props.value, false); + return this.getPropertyOrDefault((props) => props.checked, false); } - public set value(newValue: boolean) { + public set checked(newValue: boolean) { this.setPropertyFromUI((properties, value) => { properties.checked = value; }, newValue); } diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index 3c6ecad832..fa8d2a46db 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/src/sql/parts/modelComponents/componentBase.ts @@ -12,7 +12,7 @@ import { import * as types from 'vs/base/common/types'; import { IComponent, IComponentDescriptor, IModelStore, IComponentEventArgs, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; -import { FlexLayout, FlexItemLayout } from 'sqlops'; +import * as sqlops from 'sqlops'; import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive'; import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service'; import { Event, Emitter } from 'vs/base/common/event'; @@ -112,7 +112,36 @@ export abstract class ComponentBase extends Disposable implements IComponent, On this.setProperties(properties); } + public get height(): number | string { + return this.getPropertyOrDefault((props) => props.height, undefined); + } + + public set height(newValue: number | string) { + this.setPropertyFromUI((props, value) => props.height = value, newValue); + } + + public get width(): number | string { + return this.getPropertyOrDefault((props) => props.width, undefined); + } + + public set width(newValue: number | string) { + this.setPropertyFromUI((props, value) => props.width = value, newValue); + } + + protected convertSizeToNumber(size: number | string): number { + if (size && typeof (size) === 'string') { + if (size.toLowerCase().endsWith('px')) { + return +size.replace('px', ''); + } + return 0; + } + return +size; + } + protected convertSize(size: number | string): string { + if (types.isUndefinedOrNull(size)) { + return ''; + } let convertedSize: string = size ? size.toString() : '100%'; 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 478b9f234c..4665a0ddda 100644 --- a/src/sql/parts/modelComponents/dropdown.component.ts +++ b/src/sql/parts/modelComponents/dropdown.component.ts @@ -69,7 +69,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService)); this._register(this._editableDropdown.onValueChange(e => { if (this.editable) { - this.value = this._editableDropdown.value; + this.setSelectedValue(this._editableDropdown.value); this._onEventEmitter.fire({ eventType: ComponentEventType.onDidChange, args: e @@ -78,14 +78,14 @@ export default class DropDownComponent extends ComponentBase implements ICompone })); } if (this._dropDownContainer) { - this._selectBox = new SelectBox(this.values || [], this.value, this.contextViewService, this._dropDownContainer.nativeElement); + this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement); this._selectBox.render(this._dropDownContainer.nativeElement); this._register(this._selectBox); this._register(attachSelectBoxStyler(this._selectBox, this.themeService)); this._register(this._selectBox.onDidSelect(e => { if (!this.editable) { - this.value = this._selectBox.value; + this.setSelectedValue(this._selectBox.value); this._onEventEmitter.fire({ eventType: ComponentEventType.onDidChange, args: e @@ -113,14 +113,14 @@ export default class DropDownComponent extends ComponentBase implements ICompone public setProperties(properties: { [key: string]: any; }): void { super.setProperties(properties); if (this.editable) { - this._editableDropdown.values = this.values ? this.values : []; + this._editableDropdown.values = this.getValues(); if (this.value) { - this._editableDropdown.value = this.value; + this._editableDropdown.value = this.getSelectedValue(); } this._editableDropdown.enabled = this.enabled; } else { - this._selectBox.setOptions(this.values || []); - this._selectBox.selectWithOptionName(this.value); + this._selectBox.setOptions(this.getValues()); + this._selectBox.selectWithOptionName(this.getSelectedValue()); if (this.enabled) { this._selectBox.enable(); } else { @@ -129,6 +129,39 @@ export default class DropDownComponent extends ComponentBase implements ICompone } } + private getValues(): string[] { + if (this.values && this.values.length > 0) { + if (!this.valuesHaveDisplayName()) { + return this.values as string[]; + } else { + return (this.values).map(v => v.displayName); + } + } + return []; + } + + private valuesHaveDisplayName(): boolean { + return typeof (this.values[0]) !== 'string'; + } + + private getSelectedValue(): string { + if (this.values && this.valuesHaveDisplayName()) { + let valueCategory = (this.values).find(v => v.name === this.value); + return valueCategory && valueCategory.displayName; + } else { + 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; + } else { + this.value = newValue; + } + } + // CSS-bound properties private get value(): string { @@ -139,11 +172,11 @@ export default class DropDownComponent extends ComponentBase implements ICompone return this.getPropertyOrDefault((props) => props.editable, false); } - public getEditableDisplay() : string { + public getEditableDisplay(): string { return this.editable ? '' : 'none'; } - public getNotEditableDisplay() : string { + public getNotEditableDisplay(): string { return !this.editable ? '' : 'none'; } @@ -151,12 +184,12 @@ export default class DropDownComponent extends ComponentBase implements ICompone this.setPropertyFromUI(this.setValueProperties, newValue); } - private get values(): string[] { - return this.getPropertyOrDefault((props) => props.values, undefined); + private get values(): string[] | sqlops.CategoryValue[] { + return this.getPropertyOrDefault((props) => props.values, undefined); } - private set values(newValue: string[]) { - this.setPropertyFromUI(this.setValuesProperties, newValue); + private set values(newValue: string[] | sqlops.CategoryValue[]) { + this.setPropertyFromUI(this.setValuesProperties, newValue); } private setValueProperties(properties: sqlops.DropDownProperties, value: string): void { diff --git a/src/sql/parts/modelComponents/flexContainer.component.ts b/src/sql/parts/modelComponents/flexContainer.component.ts index cd8f2d43c9..78c1c5a92b 100644 --- a/src/sql/parts/modelComponents/flexContainer.component.ts +++ b/src/sql/parts/modelComponents/flexContainer.component.ts @@ -4,7 +4,8 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./flexContainer'; -import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver, +import { + Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver, ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, } from '@angular/core'; @@ -18,13 +19,13 @@ import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentW import types = require('vs/base/common/types'); class FlexItem { - constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {} + constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) { } } @Component({ template: `
+ [style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
@@ -40,6 +41,7 @@ export default class FlexContainer extends ContainerBase impleme private _alignItems: string; private _alignContent: string; private _height: string; + private _width: string; constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { super(changeRef); @@ -58,18 +60,14 @@ export default class FlexContainer extends ContainerBase impleme /// IComponent implementation - public setLayout (layout: FlexLayout): void { + public setLayout(layout: FlexLayout): void { this._flexFlow = layout.flexFlow ? layout.flexFlow : ''; this._justifyContent = layout.justifyContent ? layout.justifyContent : ''; this._alignItems = layout.alignItems ? layout.alignItems : ''; this._alignContent = layout.alignContent ? layout.alignContent : ''; - if (types.isUndefinedOrNull(layout.height)) { - this._height = ''; - } else if (types.isNumber(layout.height)) { - this._height = layout.height + 'px'; - } else { - this._height = layout.height; - } + this._height = this.convertSize(layout.height); + this._width = this.convertSize(layout.width); + this.layout(); } @@ -90,6 +88,10 @@ export default class FlexContainer extends ContainerBase impleme return this._height; } + public get width(): string { + return this._width; + } + public get alignContent(): string { return this._alignContent; } diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index b6e4cc9011..5afddcb365 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -35,10 +35,10 @@ class FormItem { @Component({ template: ` -
+
-
- +
+
{{getItemTitle(item)}}
@@ -69,7 +69,6 @@ class FormItem {
-
@@ -113,7 +112,11 @@ export default class FormContainer extends ContainerBase impleme } private getFormWidth(): string { - return this._formLayout && this._formLayout.width ? +this._formLayout.width + 'px' : '100%'; + return this.convertSize(this._formLayout && this._formLayout.width); + } + + private getFormHeight(): string { + return this.convertSize(this._formLayout && this._formLayout.height); } private getComponentWidth(item: FormItem): string { diff --git a/src/sql/parts/modelComponents/inputbox.component.ts b/src/sql/parts/modelComponents/inputbox.component.ts index f4ef757316..4506ecb235 100644 --- a/src/sql/parts/modelComponents/inputbox.component.ts +++ b/src/sql/parts/modelComponents/inputbox.component.ts @@ -73,7 +73,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone } if (this._textareaContainer) { - let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true }); + let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true, type: 'textarea' }); this._textAreaInput = new InputBox(this._textareaContainer.nativeElement, this.contextViewService, textAreaInputOptions); this.registerInput(this._textAreaInput, () => this.multiline); } @@ -124,6 +124,16 @@ export default class InputBoxComponent extends ComponentBase implements ICompone public layout(): void { this._changeRef.detectChanges(); + this.layoutInputBox(); + } + + private layoutInputBox(): void { + if (this.width) { + this.inputElement.width = this.convertSizeToNumber(this.width); + } + if (this.height) { + this.inputElement.setHeight(this.convertSize(this.height)); + } } public setLayout(layout: any): void { @@ -154,13 +164,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone input.setAriaLabel(this.ariaLabel); input.setPlaceHolder(this.placeHolder); input.setEnabled(this.enabled); - if (this.width) { - input.width = this.width; - } - if (this.height) { - input.setHeight(this.convertSize(this.height)); - input.layout(); - } + this.layoutInputBox(); if (this.multiline) { if (this.rows) { this.inputElement.rows = this.rows; @@ -200,22 +204,6 @@ export default class InputBoxComponent extends ComponentBase implements ICompone this.setPropertyFromUI((props, value) => props.placeHolder = value, newValue); } - public get height(): number { - return this.getPropertyOrDefault((props) => props.height, undefined); - } - - public set height(newValue: number) { - this.setPropertyFromUI((props, value) => props.height = value, newValue); - } - - public get width(): number { - return this.getPropertyOrDefault((props) => props.width, undefined); - } - - public set width(newValue: number) { - this.setPropertyFromUI((props, value) => props.width = value, newValue); - } - public set columns(newValue: number) { this.setPropertyFromUI((props, value) => props.columns = value, newValue); } diff --git a/src/sql/parts/modelComponents/listbox.component.ts b/src/sql/parts/modelComponents/listbox.component.ts index b4cfbed36e..81db438b09 100644 --- a/src/sql/parts/modelComponents/listbox.component.ts +++ b/src/sql/parts/modelComponents/listbox.component.ts @@ -109,20 +109,4 @@ export default class ListBoxComponent extends ComponentBase implements IComponen private set selectedRow(newValue: number) { this.setPropertyFromUI((props, value) => props.selectedRow = value, newValue); } - - public get height(): number { - return this.getPropertyOrDefault((props) => props.height, undefined); - } - - public set height(newValue: number) { - this.setPropertyFromUI((props, value) => props.height = value, newValue); - } - - public get width(): number { - return this.getPropertyOrDefault((props) => props.width, undefined); - } - - public set width(newValue: number) { - this.setPropertyFromUI((props, value) => props.width = value, newValue); - } } diff --git a/src/sql/parts/modelComponents/modelComponentWrapper.component.ts b/src/sql/parts/modelComponents/modelComponentWrapper.component.ts index eecfc1ab9d..df0cc07b9a 100644 --- a/src/sql/parts/modelComponents/modelComponentWrapper.component.ts +++ b/src/sql/parts/modelComponents/modelComponentWrapper.component.ts @@ -25,10 +25,18 @@ import { Registry } from 'vs/platform/registry/common/platform'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { memoize } from 'vs/base/common/decorators'; import { generateUuid } from 'vs/base/common/uuid'; +import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService'; +import { Event, Emitter } from 'vs/base/common/event'; import * as nls from 'vs/nls'; const componentRegistry = Registry.as(Extensions.ComponentContribution); +export interface ModelComponentParams extends IBootstrapParams { + + onLayoutRequested: Event; + modelViewId: string; +} + @Component({ selector: 'model-component-wrapper', template: ` @@ -46,6 +54,7 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit { } private _componentInstance: IComponent; + private _modelViewId: string; @ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective; @@ -54,9 +63,18 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit { @Inject(forwardRef(() => ElementRef)) private _ref: ElementRef, @Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef, @Inject(forwardRef(() => Injector)) private _injector: Injector, - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService + @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, + @Inject(IBootstrapParams) private _params: ModelComponentParams ) { super(); + if (_params && _params.onLayoutRequested) { + this._modelViewId = _params.modelViewId; + _params.onLayoutRequested(modelViewId => { + if (modelViewId === this._modelViewId) { + this.layout(); + } + }); + } } ngOnInit() { diff --git a/src/sql/parts/modelComponents/modelViewContent.component.ts b/src/sql/parts/modelComponents/modelViewContent.component.ts index 8fd10a7d5a..12a10f2e1e 100644 --- a/src/sql/parts/modelComponents/modelViewContent.component.ts +++ b/src/sql/parts/modelComponents/modelViewContent.component.ts @@ -62,6 +62,7 @@ export class ModelViewContent extends ViewBase implements OnInit, IModelView { } public layout(): void { + this.changeRef.detectChanges(); } public get id(): string { diff --git a/src/sql/parts/modelComponents/table.component.ts b/src/sql/parts/modelComponents/table.component.ts index 3299488095..b38b5c8f28 100644 --- a/src/sql/parts/modelComponents/table.component.ts +++ b/src/sql/parts/modelComponents/table.component.ts @@ -127,13 +127,19 @@ export default class TableComponent extends ComponentBase implements IComponent, /// IComponent implementation public layout(): void { - this._table.layout(new Dimension( - this.width ? this.width : getContentWidth(this._inputContainer.nativeElement), - this.height ? this.height : getContentHeight(this._inputContainer.nativeElement))); + this.layoutTable(); this._changeRef.detectChanges(); } + private layoutTable(): void { + let width: number = this.convertSizeToNumber(this.width); + let height: number = this.convertSizeToNumber(this.height); + this._table.layout(new Dimension( + width && width > 0 ? width : getContentWidth(this._inputContainer.nativeElement), + height && height > 0 ? height : getContentHeight(this._inputContainer.nativeElement))); + } + public setLayout(): void { // TODO allow configuring the look and feel this.layout(); @@ -149,10 +155,8 @@ export default class TableComponent extends ComponentBase implements IComponent, if (this.selectedRows) { this._table.setSelectedRows(this.selectedRows); } - this._table.layout(new Dimension( - this.width ? this.width : getContentWidth(this._inputContainer.nativeElement), - this.height ? this.height : getContentHeight(this._inputContainer.nativeElement))); + this.layoutTable(); this.validate(); } @@ -181,20 +185,4 @@ export default class TableComponent extends ComponentBase implements IComponent, public set selectedRows(newValue: number[]) { this.setPropertyFromUI((props, value) => props.selectedRows = value, newValue); } - - public get height(): number { - return this.getPropertyOrDefault((props) => props.height, undefined); - } - - public set height(newValue: number) { - this.setPropertyFromUI((props, value) => props.height = value, newValue); - } - - public get width(): number { - return this.getPropertyOrDefault((props) => props.width, undefined); - } - - public set width(newValue: number) { - this.setPropertyFromUI((props, value) => props.width = value, newValue); - } } diff --git a/src/sql/platform/dialog/dialogContainer.component.ts b/src/sql/platform/dialog/dialogContainer.component.ts index 68716c2130..5abd0f0ea6 100644 --- a/src/sql/platform/dialog/dialogContainer.component.ts +++ b/src/sql/platform/dialog/dialogContainer.component.ts @@ -15,6 +15,7 @@ import { ComponentEventType } from '../../parts/modelComponents/interfaces'; export interface DialogComponentParams extends IBootstrapParams { modelViewId: string; validityChangedCallback: (valid: boolean) => void; + onLayoutRequested: Event; } @Component({ @@ -35,6 +36,11 @@ export class DialogContainer implements AfterContentInit { @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, @Inject(IBootstrapParams) private _params: DialogComponentParams) { this.modelViewId = this._params.modelViewId; + this._params.onLayoutRequested(e => { + if (this.modelViewId === e) { + this.layout(); + } + }); } ngAfterContentInit(): void { diff --git a/src/sql/platform/dialog/dialogPane.ts b/src/sql/platform/dialog/dialogPane.ts index 5fb52a2006..d4dc349ee6 100644 --- a/src/sql/platform/dialog/dialogPane.ts +++ b/src/sql/platform/dialog/dialogPane.ts @@ -21,6 +21,7 @@ import { Builder } from 'vs/base/browser/builder'; import { IThemable } from 'vs/platform/theme/common/styler'; import { Disposable } from 'vs/base/common/lifecycle'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { Emitter } from 'vs/base/common/event'; export class DialogPane extends Disposable implements IThemable { private _tabbedPanel: TabbedPanel; @@ -34,6 +35,9 @@ export class DialogPane extends Disposable implements IThemable { private _tabBar: HTMLElement; private _tabs: HTMLElement[]; private _tabContent: HTMLElement[]; + private _selectedTabIndex: number = 0; //TODO: can be an option + private _onTabChange = new Emitter(); + private _selectedTabContent: string; constructor( private _title: string, @@ -55,10 +59,16 @@ export class DialogPane extends Disposable implements IThemable { } else { this._tabbedPanel = new TabbedPanel(this._body); this._content.forEach((tab, tabIndex) => { + if (this._selectedTabIndex === tabIndex) { + this._selectedTabContent = tab.content; + } let tabContainer = document.createElement('div'); tabContainer.style.display = 'none'; this._body.appendChild(tabContainer); this.initializeModelViewContainer(tabContainer, tab.content, tab); + this._tabbedPanel.onTabChange(e => { + this._onTabChange.fire(tab.content); + }); this._tabbedPanel.pushTab({ title: tab.title, identifier: 'dialogPane.' + this._title + '.' + tabIndex, @@ -70,7 +80,7 @@ export class DialogPane extends Disposable implements IThemable { container.appendChild(tabContainer); tabContainer.style.display = 'block'; }, - layout: (dimension) => { } + layout: (dimension) => { this.getTabDimension(); } } as IPanelView } as IPanelTab); }); @@ -80,9 +90,14 @@ export class DialogPane extends Disposable implements IThemable { return this._body; } + private getTabDimension(): DOM.Dimension { + return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body)) + } + public layout(): void { if (this._tabbedPanel) { this._tabbedPanel.layout(new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body))); + this._onTabChange.fire(this._selectedTabContent); } } @@ -101,10 +116,13 @@ export class DialogPane extends Disposable implements IThemable { if (tab) { tab.notifyValidityChanged(valid); } - } + }, + onLayoutRequested: this._onTabChange.event } as DialogComponentParams, undefined, - (moduleRef) => this._moduleRefs.push(moduleRef)); + (moduleRef) => { + return this._moduleRefs.push(moduleRef); + }); } public show(): void { diff --git a/src/sql/platform/dialog/media/dialogModal.css b/src/sql/platform/dialog/media/dialogModal.css index 155d4802fc..54c1578089 100644 --- a/src/sql/platform/dialog/media/dialogModal.css +++ b/src/sql/platform/dialog/media/dialogModal.css @@ -29,4 +29,4 @@ .footer-button.dialogModal-hidden { margin: 0; -} +} \ No newline at end of file diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 712349874f..0887e7c40f 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -207,7 +207,15 @@ declare module 'sqlops' { */ alignContent?: string; + /** + * Container Height + */ height?: number | string; + + /** + * Container Width + */ + width?: number | string; } export interface FlexItemLayout { @@ -228,7 +236,8 @@ declare module 'sqlops' { } export interface FormLayout { - width?: number; + width?: number | string; + height?: number | string; } export interface GroupLayout { @@ -294,12 +303,15 @@ declare module 'sqlops' { export type InputBoxInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'range' | 'search' | 'text' | 'time' | 'url' | 'week'; - export interface InputBoxProperties { + export interface ComponentProperties { + height: number | string; + width: number | string; + } + + export interface InputBoxProperties extends ComponentProperties { value?: string; ariaLabel?: string; placeHolder?: string; - height: number; - width: number; inputType?: InputBoxInputType; required?: boolean; multiline?: boolean; @@ -313,7 +325,7 @@ declare module 'sqlops' { value: string } - export interface TableComponentProperties { + export interface TableComponentProperties extends ComponentProperties { data: any[][]; columns: string[] | TableColumn[]; selectedRows?: number[]; @@ -341,9 +353,9 @@ declare module 'sqlops' { value?: string; } - export interface DropDownProperties { + export interface DropDownProperties extends ComponentProperties { value?: string; - values?: string[]; + values?: string[] | CategoryValue[]; editable?: boolean; } @@ -352,7 +364,7 @@ declare module 'sqlops' { categoryValues: CategoryValue[]; valueType: DeclarativeDataType; isReadOnly: boolean; - width: number|string; + width: number | string; } export interface DeclarativeTableProperties { @@ -371,7 +383,7 @@ declare module 'sqlops' { html?: string; } - export interface ButtonProperties { + export interface ButtonProperties extends ComponentProperties { label?: string; iconPath?: string | vscode.Uri | { light: string | vscode.Uri; dark: string | vscode.Uri }; } @@ -407,7 +419,7 @@ declare module 'sqlops' { export interface DropDownComponent extends Component, DropDownProperties { value: string; - values: string[]; + 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 a9ee235e3f..3695c3fa96 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -342,7 +342,6 @@ class InternalItemConfig { } } - class ComponentWrapper implements sqlops.Component { public properties: { [key: string]: any } = {}; public layout: any; @@ -385,6 +384,22 @@ class ComponentWrapper implements sqlops.Component { this.setProperty('enabled', value); } + public get height(): number | string { + return this.properties['height']; + } + + public set height(v: number | string) { + this.setProperty('height', v); + } + + public get width(): number | string { + return this.properties['width']; + } + + public set width(v: number | string) { + this.setProperty('width', v); + } + public toComponentShape(): IComponentShape { return { id: this.id, @@ -553,13 +568,6 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone this.setProperty('placeHolder', v); } - public get height(): number { - return this.properties['height']; - } - public set height(v: number) { - this.setProperty('height', v); - } - public get rows(): number { return this.properties['rows']; } @@ -588,13 +596,6 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone this.setProperty('columns', v); } - public get width(): number { - return this.properties['width']; - } - public set width(v: number) { - this.setProperty('width', v); - } - public get multiline(): boolean { return this.properties['multiline']; } @@ -777,10 +778,10 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone this.setProperty('value', v); } - public get values(): string[] { + public get values(): string[] | sqlops.CategoryValue[] { return this.properties['values']; } - public set values(v: string[]) { + public set values(v: string[] | sqlops.CategoryValue[]) { this.setProperty('values', v); }