Fix view model editor layout (#1473)

* flex container should be as big as the parent container

* add example

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

@@ -15,6 +15,8 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 
+import types = require('vs/base/common/types');
+
 class FlexItem {
 	constructor(public descriptor: IComponentDescriptor, public config: FlexItemLayout) {}
 }
@@ -68,10 +70,16 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 
 	public setLayout (layout: FlexLayout): void {
 		this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
-		this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
-		this._alignItems= layout.alignItems ? layout.alignItems : '';
-		this._alignContent= layout.alignContent ? layout.alignContent : '';
-		this._height= layout.height ? layout.height + 'px' : '';
+		this._justifyContent = layout.justifyContent ? layout.justifyContent : '';
+		this._alignItems = layout.alignItems ? layout.alignItems : '';
+		this._alignContent = layout.alignContent ? layout.alignContent : '';
+		if (types.isUndefinedOrNull(layout.height)) {
+			this._height = '';
+		} else if (types.isNumber(layout.height)) {
+			this._height = layout.height + 'px';
+		} else {
+			this._height = layout.height;
+		}
 		this.layout();
 	}
 

src/sql/parts/modelComponents/flexContainer.css

@@ -1,5 +1,4 @@
 
 .flexContainer {
 	display: flex;
-	padding: 5px;
 }

src/sql/parts/modelComponents/modelEditor/modelViewEditor.css

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.model-view-container {
+	height: 100%;
+	width : 100%;
+}

src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts

@@ -2,6 +2,8 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./modelViewEditor';
+
 import { Builder, $ } from 'vs/base/browser/builder';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';

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

@@ -24,7 +24,7 @@ import { ViewBase } from 'sql/parts/modelComponents/viewBase';
 @Component({
 	selector: 'modelview-content',
 	template: `
-		<div *ngIf="rootDescriptor">
+		<div *ngIf="rootDescriptor" style="width: 100%; height: 100%;">
 			<model-component-wrapper [descriptor]="rootDescriptor" [modelStore]="modelStore">
 			</model-component-wrapper>
 		</div>

src/sql/platform/dialog/dialogContainer.component.ts

@@ -34,18 +34,21 @@ export class DialogContainer implements AfterContentInit {
 	public modelViewId: string;
 	@ViewChild(ModelViewContent) private _modelViewContent: ModelViewContent;
 	constructor(
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(BOOTSTRAP_SERVICE_ID) bootstrapService: IBootstrapService) {
-		this._params = bootstrapService.getBootstrapParams(el.nativeElement.tagName) as DialogComponentParams;
+		this._params = bootstrapService.getBootstrapParams(_el.nativeElement.tagName) as DialogComponentParams;
 		this.modelViewId = this._params.modelViewId;
 	}
 
 	ngAfterContentInit(): void {
 		this._modelViewContent.onEvent(event => {
-		if (event.eventType === ComponentEventType.validityChanged) {
-			this._params.validityChangedCallback(event.args);
-		}
-	});
+			if (event.eventType === ComponentEventType.validityChanged) {
+				this._params.validityChangedCallback(event.args);
+			}
+		});
+		let element = <HTMLElement>this._el.nativeElement;
+		element.style.height = '100%';
+		element.style.width = '100%';
 	}
 
 	public layout(): void {

src/sql/sqlops.proposed.d.ts

@@ -167,7 +167,7 @@ declare module 'sqlops' {
 		 */
 		alignContent?: string;
 
-		height? : number;
+		height? : number | string;
 	}
 
 	export interface FlexItemLayout {