diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index 9990cc9c3c..2001bb4567 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/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() - .withLayout({ - flexFlow: 'column', - alignItems: 'stretch', - height: '100%' - }).withItems([ - toolbarModel, webview - ], { 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 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) diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts index 998f57d12f..16bf75252c 100644 --- a/src/sql/parts/modelComponents/componentBase.ts +++ b/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 { constructor(public descriptor: IComponentDescriptor, public config: T) { } @@ -152,6 +153,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On export abstract class ContainerBase extends ComponentBase { protected items: ItemDescriptor[]; + @ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList; constructor( _changeRef: ChangeDetectorRef ) { @@ -189,5 +191,14 @@ export abstract class ContainerBase extends ComponentBase { }); } + public layout(): void { + if (this._componentWrappers) { + this._componentWrappers.forEach(wrapper => { + wrapper.layout(); + }); + } + super.layout(); + } + abstract setLayout(layout: any): void; } diff --git a/src/sql/parts/modelComponents/flexContainer.component.ts b/src/sql/parts/modelComponents/flexContainer.component.ts index 4d83e91136..cd8f2d43c9 100644 --- a/src/sql/parts/modelComponents/flexContainer.component.ts +++ b/src/sql/parts/modelComponents/flexContainer.component.ts @@ -41,8 +41,6 @@ export default class FlexContainer extends ContainerBase impleme private _alignContent: string; private _height: string; - @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; - constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { super(changeRef); this._flexFlow = ''; // default @@ -60,14 +58,6 @@ export default class FlexContainer extends ContainerBase 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 : ''; diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index 450c83bb11..b6e4cc9011 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -83,7 +83,6 @@ export default class FormContainer extends ContainerBase impleme private _alignContent: string; private _formLayout: FormLayout; - @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; @ViewChild('container', { read: ElementRef }) private _container: ElementRef; constructor( @@ -105,14 +104,6 @@ export default class FormContainer extends ContainerBase impleme /// IComponent implementation - public layout(): void { - if (this._componentWrappers) { - this._componentWrappers.forEach(wrapper => { - wrapper.layout(); - }); - } - } - public get alignItems(): string { return this._alignItems; } diff --git a/src/sql/parts/modelComponents/groupContainer.component.ts b/src/sql/parts/modelComponents/groupContainer.component.ts index 2f59ac1870..161514f8da 100644 --- a/src/sql/parts/modelComponents/groupContainer.component.ts +++ b/src/sql/parts/modelComponents/groupContainer.component.ts @@ -41,7 +41,6 @@ export default class GroupContainer extends ContainerBase implement private _containerLayout: GroupLayout; - @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; @ViewChild('container', { read: ElementRef }) private _container: ElementRef; constructor( @@ -63,14 +62,6 @@ export default class GroupContainer extends ContainerBase 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(); diff --git a/src/sql/parts/modelComponents/toolbarContainer.component.ts b/src/sql/parts/modelComponents/toolbarContainer.component.ts index 792e3bdafa..6b56aea941 100644 --- a/src/sql/parts/modelComponents/toolbarContainer.component.ts +++ b/src/sql/parts/modelComponents/toolbarContainer.component.ts @@ -46,7 +46,6 @@ export default class ToolbarContainer extends ContainerBase i @Input() descriptor: IComponentDescriptor; @Input() modelStore: IModelStore; - @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; @ViewChild('container', { read: ElementRef }) private _container: ElementRef; constructor( @@ -68,14 +67,6 @@ export default class ToolbarContainer extends ContainerBase i /// IComponent implementation - public layout(): void { - if (this._componentWrappers) { - this._componentWrappers.forEach(wrapper => { - wrapper.layout(); - }); - } - } - public setLayout(layout: any): void { this.layout(); }