diff --git a/src/sql/base/browser/ui/loadingSpinner/loadingSpinner.component.ts b/src/sql/base/browser/ui/loadingSpinner/loadingSpinner.component.ts index bb85018a04..ded55f5405 100644 --- a/src/sql/base/browser/ui/loadingSpinner/loadingSpinner.component.ts +++ b/src/sql/base/browser/ui/loadingSpinner/loadingSpinner.component.ts @@ -14,7 +14,7 @@ const DefaultLoadingCompletedMessage = nls.localize('loadingCompletedMessage', " @Component({ selector: 'loading-spinner', template: ` -
+
` diff --git a/src/sql/base/browser/ui/loadingSpinner/media/loadingComponent.css b/src/sql/base/browser/ui/loadingSpinner/media/loadingComponent.css index e26ffa6be2..a226780d21 100644 --- a/src/sql/base/browser/ui/loadingSpinner/media/loadingComponent.css +++ b/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; diff --git a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css b/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css index a5b291a5ef..3d866cd443 100644 --- a/src/sql/base/browser/ui/propertiesContainer/media/propertiesContainer.css +++ b/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%; } diff --git a/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html b/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html index ceb0a044f7..b66cf07281 100644 --- a/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.html +++ b/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. *--------------------------------------------------------------------------------------------*/ --> -
+
-
+
{{item.displayName}}
:
{{item.value}}
diff --git a/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts b/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts index 578b43f7a6..44c162e0c6 100644 --- a/src/sql/base/browser/ui/propertiesContainer/propertiesContainer.component.ts +++ b/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 { EventType, addDisposableListener } from 'vs/base/browser/dom'; +import { Component, Inject, forwardRef, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; +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(() => ElementRef)) el: ElementRef + @Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef ) { 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(); diff --git a/src/sql/workbench/browser/modelComponents/media/propertiesContainer.css b/src/sql/workbench/browser/modelComponents/media/propertiesContainer.css new file mode 100644 index 0000000000..63840fc6ae --- /dev/null +++ b/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%; +} diff --git a/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts b/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts index aab4c3610f..521608d401 100644 --- a/src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts +++ b/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 diff --git a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts index a7e7fa567a..672725725e 100644 --- a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts +++ b/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
- +
@@ -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 && (this._propertiesClass.component).height) { - this.height = (this._propertiesClass.component).height; - } - - return this.height; - } - private updateTheme(theme: IColorTheme): void { const border = theme.getColor(DASHBOARD_BORDER); if (theme.getColor(contrastBorder)) { diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html index a4d2d92878..b8bb60ba37 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html @@ -17,5 +17,5 @@ - +
diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css index d77dc57cb2..851bc84886 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css +++ b/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; } diff --git a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts b/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts index e92e0069c9..be9f233900 100644 --- a/src/sql/workbench/contrib/dashboard/browser/widgets/properties/propertiesWidget.component.ts +++ b/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; @@ -53,8 +52,8 @@ const dashboardRegistry = Registry.as(DashboardExtensions.Da @Component({ selector: 'properties-widget', template: ` - - ` + + ` }) 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); - } }