Remove properties widget height calculations (#10152)

* Remove height calculations

* Remove custom height setting

* Fix compile errors

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

@@ -14,7 +14,7 @@ const DefaultLoadingCompletedMessage = nls.localize('loadingCompletedMessage', "
 @Component({
 	selector: 'loading-spinner',
 	template: `
-		<div class="loading-spinner-container" *ngIf="loading">
+		<div class="loading-spinner-container">
 			<div class="loading-spinner codicon in-progress" *ngIf="loading" [title]="_loadingMessage" #spinnerElement></div>
 		</div>
 	`

src/sql/base/browser/ui/loadingSpinner/media/loadingComponent.css

@@ -3,6 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+loading-spinner {
+	width: 100%;
+	display: inline-block;
+}
+
 loading-spinner .loading-spinner-container {
 	display: flex;
 	flex-direction: row;

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

@@ -3,6 +3,19 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+properties-container {
+	display: block;
+}
+
+properties-container .grid-container {
+	width: 100%;
+	display: grid;
+}
+
+properties-container .property {
+	display:flex;
+}
+
 properties-container .twoColumns.grid-container {
 	grid-template-columns: 50% 50%;
 }

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

@@ -4,9 +4,9 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
+<div class="grid-container {{gridDisplayLayout}}">
 	<ng-template ngFor let-item [ngForOf]="propertyItems">
-		<div class="property {{propertyLayout}}" style="display:flex">
+		<div class="property {{propertyLayout}}">
 			<div class="propertyName">{{item.displayName}}</div>
 			<div class="splitter">:</div>
 			<div class="propertyValue">{{item.value}}</div>

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

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/propertiesContainer';
-import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
+import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
-import { EventType, addDisposableListener } from 'vs/base/browser/dom';
+import * as DOM from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
 
 enum GridDisplayLayout {
@@ -23,10 +23,6 @@ export interface PropertyItem {
 	value: string;
 }
 
-const collapseHeight = 25;
-const horizontalPropertyHeight = 28;
-const verticalPropertyHeight = 46;
-
 @Component({
 	selector: 'properties-container',
 	templateUrl: decodeURI(require.toUrl('./propertiesContainer.component.html'))
@@ -34,18 +30,16 @@ const verticalPropertyHeight = 46;
 export class PropertiesContainer extends Disposable implements OnInit, OnDestroy {
 	public gridDisplayLayout = GridDisplayLayout.twoColumns;
 	public propertyLayout = PropertyLayoutDirection.row;
-	public height: number;
 	private _propertyItems: PropertyItem[] = [];
 
 	constructor(
-		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef
 	) {
 		super();
 	}
 
 	ngOnInit() {
-		this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutPropertyItems()));
+		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, () => this.layoutPropertyItems()));
 		this._changeRef.detectChanges();
 	}
 
@@ -61,15 +55,12 @@ export class PropertiesContainer extends Disposable implements OnInit, OnDestroy
 		if (window.innerWidth >= 1366) {
 			this.gridDisplayLayout = GridDisplayLayout.twoColumns;
 			this.propertyLayout = PropertyLayoutDirection.row;
-			this.height = Math.ceil(this.propertyItems.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.propertyItems.length / 2) * verticalPropertyHeight + collapseHeight;
 		} else if (window.innerWidth < 1024) {
 			this.gridDisplayLayout = GridDisplayLayout.oneColumn;
 			this.propertyLayout = PropertyLayoutDirection.column;
-			this.height = this.propertyItems.length * verticalPropertyHeight + collapseHeight;
 		}
 
 		this._changeRef.detectChanges();

src/sql/workbench/browser/modelComponents/media/propertiesContainer.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.
+ *--------------------------------------------------------------------------------------------*/
+
+modelview-properties-container properties-container {
+	display: inline-block;
+	width: 100%;
+}

src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts

@@ -3,6 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import 'vs/css!./media/propertiesContainer';
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
 	ViewChild, ElementRef, OnDestroy

src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts

@@ -21,7 +21,6 @@ import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
-import { PropertiesWidgetComponent } from 'sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component';
 
 @Component({
 	selector: 'dashboard-home-container',
@@ -30,8 +29,7 @@ import { PropertiesWidgetComponent } from 'sql/workbench/contrib/dashboard/brows
 		<div class="fullsize" style="display: flex; flex-direction: column">
 			<div>
 				<div #propertiesContainer>
-					<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [bottomCollapse]="true" [toggleMore]="false" [_config]="properties"
+					<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [bottomCollapse]="true" [toggleMore]="false" [_config]="properties" class="properties">
-						class="properties" [style.height.px]="_propertiesClass?.collapsed ? '30' : getHeight()">
 					</dashboard-widget-wrapper>
 				</div>
 				<widget-content style="flex: 1" [scrollContent]="false" [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
@@ -45,8 +43,6 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
 	@ViewChild('propertiesContainer') private _propertiesContainer: ElementRef;
 
-	private height = 75; // default initial height
-
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: DashboardServiceInterface,
@@ -85,14 +81,6 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 		}));
 	}
 
-	public getHeight(): number {
-		if (this._propertiesClass && (<PropertiesWidgetComponent>this._propertiesClass.component).height) {
-			this.height = (<PropertiesWidgetComponent>this._propertiesClass.component).height;
-		}
-
-		return this.height;
-	}
-
 	private updateTheme(theme: IColorTheme): void {
 		const border = theme.getColor(DASHBOARD_BORDER);
 		if (theme.getColor(contrastBorder)) {

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html

@@ -17,5 +17,5 @@
 		<ng-template component-host>
 		</ng-template>
 	</ng-template>
-	<span #bottomActionbar class="bottomActionbar"></span>
+	<span #bottomActionbar class="bottomActionbar {{collapsed ? 'collapsed' : ''}}"></span>
 </div>

src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css

@@ -40,17 +40,18 @@ dashboard-widget-wrapper .noTitle {
 }
 
 dashboard-widget-wrapper .actionbar {
-	flex: 0 0 auto;
 	align-self: end;
 }
 
 dashboard-widget-wrapper .bottomActionbar {
-	flex: 0 0 auto;
 	align-self: center;
-	margin-top: -27px;
 	display: none;
 }
 
+dashboard-widget-wrapper .bottomActionbar.collapsed {
+	margin-top: -27px;
+}
+
 dashboard-widget-wrapper .bottomActionbar .actions-container .action-item a.action-label.codicon-chevron-up {
 	padding-left: 5px;
 }

src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts

@@ -16,7 +16,6 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { ILogService } from 'vs/platform/log/common/log';
 import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
 import { PropertiesContainer, PropertyItem } from 'sql/base/browser/ui/propertiesContainer/propertiesContainer.component';
-import { convertSizeToNumber } from 'sql/base/browser/dom';
 
 export interface PropertiesConfig {
 	properties: Array<Property>;
@@ -53,8 +52,8 @@ const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.Da
 @Component({
 	selector: 'properties-widget',
 	template: `
-	<loading-spinner [loading]="_loading" [loadingMessage]="loadingMessage" [loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
+	<loading-spinner *ngIf="_loading" [loading]="_loading" [loadingMessage]="loadingMessage" [loadingCompletedMessage]="loadingCompletedMessage"></loading-spinner>
-	<properties-container></properties-container>`
+	<properties-container [style.display]="_loading ? 'none' : ''"></properties-container>`
 })
 export class PropertiesWidgetComponent extends DashboardWidget implements IDashboardWidget, OnInit {
 	@ViewChild(PropertiesContainer) private _propertiesContainer: PropertiesContainer;
@@ -207,10 +206,6 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 				value: propertyObject
 			};
 		});
-
-		if (this._inited) {
-			this._changeRef.detectChanges();
-		}
 	}
 
 	private getConditionResult(item: FlavorProperties, conditionItem: ConditionProperties): boolean {
@@ -248,8 +243,4 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 		}
 		return val;
 	}
-
-	public get height(): number {
-		return convertSizeToNumber(this._propertiesContainer.height);
-	}
 }