ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-16 09:35:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feature/form improvements (#1707)

Browse Source 
* adding more options for form

* added form requied and info for item
This commit is contained in:
Leila Lali
2018-06-21 15:26:52 -07:00
committed by GitHub
parent f5b147ca4b
commit 1871fd383e
4 changed files with 57 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/sql/parts/modelComponents/formContainer.component.ts
View File

@@ -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;