diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index a881b2e9b8..45cbf91128 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/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: ` -
+
-
{{getItemTitle(item)}}
+
+ {{getItemTitle(item)}}* + +
@@ -59,7 +66,10 @@ class FormItem {
-
{{getItemTitle(item)}}
+
+ {{getItemTitle(item)}}* + +
@@ -121,6 +131,10 @@ export default class FormContainer extends ContainerBase 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 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; diff --git a/src/sql/parts/modelComponents/formLayout.css b/src/sql/parts/modelComponents/formLayout.css index 3d9266c211..60442271b8 100644 --- a/src/sql/parts/modelComponents/formLayout.css +++ b/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; } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 3955e15727..a49f238be9 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/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 { diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index c2cf3549e2..7c2e3b93a1 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -255,6 +255,9 @@ class FormContainerBuilder extends ContainerBuilderImpl { @@ -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 { id: this.id,