diff --git a/src/sql/parts/modelComponents/checkbox.component.ts b/src/sql/parts/modelComponents/checkbox.component.ts index edf91666f0..d04dea5258 100644 --- a/src/sql/parts/modelComponents/checkbox.component.ts +++ b/src/sql/parts/modelComponents/checkbox.component.ts @@ -18,7 +18,7 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler'; @Component({ - selector: 'inputBox', + selector: 'checkbox', template: `
` diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index 38f660628e..6897b9b757 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/src/sql/parts/modelComponents/componentBase.ts @@ -86,10 +86,10 @@ export abstract class ComponentBase extends Disposable implements IComponent, On }); } - public get title(): string { + public get enabled(): boolean { let properties = this.getProperties(); - let title = properties['title']; - return title ? title : ''; + let enabled = properties['enabled']; + return enabled !== undefined ? enabled : true; } public get valid(): boolean { diff --git a/src/sql/parts/modelComponents/dropdown.component.ts b/src/sql/parts/modelComponents/dropdown.component.ts index c4afb27ac4..00d613e0ae 100644 --- a/src/sql/parts/modelComponents/dropdown.component.ts +++ b/src/sql/parts/modelComponents/dropdown.component.ts @@ -19,7 +19,7 @@ import { attachListStyler } from 'vs/platform/theme/common/styler'; import { attachEditableDropdownStyler } from 'sql/common/theme/styler'; @Component({ - selector: 'inputBox', + selector: 'dropdown', template: `
` diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index 7342871a09..7f6bfd5784 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -22,6 +22,8 @@ export interface TitledFormItemLayout { actions?: string[]; isFormComponent: Boolean; horizontal: boolean; + width: number; + componentWidth: number; } class FormItem { constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { } @@ -29,20 +31,20 @@ class FormItem { @Component({ template: ` -
-
+
+ +
{{getItemTitle(item)}}
-
+
- +
@@ -50,8 +52,8 @@ class FormItem {
{{getItemTitle(item)}}
-
- +
+
@@ -65,6 +67,7 @@ class FormItem {
+
` }) @@ -113,6 +116,16 @@ export default class FormContainer extends ContainerBase impleme return this._alignContent; } + private getFormWidth(item: FormItem): string { + let itemConfig = item.config; + return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '400px'; + } + + private getComponentWidth(item: FormItem): string { + let itemConfig = item.config; + return itemConfig ? itemConfig.componentWidth + 'px' : ''; + } + private getItemTitle(item: FormItem): string { let itemConfig = item.config; return itemConfig ? itemConfig.title : ''; diff --git a/src/sql/parts/modelComponents/formLayout.css b/src/sql/parts/modelComponents/formLayout.css index d2b2a1520a..8c1687a40d 100644 --- a/src/sql/parts/modelComponents/formLayout.css +++ b/src/sql/parts/modelComponents/formLayout.css @@ -36,7 +36,3 @@ padding-right: 5px; display: table-cell; } - -.form-action { - width: 20px; -} \ No newline at end of file diff --git a/src/sql/parts/modelComponents/inputbox.component.ts b/src/sql/parts/modelComponents/inputbox.component.ts index 11da4e7e64..e3cbe461e3 100644 --- a/src/sql/parts/modelComponents/inputbox.component.ts +++ b/src/sql/parts/modelComponents/inputbox.component.ts @@ -92,6 +92,12 @@ export default class InputBoxComponent extends ComponentBase implements ICompone public setProperties(properties: { [key: string]: any; }): void { super.setProperties(properties); this._input.value = this.value; + this._input.setAriaLabel(this.ariaLabel); + this._input.setPlaceHolder(this.placeHolder); + this._input.setEnabled(this.enabled); + if (this.width) { + this._input.width = this.width; + } } public setValid(valid: boolean): void { @@ -106,10 +112,38 @@ export default class InputBoxComponent extends ComponentBase implements ICompone } public set value(newValue: string) { - this.setPropertyFromUI(this.setInputBoxProperties, newValue); + this.setPropertyFromUI((props, value) => props.value = value, newValue); } - private setInputBoxProperties(properties: sqlops.InputBoxProperties, value: string): void { - properties.value = value; + public get ariaLabel(): string { + return this.getPropertyOrDefault((props) => props.ariaLabel, ''); + } + + public set ariaLabel(newValue: string) { + this.setPropertyFromUI((props, value) => props.ariaLabel = value, newValue); + } + + public get placeHolder(): string { + return this.getPropertyOrDefault((props) => props.placeHolder, ''); + } + + public set placeHolder(newValue: string) { + 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); } } diff --git a/src/sql/parts/modelComponents/interfaces.ts b/src/sql/parts/modelComponents/interfaces.ts index 67acfef764..2cf9194fcc 100644 --- a/src/sql/parts/modelComponents/interfaces.ts +++ b/src/sql/parts/modelComponents/interfaces.ts @@ -25,7 +25,6 @@ export interface IComponent { setProperties?: (properties: { [key: string]: any; }) => void; readonly valid?: boolean; setValid(valid: boolean): void; - title?: string; } export const COMPONENT_CONFIG = new InjectionToken('component_config'); diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 3d7995f046..cb340bbc45 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -58,6 +58,7 @@ declare module 'sqlops' { */ updateProperties(properties: { [key: string]: any }): Thenable; + enabled: boolean; /** * Event fired to notify that the component's validity has changed */ @@ -162,6 +163,8 @@ declare module 'sqlops' { export interface FormItemLayout { horizontal: boolean; + width: number; + componentWidth: number; } export interface FormLayout { @@ -203,6 +206,10 @@ declare module 'sqlops' { export interface InputBoxProperties { value?: string; + ariaLabel?: string; + placeHolder?: string; + height: number; + width: number; } export interface CheckBoxProperties { @@ -225,8 +232,7 @@ declare module 'sqlops' { actions?: ActionDescriptor[]; } - export interface InputBoxComponent extends Component { - value: string; + export interface InputBoxComponent extends Component, InputBoxProperties { onTextChanged: vscode.Event; } @@ -303,7 +309,7 @@ declare module 'sqlops' { initializeModel(root: T): Thenable; } - export namespace dashboard { + export namespace ui { /** * Register a provider for a model-view widget */ diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index 7688b1715e..43519a6559 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -243,6 +243,14 @@ class ComponentWrapper implements sqlops.Component { return this.itemConfigs.map(itemConfig => itemConfig.component); } + public get enabled(): boolean { + return this.properties['enabled']; + } + + public set enabled(value: boolean) { + this.setProperty('enabled', value); + } + public toComponentShape(): IComponentShape { return { id: this.id, @@ -391,6 +399,34 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone this.setProperty('value', v); } + public get ariaLabel(): string { + return this.properties['ariaLabel']; + } + public set ariaLabel(v: string) { + this.setProperty('ariaLabel', v); + } + + public get placeHolder(): string { + return this.properties['placeHolder']; + } + public set placeHolder(v: string) { + this.setProperty('placeHolder', v); + } + + public get height(): number { + return this.properties['height']; + } + public set height(v: number) { + this.setProperty('height', v); + } + + public get width(): number { + return this.properties['width']; + } + public set width(v: number) { + this.setProperty('width', v); + } + public get onTextChanged(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onDidChange); return emitter && emitter.event; diff --git a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts b/src/sql/workbench/api/node/sqlExtHost.api.impl.ts index 7b15f1335b..8569b31930 100644 --- a/src/sql/workbench/api/node/sqlExtHost.api.impl.ts +++ b/src/sql/workbench/api/node/sqlExtHost.api.impl.ts @@ -324,9 +324,12 @@ export function createApiFactory( const dashboard = { registerWebviewProvider(widgetId: string, handler: (webview: sqlops.DashboardWebview) => void) { extHostWebviewWidgets.$registerProvider(widgetId, handler); - }, - registerModelViewProvider(widgetId: string, handler: (view: sqlops.ModelView) => void): void { - extHostModelView.$registerProvider(widgetId, handler); + } + }; + + const ui = { + registerModelViewProvider(modelViewId: string, handler: (view: sqlops.ModelView) => void): void { + extHostModelView.$registerProvider(modelViewId, handler); } }; @@ -361,7 +364,8 @@ export function createApiFactory( tasks, dashboard, workspace, - queryeditor: queryEditor + queryeditor: queryEditor, + ui: ui }; } };