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 c4b4df0fa0..df6b13f920 100644 --- a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts +++ b/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: `
- - +
+ + +
@@ -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(`${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(); diff --git a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.css b/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.css index e134cbd8f1..8e03b2c3ff 100644 --- a/src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.css +++ b/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; +} 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 c553144ea4..a4d2d92878 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html +++ b/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. *--------------------------------------------------------------------------------------------*/ --> -
- +
-
- - {{_config.name}} - - +
+ + {{_config.name}} + +
+
diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts index 923834fee5..e6d77c56a4 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts @@ -51,9 +51,12 @@ const componentMap: { [x: string]: Type } = { 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; 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, this._component.actionsContext), { icon: true, label: false }); } - this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array, this._component.actionsContext), { icon: true, label: false }); } this.layout(); } diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css index 24fa59a7ff..4898f4e36e 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css +++ b/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; +} diff --git a/src/sql/workbench/contrib/dashboard/browser/pages/databaseDashboardPage.component.ts b/src/sql/workbench/contrib/dashboard/browser/pages/databaseDashboardPage.component.ts index a68fee2274..a48be5bdc3 100644 --- a/src/sql/workbench/contrib/dashboard/browser/pages/databaseDashboardPage.component.ts +++ b/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 }, diff --git a/src/sql/workbench/contrib/dashboard/browser/pages/serverDashboardPage.component.ts b/src/sql/workbench/contrib/dashboard/browser/pages/serverDashboardPage.component.ts index d964b1dae0..3f05917111 100644 --- a/src/sql/workbench/contrib/dashboard/browser/pages/serverDashboardPage.component.ts +++ b/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 }, 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 2afeb00b2e..fa755de25d 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 @@ -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; @@ -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(); - } - } } diff --git a/src/sql/workbench/contrib/dashboard/test/electron-browser/propertiesWidget.component.test.ts b/src/sql/workbench/contrib/dashboard/test/electron-browser/propertiesWidget.component.test.ts index 16cc7c0715..101ecc3f89 100644 --- a/src/sql/workbench/contrib/dashboard/test/electron-browser/propertiesWidget.component.test.ts +++ b/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