Feature/form improvements (#1707)

* adding more options for form

* added form requied and info for item

src/sql/parts/modelComponents/formContainer.component.ts

@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./formLayout';
+import 'vs/css!sql/media/icons/common-icons';
 
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
@@ -25,6 +26,9 @@ export interface TitledFormItemLayout {
 	horizontal: boolean;
 	componentWidth?: number | string;
 	componentHeight?: number | string;
+	titleFontSize?: number;
+	required?: boolean;
+	info?: string;
 }
 
 export interface FormLayout {
@@ -37,12 +41,15 @@ class FormItem {
 
 @Component({
 	template: `
-		<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
+		<div #container *ngIf="items" class="form-table" [style.padding]="getFormPadding()" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
 			<ng-container *ngFor="let item of items">
 			<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
 
 					<ng-container *ngIf="isHorizontal(item)">
-						<div class="form-cell">{{getItemTitle(item)}}</div>
+						<div class="form-cell" [style.font-size]="getItemTitleFontSize(item)">
+							{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
+							<span class="icon info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
+						</div>
 						<div class="form-cell">
 							<div class="form-component-container">
 								<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
@@ -59,7 +66,10 @@ class FormItem {
 						</div>
 					</ng-container>
 					<div class="form-vertical-container" *ngIf="isVertical(item)" [style.height]="getRowHeight(item)">
-						<div class="form-item-row">{{getItemTitle(item)}}</div>
+						<div class="form-item-row" [style.font-size]="getItemTitleFontSize(item)">
+							{{getItemTitle(item)}}<span class="form-required" *ngIf="isItemRequired(item)">*</span>
+							<span class="icon info" *ngIf="itemHasInfo(item)" [title]="getItemInfo(item)"></span>
+						</div>
 						<div class="form-item-row" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
 							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)" [style.height]="getRowHeight(item)">
 							</model-component-wrapper>
@@ -121,6 +131,10 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		return this.convertSize(this._formLayout && this._formLayout.width, '');
 	}
 
+	private getFormPadding(): string {
+		return this._formLayout && this._formLayout.padding ? this._formLayout.padding : '10px 30px 0px 30px';
+	}
+
 	private getFormHeight(): string {
 		return this.convertSize(this._formLayout && this._formLayout.height, '');
 	}
@@ -135,11 +149,32 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
 	}
 
+	private isItemRequired(item: FormItem): boolean {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.required;
+	}
+
+	private getItemInfo(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.info;
+	}
+
+	private itemHasInfo(item: FormItem): boolean {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.info !== undefined;
+	}
+
+
 	private getItemTitle(item: FormItem): string {
 		let itemConfig = item.config;
 		return itemConfig ? itemConfig.title : '';
 	}
 
+	private getItemTitleFontSize(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.titleFontSize ? this.convertSize(itemConfig.titleFontSize, '11px') : '11px';
+	}
+
 	private getActionComponents(item: FormItem): FormItem[] {
 		let items = this.items;
 		let itemConfig = item.config;

src/sql/parts/modelComponents/formLayout.css

@@ -37,6 +37,11 @@
 	flex: 1;
 }
 
+.form-required {
+	color: red;
+	padding-left: 5px;
+}
+
 .form-component-actions {
 	padding-left: 5px;
 }

src/sql/sqlops.proposed.d.ts

@@ -239,11 +239,15 @@ declare module 'sqlops' {
 		horizontal?: boolean;
 		componentWidth?: number | string;
 		componentHeight?: number | string;
+		titleFontSize?: number;
+		required?: boolean;
+		info?: string;
 	}
 
 	export interface FormLayout {
 		width?: number | string;
 		height?: number | string;
+		padding?: string;
 	}
 
 	export interface GroupLayout {

src/sql/workbench/api/node/extHostModelView.ts

@@ -255,6 +255,9 @@ class FormContainerBuilder extends ContainerBuilderImpl<sqlops.FormContainer, sq
 
 	private convertToItemConfig(formComponent: sqlops.FormComponent, itemLayout?: sqlops.FormItemLayout): InternalItemConfig {
 		let componentWrapper = formComponent.component as ComponentWrapper;
+		if (itemLayout && itemLayout.required && componentWrapper) {
+			componentWrapper.required = true;
+		}
 		let actions: string[] = undefined;
 		if (formComponent.actions) {
 			actions = formComponent.actions.map(action => {
@@ -400,6 +403,13 @@ class ComponentWrapper implements sqlops.Component {
 		this.setProperty('width', v);
 	}
 
+	public get required(): boolean {
+		return this.properties['required'];
+	}
+	public set required(v: boolean) {
+		this.setProperty('required', v);
+	}
+
 	public toComponentShape(): IComponentShape {
 		return <IComponentShape>{
 			id: this.id,