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

fixing the table, form dialog tab layout issues (#1671)

Browse Source
This commit is contained in:
Leila Lali
2018-06-19 10:55:23 -07:00
committed by GitHub
parent 80ab19ac23
commit e686fed209
9 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,13 +16,15 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
import { getContentHeight, getContentWidth, Dimension } from 'vs/base/browser/dom';
export interface TitledFormItemLayout {
title: string;
actions?: string[];
isFormComponent: Boolean;
horizontal: boolean;
componentWidth: number;
componentWidth?: number | string;
componentHeight?: number | string;
}
export interface FormLayout {
@@ -37,7 +39,7 @@ class FormItem {
template: `
<div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()" [style.height]="getFormHeight()">
<ng-container *ngFor="let item of items">
<div class="form-row" *ngIf="isFormComponent(item)">
<div class="form-row" *ngIf="isFormComponent(item)" [style.height]="getRowHeight(item)">
<ng-container *ngIf="isHorizontal(item)">
<div class="form-cell">{{getItemTitle(item)}}</div>
@@ -56,10 +58,10 @@ class FormItem {
</div>
</div>
</ng-container>
<div class="form-vertical-container" *ngIf="isVertical(item)">
<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.width]="getComponentWidth(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
<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>
</div>
<div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
@@ -101,6 +103,10 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
ngAfterViewInit(): void {
}
public layout(): void {
super.layout();
}
/// IComponent implementation
public get alignItems(): string {
@@ -112,16 +118,21 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
}
private getFormWidth(): string {
return this.convertSize(this._formLayout && this._formLayout.width);
return this.convertSize(this._formLayout && this._formLayout.width, '100%');
}
private getFormHeight(): string {
return this.convertSize(this._formLayout && this._formLayout.height);
return this.convertSize(this._formLayout && this._formLayout.height, '100%');
}
private getComponentWidth(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
return (itemConfig && itemConfig.componentWidth) ? this.convertSize(itemConfig.componentWidth, '') : '';
}
private getRowHeight(item: FormItem): string {
let itemConfig = item.config;
return (itemConfig && itemConfig.componentHeight) ? this.convertSize(itemConfig.componentHeight, '') : '';
}
private getItemTitle(item: FormItem): string {