fixed the layout issue in model view containers (#1548)

* fixed the layout issue in model view containers

* fixed the sample

samples/sqlservices/src/controllers/mainController.ts

@@ -285,25 +285,14 @@ export default class MainController implements vscode.Disposable {
 			let webview = view.modelBuilder.webView()
 				.component();
 
-			let flexModel = view.modelBuilder.flexContainer()
+			let flexModel = view.modelBuilder.flexContainer().component();
-				.withLayout({
+			flexModel.addItem(toolbarModel, { flex: '0' });
-					flexFlow: 'column',
+			flexModel.addItem(webview, { flex: '1' });
-					alignItems: 'stretch',
+			flexModel.setLayout({
-					height: '100%'
+				flexFlow: 'column',
-				}).withItems([
+				alignItems: 'stretch',
-					toolbarModel, webview
+				height: '100%'
-				], { flex: '1' })
+			});
-				.component();
-
-			// bug: #1531
-			// let flexModel = view.modelBuilder.flexContainer().component();
-			// flexModel.addItem(toolbarModel, { flex: '0' });
-			// flexModel.addItem(webview, { flex: '1' });
-			// flexModel.setLayout({
-			// 	flexFlow: 'column',
-			// 	alignItems: 'stretch',
-			// 	height: '100%'
-			// });
 
 			let templateValues = {url: 'http://whoisactive.com/docs/'};
 			Utils.renderTemplateHtml(path.join(__dirname, '..'), 'templateTab.html', templateValues)

src/sql/parts/modelComponents/componentBase.ts

@@ -6,7 +6,7 @@ import 'vs/css!./flexContainer';
 
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
-	ViewChild, ElementRef, Injector, OnDestroy, OnInit
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, OnInit, QueryList
 } from '@angular/core';
 
 import * as types from 'vs/base/common/types';
@@ -17,6 +17,7 @@ import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import Event, { Emitter } from 'vs/base/common/event';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
+import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 
 export class ItemDescriptor<T> {
 	constructor(public descriptor: IComponentDescriptor, public config: T) { }
@@ -152,6 +153,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 export abstract class ContainerBase<T> extends ComponentBase {
 	protected items: ItemDescriptor<T>[];
 
+	@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>;
 	constructor(
 		_changeRef: ChangeDetectorRef
 	) {
@@ -189,5 +191,14 @@ export abstract class ContainerBase<T> extends ComponentBase {
 		});
 	}
 
+	public layout(): void {
+		if (this._componentWrappers) {
+			this._componentWrappers.forEach(wrapper => {
+				wrapper.layout();
+			});
+		}
+		super.layout();
+	}
+
 	abstract setLayout(layout: any): void;
 }

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

@@ -41,8 +41,6 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _alignContent: string;
 	private _height: string;
 
-	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
-
 	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
 		super(changeRef);
 		this._flexFlow = '';	// default
@@ -60,14 +58,6 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 
 	/// IComponent implementation
 
-	public layout(): void {
-		if (this._componentWrappers) {
-			this._componentWrappers.forEach(wrapper => {
-				wrapper.layout();
-			});
-		}
-	}
-
 	public setLayout (layout: FlexLayout): void {
 		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
 		this._justifyContent = layout.justifyContent ? layout.justifyContent : '';

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

@@ -83,7 +83,6 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	private _alignContent: string;
 	private _formLayout: FormLayout;
 
-	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
 	constructor(
@@ -105,14 +104,6 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 
 	/// IComponent implementation
 
-	public layout(): void {
-		if (this._componentWrappers) {
-			this._componentWrappers.forEach(wrapper => {
-				wrapper.layout();
-			});
-		}
-	}
-
 	public get alignItems(): string {
 		return this._alignItems;
 	}

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

@@ -41,7 +41,6 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
 
 	private _containerLayout: GroupLayout;
 
-	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
 	constructor(
@@ -63,14 +62,6 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
 
 	/// IComponent implementation
 
-	public layout(): void {
-		if (this._componentWrappers) {
-			this._componentWrappers.forEach(wrapper => {
-				wrapper.layout();
-			});
-		}
-	}
-
 	public setLayout(layout: GroupLayout): void {
 		this._containerLayout = layout;
 		this.layout();

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

@@ -46,7 +46,6 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 
-	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
 	constructor(
@@ -68,14 +67,6 @@ export default class ToolbarContainer extends ContainerBase<ToolbarItemConfig> i
 
 	/// IComponent implementation
 
-	public layout(): void {
-		if (this._componentWrappers) {
-			this._componentWrappers.forEach(wrapper => {
-				wrapper.layout();
-			});
-		}
-	}
-
 	public setLayout(layout: any): void {
 		this.layout();
 	}