Fix flex container and card layout issues (#1195)

* Fix main layout issues and add box around card
- Need to improve box size as it's taking too much space

* Fix UI issues with flexContainer and cards

* Simplify card HTML

samples/sqlservices/src/controllers/mainController.ts

@@ -47,11 +47,16 @@ export default class MainController implements vscode.Disposable {
 		sqlops.dashboard.registerModelViewProvider('sqlservices', async (view) => {
 			let flexModel = view.modelBuilder.flexContainer()
 				.withLayout({
-					flexFlow: 'row'
+					flexFlow: 'row',
+					alignItems: 'center'
 				}).withItems([
 					// 1st child panel with N cards
 					view.modelBuilder.flexContainer()
-						.withLayout({ flexFlow: 'column' })
+						.withLayout({
+							flexFlow: 'column',
+							alignItems: 'center',
+							justifyContent: 'center'
+						})
 						.withItems([
 							view.modelBuilder.card()
 								.withProperties<sqlops.CardProperties>({
@@ -73,7 +78,7 @@ export default class MainController implements vscode.Disposable {
 								})
 								.component()
 						]).component()
-				], { flex: '0 1 50%' })
+				], { flex: '1 1 50%' })
 				.component();
 			await view.initializeModel(flexModel);
 		});

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

@@ -2,7 +2,7 @@
  *  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!./flexContainer';
+import 'vs/css!./card';
 
 import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
@@ -16,11 +16,9 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelCo
 
 @Component({
 	template: `
-		<div *ngIf="label" class="cardComponent" style="position: absolute; height: 100%; width: 100%; margin: 10px 0px 10px 0px;">
-			<span style="margin-left: 10px; display: inline-block;">
-				<div style="font-size: 11px; font-weight: lighter">{{label}}</div>
-				<div>{{value}}</div>
-			</span>
+		<div *ngIf="label" class="model-card" >
+			<h4 class="card-label">{{label}}</h4>
+			<p class="card-value">{{value}}</p>
 		</div>
 	`
 })

src/sql/parts/modelComponents/card.css

@@ -0,0 +1,27 @@
+
+.model-card {
+	position: relative;
+	display: inline-block;
+	height: auto;
+	width: auto;
+	margin: 15px;
+	padding: 10px 45px 20px 45px;
+	min-height: 30px;
+	min-width: 30px;
+	border-width: 1px;
+    border-style: solid;
+    border-color: rgb(214, 214, 214);
+    text-align: left;
+    vertical-align: top;
+    box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
+}
+
+.model-card .card-label {
+	font-size: 12px;
+	font-weight: bold;
+}
+
+.model-card .card-value {
+	font-size: 12px;
+	line-height: 18px;
+}

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

@@ -21,7 +21,8 @@ class FlexItem {
 
 @Component({
 	template: `
-		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent">
+		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -34,6 +35,8 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	@Input() modelStore: IModelStore;
 	private _flexFlow: string;
 	private _justifyContent: string;
+	private _alignItems: string;
+	private _alignContent: string;
 
 	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 
@@ -65,6 +68,8 @@ 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.layout();
 	}
 
@@ -77,8 +82,16 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		return this._justifyContent;
 	}
 
+	public get alignItems(): string {
+		return this._alignItems;
+	}
+
+	public get alignContent(): string {
+		return this._alignContent;
+	}
+
 	private getItemFlex(item: FlexItem): string {
-		return item.config ? item.config.flex : '';
+		return item.config ? item.config.flex : '1 1 auto';
 	}
 	private getItemOrder(item: FlexItem): number {
 		return item.config ? item.config.order : 0;

src/sql/parts/modelComponents/flexContainer.css

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

src/sql/sqlops.proposed.d.ts

@@ -108,6 +108,14 @@ declare module 'sqlops' {
 		 * Matches the justify-content CSS property.
 		 */
 		justifyContent?: string;
+		/**
+		 * Matches the align-items CSS property.
+		 */
+		alignItems?: string;
+		/**
+		 * Matches the align-content CSS property.
+		 */
+		alignContent?: string;
 	}
 
 	export interface FlexItemLayout {
@@ -117,7 +125,7 @@ declare module 'sqlops' {
 		order?: number;
 		/**
 		 * Matches the flex CSS property and its available values.
-		 * Default is "0 1 auto".
+		 * Default is "1 1 auto".
 		 */
 		flex?: string;
 	}