fixing model view issues (#1737)

* fixing model view issues

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

@@ -94,8 +94,8 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 	}
 
 	public layout(): void {
-		if (this._componentInstance && this._componentInstance.layout) {
-			this._componentInstance.layout();
+		if (this.componentInstance && this.componentInstance.layout) {
+			this.componentInstance.layout();
 		}
 	}
 
@@ -110,6 +110,12 @@ export class ModelComponentWrapper extends AngularDisposable implements OnInit {
 		};
 	}
 
+	private get componentInstance(): IComponent {
+		if (!this._componentInstance) {
+			this.loadComponent();
+		}
+		return this._componentInstance;
+	}
 
 	private loadComponent(): void {
 		if (!this.descriptor || !this.descriptor.type) {

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

@@ -26,7 +26,7 @@ import * as sqlops from 'sqlops';
 	selector: 'modelview-content',
 	template: `
 		<div *ngIf="rootDescriptor" style="width: 100%; height: 100%;">
-			<model-component-wrapper [descriptor]="rootDescriptor" [modelStore]="modelStore">
+			<model-component-wrapper style="display: block; height: 100%" [descriptor]="rootDescriptor" [modelStore]="modelStore">
 			</model-component-wrapper>
 		</div>
 	`

src/sql/platform/dialog/dialog.module.ts

@@ -26,10 +26,11 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { Registry } from 'vs/platform/registry/common/platform';
 
-/* Model-backed components */
-let extensionComponents = Registry.as<IComponentRegistry>(Extensions.ComponentContribution).getAllCtors();
-
 export const DialogModule = (params, selector: string, instantiationService: IInstantiationService): any => {
+
+	/* Model-backed components */
+	let extensionComponents = Registry.as<IComponentRegistry>(Extensions.ComponentContribution).getAllCtors();
+
 	@NgModule({
 		declarations: [
 			Checkbox,

src/sql/platform/dialog/dialogPane.ts

@@ -93,12 +93,12 @@ export class DialogPane extends Disposable implements IThemable {
 	}
 
 	private getTabDimension(): DOM.Dimension {
-		return new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body));
+		return new DOM.Dimension(DOM.getContentWidth(this._body) - 5, DOM.getContentHeight(this._body) - 5);
 	}
 
 	public layout(): void {
 		if (this._tabbedPanel) {
-			this._tabbedPanel.layout(new DOM.Dimension(DOM.getContentWidth(this._body), DOM.getContentHeight(this._body)));
+			this._tabbedPanel.layout(this.getTabDimension());
 			this._onTabChange.fire(this._selectedTabContent);
 		}
 	}

src/sql/sqlops.proposed.d.ts

@@ -301,7 +301,7 @@ declare module 'sqlops' {
 	}
 
 	export enum CardType {
-		VerticalButton  = 'VerticalButton',
+		VerticalButton = 'VerticalButton',
 		Details = 'Details'
 	}
 
@@ -314,8 +314,16 @@ declare module 'sqlops' {
 		value?: string;
 		actions?: ActionDescriptor[];
 		status?: StatusIndicator;
+
+		/**
+		 * Returns true if the card is selected
+		 */
 		selected?: boolean;
-		cardType: CardType;
+
+		/**
+		 * Card Type, default: Details
+		 */
+		cardType?: CardType;
 	}
 
 	export type InputBoxInputType = 'color' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'range' | 'search' | 'text' | 'time' | 'url' | 'week';