Move properties container and loading spinner to common components (#10058)

* Move properties container and loading spinner to common components

* Fix compile error

* Fix tests

src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+properties-container .twoColumns.grid-container {
+	grid-template-columns: 50% 50%;
+}
+
+properties-container .oneColumn.grid-container {
+	grid-template-columns: 100%;
+}
+
+properties-container .columnLayout.property {
+	flex-direction: column;
+}
+
+properties-container .propertyName {
+	opacity: 0.6;
+	font-size: 12px;
+	flex: 0 0 auto
+}
+
+.vs-dark properties-container .propertyName,
+.hc-black properties-container .propertyName {
+	opacity: 1;
+}
+
+properties-container .propertyValue {
+	font-size: 12px;
+	flex: 1 1 auto;
+	margin-right: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+properties-container .splitter {
+	flex: 0 0 15px;
+	text-align: center;
+}
+
+properties-container .columnLayout .splitter {
+	display: none;
+}

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html

@@ -0,0 +1,17 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<loading-spinner [loading]="loading" [loadingMessage]="loadingMessage"
+	[loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
+<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
+	<ng-template ngFor let-item [ngForOf]="displayProperties">
+		<div class="property {{propertyLayout}}" style="display:flex">
+			<div class="propertyName">{{item.displayName}}</div>
+			<div class="splitter">:</div>
+			<div class="propertyValue">{{item.value}}</div>
+		</div>
+	</ng-template>
+</div>

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts

@@ -0,0 +1,98 @@
+/*---------------------------------------------------------------------------------------------
+ *  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!./media/propertiesContainer';
+
+import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef } from '@angular/core';
+import { EventType, addDisposableListener } from 'vs/base/browser/dom';
+import * as nls from 'vs/nls';
+import { Disposable } from 'vs/base/common/lifecycle';
+
+enum GridDisplayLayout {
+	twoColumns = 'twoColumns',
+	oneColumn = 'oneColumn'
+}
+
+enum PropertyLayoutDirection {
+	row = 'rowLayout',
+	column = 'columnLayout'
+}
+
+export interface DisplayProperty {
+	displayName: string;
+	value: string;
+}
+
+const collapseHeight = 25;
+const horizontalPropertyHeight = 28;
+const verticalPropertyHeight = 46;
+
+@Component({
+	selector: 'properties-container',
+	templateUrl: decodeURI(require.toUrl('./propertiesContainer.component.html'))
+})
+export class PropertiesContainer extends Disposable implements OnInit {
+	public gridDisplayLayout = GridDisplayLayout.twoColumns;
+	public propertyLayout = PropertyLayoutDirection.row;
+	public loadingMessage: string = nls.localize('loadingProperties', "Loading properties");
+	public loadingCompletedMessage: string = nls.localize('loadingPropertiesCompleted', "Loading properties completed");
+	public height: number;
+
+	private _loading: boolean = true;
+	private _displayProperties: DisplayProperty[] = [];
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutDisplayProperties()));
+		this._changeRef.detectChanges();
+	}
+
+	private layoutDisplayProperties(): void {
+		// Reflow:
+		// 2 columns w/ horizontal alignment : 1366px and above
+		// 2 columns w/ vertical alignment : 1024 - 1365px
+		// 1 column w/ vertical alignment : 1024px or less
+		if (!this.loading) {
+			if (window.innerWidth >= 1366) {
+				this.gridDisplayLayout = GridDisplayLayout.twoColumns;
+				this.propertyLayout = PropertyLayoutDirection.row;
+				this.height = Math.ceil(this.displayProperties.length / 2) * horizontalPropertyHeight + collapseHeight;
+			} else if (window.innerWidth < 1366 && window.innerWidth >= 1024) {
+				this.gridDisplayLayout = GridDisplayLayout.twoColumns;
+				this.propertyLayout = PropertyLayoutDirection.column;
+				this.height = Math.ceil(this.displayProperties.length / 2) * verticalPropertyHeight + collapseHeight;
+			} else if (window.innerWidth < 1024) {
+				this.gridDisplayLayout = GridDisplayLayout.oneColumn;
+				this.propertyLayout = PropertyLayoutDirection.column;
+				this.height = this.displayProperties.length * verticalPropertyHeight + collapseHeight;
+			}
+
+			this._changeRef.detectChanges();
+		}
+	}
+
+	public set displayProperties(displayProperties: DisplayProperty[]) {
+		this._displayProperties = displayProperties;
+		this.layoutDisplayProperties();
+	}
+
+	public get displayProperties(): DisplayProperty[] {
+		return this._displayProperties;
+	}
+
+	public set loading(loading: boolean) {
+		this._loading = loading;
+		this._changeRef.detectChanges();
+	}
+
+	public get loading(): boolean {
+		return this._loading;
+	}
+}

src/sql/base/browser/ui/propertiesContainer/propertiesContainer.module.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PropertiesContainer } from './propertiesContainer.component';
+import { LoadingSpinnerModule } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner.module';
+
+@NgModule({
+	imports: [CommonModule, LoadingSpinnerModule],
+	exports: [PropertiesContainer],
+	declarations: [PropertiesContainer]
+})
+export class PropertiesContainerModule { }