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

* fixed the layout issue in model view containers

* fixed the sample
This commit is contained in:
Leila Lali
2018-06-04 14:25:41 -07:00
committed by GitHub
parent 473a414bc3
commit f70bf590cd
6 changed files with 20 additions and 57 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -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();
}