added properties to inputbox and form to be able to change style fro… (#1371)

* added properties to inputbox and form to be able to change style from extension
* moved registerModelViewProvider from dashboard to ui namespace

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: `
 		<div #input style="width: 100%"></div>
 	`

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 ? <string>title : '';
+		let enabled = properties['enabled'];
+		return enabled !== undefined ? <boolean>enabled : true;
 	}
 
 	public get valid(): boolean {

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: `
 		<div #input style="width: 100%"></div>
 	`

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: `
-		<div #container *ngIf="items" class="form-table"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
-			<div *ngFor="let item of items" class="form-row">
+		<div #container *ngIf="items" class="form-table" >
+			<ng-container *ngFor="let item of items">
+			<div class="form-row" [style.width]="getFormWidth(item)">
 				<ng-container *ngIf="isFormComponent(item)">
 					<ng-container *ngIf="isHorizontal(item)">
 						<div class="form-cell">{{getItemTitle(item)}}</div>
-						<div class="form-cell">
+						<div class="form-cell" [style.width]="getComponentWidth(item)">
 							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 							</model-component-wrapper>
 						</div>
 						<div *ngIf="itemHasActions(item)" class="form-cell">
 							<div class="form-actions-table">
 								<div *ngFor="let actionItem of getActionComponents(item)" class="form-cell" >
-									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
+									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
 									</model-component-wrapper>
 								</div>
 							</div>
@@ -50,8 +52,8 @@ class FormItem {
 					</ng-container>
 					<ng-container *ngIf="isVertical(item)">
 						<div class="form-item-row form-item-title">{{getItemTitle(item)}}</div>
-						<div class="form-item-row">
-							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
+						<div class="form-item-row" [style.width]="getComponentWidth(item)">
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
 							</model-component-wrapper>
 						</div>
 						<div *ngIf="itemHasActions(item)" class="form-actions-table">
@@ -65,6 +67,7 @@ class FormItem {
 					</ng-container>
 				</ng-container>
 			</div>
+			</ng-container>
 		</div>
 	`
 })
@@ -113,6 +116,16 @@ export default class FormContainer extends ContainerBase<FormItemLayout> 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 : '';

src/sql/parts/modelComponents/formLayout.css

@@ -36,7 +36,3 @@
 	padding-right: 5px;
 	display: table-cell;
 }
-
-.form-action {
-	width: 20px;
-}

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<sqlops.InputBoxProperties, string>(this.setInputBoxProperties, newValue);
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.value = value, newValue);
 	}
 
-	private setInputBoxProperties(properties: sqlops.InputBoxProperties, value: string): void {
-		properties.value = value;
+	public get ariaLabel(): string {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, string>((props) => props.ariaLabel, '');
+	}
+
+	public set ariaLabel(newValue: string) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.ariaLabel = value, newValue);
+	}
+
+	public get placeHolder(): string {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, string>((props) => props.placeHolder, '');
+	}
+
+	public set placeHolder(newValue: string) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.placeHolder = value, newValue);
+	}
+
+	public get height(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.height, undefined);
+	}
+
+	public set height(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.height = value, newValue);
+	}
+
+	public get width(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.width, undefined);
+	}
+
+	public set width(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.width = value, newValue);
 	}
 }

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<IComponentConfig>('component_config');