Properties widget updates (#9893)

* move properties widget collapse to bottom

* fix double bottom border for high contrast

* show title when collapsed

* move css to classes

* vertical center collapse icon

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

@@ -5,7 +5,7 @@
 
 import 'vs/css!./dashboardHomeContainer';
 
-import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, ContentChild } from '@angular/core';
+import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, ContentChild, ElementRef } from '@angular/core';
 
 import { DashboardWidgetContainer } from 'sql/workbench/contrib/dashboard/browser/containers/dashboardWidgetContainer.component';
 import { WidgetConfig } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
@@ -18,6 +18,10 @@ import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+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';
 
 @Component({
 	selector: 'dashboard-home-container',
@@ -25,9 +29,11 @@ import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 	template: `
 		<div class="fullsize" style="display: flex; flex-direction: column">
 			<div scrollable [horizontalScroll]="${ScrollbarVisibility.Hidden}" [verticalScroll]="${ScrollbarVisibility.Auto}">
-				<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [_config]="properties"
-					style="padding-left: 10px; padding-right: 10px; display: block; flex: 0" [style.height.px]="_propertiesClass?.collapsed ? '30' : '90'">
-				</dashboard-widget-wrapper>
+				<div #propertiesContainer>
+					<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [bottomCollapse]="true" [toggleMore]="false" [_config]="properties"
+						class="properties" [style.height.px]="_propertiesClass?.collapsed ? '30' : '75'">
+					</dashboard-widget-wrapper>
+				</div>
 				<widget-content style="flex: 1" [scrollContent]="false" [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
 				</widget-content>
 			</div>
@@ -37,25 +43,36 @@ import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@Input() private properties: WidgetConfig;
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
+	@ViewChild('propertiesContainer') private _propertiesContainer: ElementRef;
 	@ContentChild(ScrollableDirective) private _scrollable: ScrollableDirective;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: DashboardServiceInterface,
 		@Inject(IConfigurationService) private _configurationService: IConfigurationService,
-		@Inject(IAngularEventingService) private angularEventingService: IAngularEventingService
+		@Inject(IAngularEventingService) private angularEventingService: IAngularEventingService,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
 		super(_cd);
 	}
 
 	ngAfterContentInit() {
+		this.updateTheme(this.themeService.getColorTheme());
+		this._register(this.themeService.onDidColorThemeChange((event: IColorTheme) => {
+			this.updateTheme(event);
+		}));
+
 		const collapsedVal = this.dashboardService.getSettings<string>(`${this.properties.context}.properties`);
 		if (collapsedVal === 'collapsed') {
 			this._propertiesClass.collapsed = true;
+			this._propertiesClass.showTitle = true;
+		} else {
+			this._propertiesClass.showTitle = false;
 		}
 		this._register(this.angularEventingService.onAngularEvent(this.dashboardService.getUnderlyingUri())(event => {
 			if (event.event === AngularEventType.COLLAPSE_WIDGET && this._propertiesClass && event.payload === this._propertiesClass.guid) {
 				this._propertiesClass.collapsed = !this._propertiesClass.collapsed;
+				this._propertiesClass.showTitle = !this._propertiesClass.showTitle;
 				this._cd.detectChanges();
 				this._configurationService.updateValue(`dashboard.${this.properties.context}.properties`,
 					this._propertiesClass.collapsed ? 'collapsed' : true, ConfigurationTarget.USER);
@@ -70,6 +87,15 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 		}
 	}
 
+	private updateTheme(theme: IColorTheme): void {
+		const border = theme.getColor(DASHBOARD_BORDER);
+		if (theme.getColor(contrastBorder)) {
+			this._propertiesContainer.nativeElement.style.borderBottom = 'none';
+		} else {
+			this._propertiesContainer.nativeElement.style.borderBottom = '1px solid ' + border.toString();
+		}
+	}
+
 	public refresh(): void {
 		super.refresh();
 		this._propertiesClass.refresh();

src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.css

@@ -8,3 +8,10 @@ dashboard-home-tab {
 	width: 100%;
 	display: block;
 }
+
+dashboard-home-container .properties {
+	padding-left: 10px;
+	padding-right: 10px;
+	display: block;
+	flex: 0;
+}

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

@@ -4,18 +4,18 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div style="display: flex; flex-flow: column; overflow: hidden; height: 100%; width: 100%">
-
+<div class="widgetWrapper">
 	<div #header>
-		<div style="display: flex; flex: 0 0; padding: 3px 0 3px 0;">
-			<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]" style="display: inline-block; padding: 10px; margin-left: 5px"></span>
-			<span *ngIf="_config.name" style="margin-left: 5px;flex:1 1;">{{_config.name}}</span>
-			<span *ngIf="!_config.name" style="flex:1 1"></span>
-			<span #actionbar style="flex: 0 0 auto; align-self: end"></span>
+		<div class="widgetHeader">
+			<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]"></span>
+			<span *ngIf="_config.name && _showTitle" class="widgetTitle">{{_config.name}}</span>
+			<span *ngIf="!_config.name" class="noTitle"></span>
+			<span #actionbar class="actionbar"></span>
 		</div>
 	</div>
 	<ng-template [ngIf]="!collapsed">
 		<ng-template component-host>
 		</ng-template>
 	</ng-template>
+	<span #bottomActionbar class="bottomActionbar"></span>
 </div>

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

@@ -51,9 +51,12 @@ const componentMap: { [x: string]: Type<IDashboardWidget> } = {
 export class DashboardWidgetWrapper extends AngularDisposable implements OnInit {
 	@Input() private _config: WidgetConfig;
 	@Input() private collapsable = false;
+	@Input() private bottomCollapse = false;
+	@Input() private toggleMore = true;
 
 	private _collapseAction: CollapseWidgetAction;
 	private _collapsed = false;
+	private _showTitle = true;
 
 	public get collapsed(): boolean {
 		return this._collapsed;
@@ -71,6 +74,14 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 		}
 	}
 
+	public get showTitle(): boolean {
+		return this._showTitle;
+	}
+
+	public set showTitle(val: boolean) {
+		this._showTitle = val;
+	}
+
 	@memoize
 	public get guid(): string {
 		return generateUuid();
@@ -79,9 +90,11 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 	private _actions: Array<Action>;
 	private _component: IDashboardWidget;
 	private _actionbar: ActionBar;
+	private _bottomActionbar: ActionBar;
 
 	@ViewChild('header', { read: ElementRef }) private header: ElementRef;
 	@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
+	@ViewChild('bottomActionbar', { read: ElementRef }) private _bottomActionbarRef: ElementRef;
 	@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
 
 	constructor(
@@ -110,12 +123,19 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
 		}
 		this._changeref.detectChanges();
 		this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
+		this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
 		if (this._actions) {
 			if (this.collapsable) {
 				this._collapseAction = this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed);
-				this._actionbar.push(this._collapseAction, { icon: true, label: false });
+				if (this.bottomCollapse) {
+					this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
+				} else {
+					this._actionbar.push(this._collapseAction, { icon: true, label: false });
+				}
+			}
+			if (this.toggleMore) {
+				this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
 			}
-			this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
 		}
 		this.layout();
 	}

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

@@ -6,3 +6,43 @@
 dashboard-widget-wrapper .action-label {
 	padding: 7px;
 }
+
+dashboard-widget-wrapper .widgetWrapper {
+	display: flex;
+	flex-flow: column;
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+}
+
+dashboard-widget-wrapper .widgetHeader {
+	display: flex;
+	flex: 0 0;
+	padding: 3px 0 3px 0;
+}
+
+dashboard-widget-wrapper .icon {
+	display: inline-block;
+	padding: 10px;
+	margin-left: 5px;
+}
+
+dashboard-widget-wrapper .widgetTitle {
+	margin-left: 5px;
+	flex: 1 1;
+}
+
+dashboard-widget-wrapper .noTitle {
+	flex:1 1;
+}
+
+dashboard-widget-wrapper .actionbar {
+	flex: 0 0 auto;
+	align-self: end;
+}
+
+dashboard-widget-wrapper .bottomActionbar {
+	flex: 0 0 auto;
+	align-self: center;
+	margin-top: -28px;
+}

src/sql/workbench/contrib/dashboard/browser/pages/databaseDashboardPage.component.ts

@@ -27,7 +27,7 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
 
 export class DatabaseDashboardPage extends DashboardPage implements OnInit {
 	protected propertiesWidget: WidgetConfig = {
-		name: nls.localize('databasePageName', "DATABASE DASHBOARD"),
+		name: nls.localize('databasePageName', "Database Properties"),
 		widget: {
 			'properties-widget': undefined
 		},

src/sql/workbench/contrib/dashboard/browser/pages/serverDashboardPage.component.ts

@@ -29,7 +29,7 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
 
 export class ServerDashboardPage extends DashboardPage implements OnInit {
 	protected propertiesWidget: WidgetConfig = {
-		name: nls.localize('serverPageName', "SERVER DASHBOARD"),
+		name: nls.localize('serverPageName', "Server Properties"),
 		widget: {
 			'properties-widget': undefined
 		},

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

@@ -18,10 +18,6 @@ import * as nls from 'vs/nls';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { ILogService } from 'vs/platform/log/common/log';
 import { subscriptionToDisposable } from 'sql/base/browser/lifecycle';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
-import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
-import { IColorTheme } from 'vs/platform/theme/common/themeService';
-import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 
 export interface PropertiesConfig {
 	properties: Array<Property>;
@@ -72,15 +68,13 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 
 	@ViewChild('child', { read: ElementRef }) private _child: ElementRef;
 	@ViewChild('parent', { read: ElementRef }) private _parent: ElementRef;
-	@ViewChild('container', { read: ElementRef }) private _container: ElementRef;
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrap: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
 		@Inject(WIDGET_CONFIG) protected _config: WidgetConfig,
-		@Inject(ILogService) private logService: ILogService,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
+		@Inject(ILogService) private logService: ILogService
 	) {
 		super(changeRef);
 		this._loadingMessage = nls.localize('loadingProperties', "Loading properties");
@@ -92,14 +86,6 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 		this._inited = true;
 		this._register(addDisposableListener(window, EventType.RESIZE, () => this.handleClipping()));
 		this._changeRef.detectChanges();
-
-		this._register(this.themeService.onDidColorThemeChange((event: IColorTheme) => {
-			this.updateTheme(event);
-		}));
-	}
-
-	ngAfterViewInit(): void {
-		this.updateTheme(this.themeService.getColorTheme());
 	}
 
 	public refresh(): void {
@@ -283,13 +269,4 @@ export class PropertiesWidgetComponent extends DashboardWidget implements IDashb
 		}
 		return val;
 	}
-
-	private updateTheme(theme: IColorTheme): void {
-		if (theme.getColor(contrastBorder)) {
-			this._container.nativeElement.style.borderBottom = 'none';
-		} else {
-			const border = theme.getColor(DASHBOARD_BORDER);
-			this._container.nativeElement.style.borderBottom = '1px solid ' + border.toString();
-		}
-	}
 }

src/sql/workbench/contrib/dashboard/test/electron-browser/propertiesWidget.component.test.ts

@@ -98,7 +98,7 @@ suite('Dashboard Properties Widget Tests', () => {
 			}
 		};
 
-		let testComponent = new PropertiesWidgetComponent(dashboardService.object, new TestChangeDetectorRef(), undefined, widgetConfig, testLogService, undefined);
+		let testComponent = new PropertiesWidgetComponent(dashboardService.object, new TestChangeDetectorRef(), undefined, widgetConfig, testLogService);
 
 		return new Promise(resolve => {
 			// because config parsing is done async we need to put our asserts on the thread stack