ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

fixed the issue with setting form's width (#1472)

Browse Source
This commit is contained in:
Leila Lali
2018-05-23 10:23:03 -07:00
committed by GitHub
parent 36a8991682
commit 259306a8db
3 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,18 +22,22 @@ export interface TitledFormItemLayout {
actions?: string[]; actions?: string[];
isFormComponent: Boolean; isFormComponent: Boolean;
horizontal: boolean; horizontal: boolean;
width: number;
componentWidth: number; componentWidth: number;
} }
export interface FormLayout {
width: number;
}
class FormItem { class FormItem {
constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { } constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { }
} }
@Component({ @Component({
template: ` template: `
<div #container *ngIf="items" class="form-table" > <div #container *ngIf="items" class="form-table" [style.width]="getFormWidth()">
<ng-container *ngFor="let item of items"> <ng-container *ngFor="let item of items">
<div class="form-row" [style.width]="getFormWidth(item)"> <div class="form-row" >
<ng-container *ngIf="isFormComponent(item)"> <ng-container *ngIf="isFormComponent(item)">
<ng-container *ngIf="isHorizontal(item)"> <ng-container *ngIf="isHorizontal(item)">
<div class="form-cell">{{getItemTitle(item)}}</div> <div class="form-cell">{{getItemTitle(item)}}</div>
@@ -77,6 +81,7 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
private _alignItems: string; private _alignItems: string;
private _alignContent: string; private _alignContent: string;
private _formLayout: FormLayout;
@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>; @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
@ViewChild('container', { read: ElementRef }) private _container: ElementRef; @ViewChild('container', { read: ElementRef }) private _container: ElementRef;
@@ -116,9 +121,8 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
return this._alignContent; return this._alignContent;
} }
private getFormWidth(item: FormItem): string { private getFormWidth(): string {
let itemConfig = item.config; return this._formLayout && this._formLayout.width ? +this._formLayout.width + 'px' : '100%';
return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '100%';
} }
private getComponentWidth(item: FormItem): string { private getComponentWidth(item: FormItem): string {
@@ -155,7 +159,8 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
return itemConfig && itemConfig.actions !== undefined && itemConfig.actions.length > 0; return itemConfig && itemConfig.actions !== undefined && itemConfig.actions.length > 0;
} }
public setLayout(layout: any): void { public setLayout(layout: FormLayout): void {
this._formLayout = layout;
this.layout(); this.layout();
} }

1
src/sql/parts/modelComponents/formLayout.css
View File

@@ -1,6 +1,5 @@
.form-table { .form-table {
width: 100%;
display: table; display: table;
padding: 10px 30px 0px 30px; padding: 10px 30px 0px 30px;
box-sizing: border-box; box-sizing: border-box;

3
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -184,12 +184,11 @@ declare module 'sqlops' {
export interface FormItemLayout { export interface FormItemLayout {
horizontal: boolean; horizontal: boolean;
width: number;
componentWidth: number; componentWidth: number;
} }
export interface FormLayout { export interface FormLayout {
width: number;
} }
export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> { export interface FlexContainer extends Container<FlexLayout, FlexItemLayout> {