Update dashboard properties widget style for Reflow (#9976)

* layout properties in 2 columns * fix height after collapsing * update with reflow values * set height better * cleanup * fix crashing when resizing while properties widget is loading * Switch to grid layout * Only two columns max * Update comment * Undo color change * Cleanup * Fix test Co-authored-by: chgagnon <chgagnon@microsoft.com>
2026-01-26 01:25:38 -05:00 · 2020-04-16 20:23:35 -07:00
parent 02ae1ecff8
commit 530ec8c19d
7 changed files with 123 additions and 53 deletions
--- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html
+++ b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.html
@@ -6,18 +6,12 @@
 -->
 <loading-spinner [loading]="_loading" [loadingMessage]="_loadingMessage"
 	[loadingCompletedMessage]="_loadingCompletedMessage"></loading-spinner>
-<div #parent style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'block'">
-	<div #container [style.margin-right.px]="_clipped ? 30 : 0" [style.width]="_clipped ? 94 + '%' : '100%'" style="overflow: hidden; padding-bottom: 10px">
-		<span #child style="white-space : nowrap; width: fit-content">
-			<ng-template ngFor let-item [ngForOf]="properties">
-				<span style="margin-left: 10px; display: inline-block;">
-					<div class="propertiesName" style="font-size: 11px;">{{item.displayName}}</div>
-					<div class="propertiesValue">{{item.value}}</div>
-				</span>
-			</ng-template>
-		</span>
-	</div>
-	<span *ngIf="_clipped" style="position: absolute; right: 0; top: 0; padding-top: 5px; padding-right: 14px; z-index: 2">
-		...
-	</span>
+<div class="grid-container {{gridDisplayLayout}}" style="position: absolute; height: 100%; width: 100%;" [style.display]="_loading ? 'none':'grid'">
+	<ng-template ngFor let-item [ngForOf]="_properties">
+		<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>
--- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts
+++ b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts
@@ -4,7 +4,7 @@
 *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./propertiesWidget';

-import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, ElementRef } from '@angular/core';

 import { DashboardWidget, IDashboardWidget, WidgetConfig, WIDGET_CONFIG } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
 import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
@@ -57,6 +57,21 @@ export interface DisplayProperty {
 	value: string;
 }

+enum GridDisplayLayout {
+	twoColumns = 'twoColumns',
+	oneColumn = 'oneColumn'
+}
+
+enum PropertyLayoutDirection {
+	row = 'rowLayout',
+	column = 'columnLayout'
+}
+
+
+const collapseHeight = 25;
+const horizontalPropertyHeight = 28;
+const verticalPropertyHeight = 46;
+
@Component({
 	selector: 'properties-widget',
 	templateUrl: decodeURI(require.toUrl('./propertiesWidget.component.html'))
@@ -64,11 +79,10 @@ export interface DisplayProperty {
 export class PropertiesWidgetComponent extends DashboardWidget implements IDashboardWidget, OnInit {
 	private _connection: ConnectionManagementInfo;
 	private _databaseInfo: DatabaseInfo;
-	public _clipped: boolean;
-	private properties: Array<DisplayProperty>;
-
-	@ViewChild('child', { read: ElementRef }) private _child: ElementRef;
-	@ViewChild('parent', { read: ElementRef }) private _parent: ElementRef;
+	private _properties: Array<DisplayProperty>;
+	public gridDisplayLayout: GridDisplayLayout;
+	public propertyLayout: PropertyLayoutDirection;
+	public height: number;

 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrap: CommonServiceInterface,
@@ -85,7 +99,7 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb

 	ngOnInit() {
 		this._inited = true;
-		this._register(addDisposableListener(window, EventType.RESIZE, () => this.handleClipping()));
+		this._register(addDisposableListener(window, EventType.RESIZE, () => this.layoutProperties()));
 		this._changeRef.detectChanges();
 	}

@@ -100,23 +114,36 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 			this._databaseInfo = data;
 			this._changeRef.detectChanges();
 			this.parseProperties();
-			if (this._inited) {
-				this.handleClipping();
-			}
 			this.setLoadingStatus(false);
+			this.layoutProperties();
 		}, error => {
 			this.setLoadingStatus(false);
 			(<HTMLElement>this._el.nativeElement).innerText = nls.localize('dashboard.properties.error', "Unable to load dashboard properties");
 		})));
 	}

-	private handleClipping(): void {
-		if (this._child.nativeElement.offsetWidth > this._parent.nativeElement.offsetWidth) {
-			this._clipped = true;
-		} else {
-			this._clipped = false;
+	private layoutProperties(): 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._properties.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._properties.length / 2) * verticalPropertyHeight + collapseHeight;
+			} else if (window.innerWidth < 1024) {
+				this.gridDisplayLayout = GridDisplayLayout.oneColumn;
+				this.propertyLayout = PropertyLayoutDirection.column;
+				this.height = this._properties.length * verticalPropertyHeight + collapseHeight;
+			}
+
+			this._changeRef.detectChanges();
 		}
-		this._changeRef.detectChanges();
 	}

 	private parseProperties() {
@@ -208,11 +235,7 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 			infoObject = this._connection.serverInfo;
 		}

-		// iterate over properties and display them
-		this.properties = [];
-		for (let i = 0; i < propertyArray.length; i++) {
-			const property = propertyArray[i];
-			const assignProperty = {};
+		this._properties = propertyArray.map(property => {
 			let propertyObject = this.getValueOrDefault<string>(infoObject, property.value, property.default || '--');

 			// make sure the value we got shouldn't be ignored
@@ -225,10 +248,11 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 					}
 				}
 			}
-			assignProperty['displayName'] = property.displayName;
-			assignProperty['value'] = propertyObject;
-			this.properties.push(<DisplayProperty>assignProperty);
-		}
+			return {
+				displayName: property.displayName,
+				value: propertyObject
+			};
+		});

 		if (this._inited) {
 			this._changeRef.detectChanges();
--- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.css
+++ b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.css
@@ -3,11 +3,43 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

-.propertiesName {
-	opacity: 0.6;
+properties-widget .twoColumns.grid-container {
+	grid-template-columns: 50% 50%;
 }

-.vs-dark .propertiesName,
-.hc-black .propertiesName {
+properties-widget .oneColumn.grid-container {
+	grid-template-columns: 100%;
+}
+
+properties-widget .columnLayout.property {
+	flex-direction: column;
+}
+
+properties-widget .propertyName {
+	opacity: 0.6;
+	font-size: 12px;
+	flex: 0 0 auto
+}
+
+.vs-dark properties-widget .propertyName,
+.hc-black properties-widget .propertyName {
 	opacity: 1;
 }
+
+properties-widget .propertyValue {
+	font-size: 12px;
+	flex: 1 1 auto;
+	margin-right: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+properties-widget .splitter {
+	flex: 0 0 15px;
+	text-align: center;
+}
+
+properties-widget .columnLayout .splitter {
+	display: none;
+}