Move dashboard properties, fix scroll (#758)

* started moving properties to home tab

* moved properties

* refactored panel in dashboard

* fix errors

* fix miss-naming

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

@@ -8,10 +8,19 @@
 	border-top-width: 1px;
 	border-top-style: solid;
 	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
+panel {
+	display: block;
+	height: 100%;
+	width: 100%;
 }
 
 .tabbedPanel .composite.title {
 	display: flex;
+	flex: 0 0 auto;
 }
 
 .tabbedPanel .tabList {
@@ -70,8 +79,9 @@
 	height: 100%;
 }
 
-.tabbedPanel.vertical > .tab-content {
+.tabbedPanel > .tab-content {
 	flex: 1;
+	position: relative;
 }
 
 .tabbedPanel.vertical > .title > .tabList {

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

@@ -40,7 +40,7 @@ let idPool = 0;
 @Component({
 	selector: 'panel',
 	template: `
-		<div class="tabbedPanel fullsize" #tabbedPanel style="position: absolute">
+		<div class="tabbedPanel fullsize" #tabbedPanel>
 			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
 				<div class="tabList">
 					<div *ngFor="let tab of _tabs">
@@ -52,8 +52,10 @@ let idPool = 0;
 					</div>
 				</div>
 			</div>
-			<div class="tab-content fullsize">
+			<div class="tab-content">
-				<ng-content class="fullsize"></ng-content>
+				<div class="fullsize" style="position: absolute">
+					<ng-content></ng-content>
+				</div>
 			</div>
 		</div>
 	`

src/sql/parts/dashboard/common/dashboardPage.component.html

@@ -4,23 +4,19 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div  #scrollContainer style="height: 100%">
+<panel class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
-	<div #scrollable style="position: relative; display: flex; flex-direction: column; height: 100%">
+	<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
-		<div style="flex: 0 0 auto" #propertiesContainer>
+		<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
-			<dashboard-widget-wrapper #properties *ngIf="propertiesWidget" [_config]="propertiesWidget" style="padding-left: 10px; padding-right: 10px; height: 90px; display: block">
+		</dashboard-home-container>
-			</dashboard-widget-wrapper>
+		<ng-template #not_home>
-		</div>
+			<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
-		<panel style="flex: 1 1 auto; position: relative" class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
+			</dashboard-webview-container>
-			<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
+			<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
-				<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+			</dashboard-widget-container>
-				</dashboard-webview-container>
+			<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
-				<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+			</dashboard-nav-section>
-				</dashboard-widget-container>
+			<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
-				<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
+			</dashboard-grid-container>
-				</dashboard-nav-section>
+		</ng-template>
-				<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
+	</tab>
-				</dashboard-grid-container>
+</panel>
-			</tab>
-		</panel>
-	</div>
-</div>

src/sql/parts/dashboard/common/dashboardPage.component.ts

@@ -30,7 +30,6 @@ import * as types from 'vs/base/common/types';
 import { Severity } from 'vs/platform/message/common/message';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import * as nls from 'vs/nls';
-import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { addDisposableListener, getContentHeight, EventType } from 'vs/base/browser/dom';
 import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -50,11 +49,9 @@ const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.Da
 })
 export abstract class DashboardPage extends Disposable implements OnDestroy {
 
-	protected SKELETON_WIDTH = 5;
 	protected tabs: Array<TabConfig> = [];
 
 	private _originalConfig: WidgetConfig[];
-	private _scrollableElement: ScrollableElement;
 
 	private _widgetConfigLocation: string;
 	private _propertiesConfigLocation: string;
@@ -63,10 +60,6 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 	private _tabsDispose: Array<IDisposable> = [];
 	private _pinnedTabs: Array<PinConfig> = [];
 
-	@ViewChild('properties') private _properties: DashboardWidgetWrapper;
-	@ViewChild('scrollable', { read: ElementRef }) private _scrollable: ElementRef;
-	@ViewChild('scrollContainer', { read: ElementRef }) private _scrollContainer: ElementRef;
-	@ViewChild('propertiesContainer', { read: ElementRef }) private _propertiesContainer: ElementRef;
 	@ViewChildren(DashboardTab) private _tabs: QueryList<DashboardTab>;
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 
@@ -91,6 +84,9 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 		widgetHelper.validateGridConfig
 	];
 
+	protected abstract propertiesWidget: WidgetConfig;
+	protected abstract get context(): string;
+
 	constructor(
 		@Inject(forwardRef(() => DashboardServiceInterface)) protected dashboardService: DashboardServiceInterface,
 		@Inject(BOOTSTRAP_SERVICE_ID) protected bootstrapService: IBootstrapService,
@@ -122,51 +118,6 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 		}
 	}
 
-	ngAfterViewInit(): void {
-		this._register(this.dashboardService.themeService.onDidColorThemeChange(this.updateTheme, this));
-		this.updateTheme(this.dashboardService.themeService.getColorTheme());
-		let container = this._scrollContainer.nativeElement as HTMLElement;
-		let scrollable = this._scrollable.nativeElement as HTMLElement;
-		container.removeChild(scrollable);
-		this._scrollableElement = new ScrollableElement(scrollable, {
-			horizontal: ScrollbarVisibility.Hidden,
-			vertical: ScrollbarVisibility.Auto,
-			useShadows: false
-		});
-
-		this._scrollableElement.onScroll(e => {
-			scrollable.style.bottom = e.scrollTop + 'px';
-		});
-
-		container.appendChild(this._scrollableElement.getDomNode());
-		let initalHeight = getContentHeight(scrollable);
-		this._scrollableElement.setScrollDimensions({
-			scrollHeight: Math.max(getContentHeight(scrollable), getContentHeight(container)),
-			height: getContentHeight(container)
-		});
-
-		this._register(addDisposableListener(window, EventType.RESIZE, () => {
-			// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
-			setTimeout(() => {
-				this._scrollableElement.setScrollDimensions({
-					scrollHeight: Math.max(getContentHeight(scrollable), getContentHeight(container)),
-					height: getContentHeight(container)
-				});
-			}, 100);
-		}));
-
-		// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
-		setTimeout(() => {
-			let currentheight = getContentHeight(scrollable);
-			if (initalHeight !== currentheight) {
-				this._scrollableElement.setScrollDimensions({
-					scrollHeight: Math.max(getContentHeight(scrollable), getContentHeight(container)),
-					height: getContentHeight(container)
-				});
-			}
-		}, 100);
-	}
-
 	private createTabs(homeWidgets: WidgetConfig[]) {
 		// Clear all tabs
 		this.tabs = [];
@@ -296,40 +247,13 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 		if (!existedTab) {
 			this.tabs.push(tab);
 			this._cd.detectChanges();
-			let tabComponents = this._tabs.find(i => i.id === tab.id);
-			this._register(tabComponents.onResize(() => {
-				this._scrollableElement.setScrollDimensions({
-					scrollHeight: Math.max(getContentHeight(this._scrollable.nativeElement), getContentHeight(this._scrollContainer.nativeElement)),
-					height: getContentHeight(this._scrollContainer.nativeElement)
-				});
-			}));
 		}
 	}
 
-	private updateTheme(theme: IColorTheme): void {
-		let el = this._propertiesContainer.nativeElement as HTMLElement;
-		let border = theme.getColor(colors.contrastBorder, true);
-		let borderColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true);
-
-		if (border) {
-			el.style.borderColor = border.toString();
-			el.style.borderBottomWidth = '1px';
-			el.style.borderBottomStyle = 'solid';
-		} else if (borderColor) {
-			el.style.borderBottom = '1px solid ' + borderColor.toString();
-		} else {
-			el.style.border = 'none';
-		}
-
-	}
-
 	ngOnDestroy() {
 		this.dispose();
 	}
 
-	protected abstract propertiesWidget: WidgetConfig;
-	protected abstract get context(): string;
-
 	private getProperties(): Array<WidgetConfig> {
 		let properties = this.dashboardService.getSettings<IPropertiesConfig[]>([this.context, 'properties'].join('.'));
 		this._propertiesConfigLocation = 'default';
@@ -353,9 +277,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 	public refresh(refreshConfig: boolean = false): void {
 		if (refreshConfig) {
 			this.init();
-			this.refreshProperties();
 		} else {
-			this.refreshProperties();
 			if (this._tabs) {
 				this._tabs.forEach(tabContent => {
 					tabContent.refresh();
@@ -364,12 +286,6 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 		}
 	}
 
-	private refreshProperties(): void {
-		if (this._properties) {
-			this._properties.refresh();
-		}
-	}
-
 	public enableEdit(): void {
 		if (this._tabs) {
 			this._tabs.forEach(tabContent => {

src/sql/parts/dashboard/containers/dashboardHomeContainer.component.ts

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!./dashboardHomeContainer';
+
+import { Component, forwardRef, Input } from '@angular/core';
+
+import { DashboardWidgetContainer } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.component';
+import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
+
+@Component({
+	selector: 'dashboard-home-container',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardHomeContainer) }],
+	template: `
+		<div class="scroll-container" #scrollContainer>
+			<div class="scrollable" #scrollable>
+				<dashboard-widget-wrapper *ngIf="properties" [_config]="properties" style="padding-left: 10px; padding-right: 10px; height: 90px; display: block">
+				</dashboard-widget-wrapper>
+				<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
+				</widget-content>
+			</div>
+		</div>
+	`
+})
+export class DashboardHomeContainer extends DashboardWidgetContainer {
+	@Input() private properties: WidgetConfig;
+}

src/sql/parts/dashboard/containers/dashboardHomeContainer.css

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+ dashboard-home-tab {
+	height: 100%;
+	width: 100%;
+	display: block;
+}

src/sql/parts/dashboard/containers/dashboardWidgetContainer.component.ts

@@ -19,13 +19,20 @@ import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
 import Event, { Emitter } from 'vs/base/common/event';
+import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import { getContentHeight, addDisposableListener, EventType } from 'vs/base/browser/dom';
 
 @Component({
 	selector: 'dashboard-widget-container',
 	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWidgetContainer) }],
 	template: `
-		<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
+		<div class="scroll-container" #scrollContainer>
-		</widget-content>
+			<div class="scrollable" #scrollable>
+				<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
+				</widget-content>
+			</div>
+		</div>
 	`
 })
 export class DashboardWidgetContainer extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
@@ -34,7 +41,13 @@ export class DashboardWidgetContainer extends DashboardTab implements OnDestroy,
 	private _onResize = new Emitter<void>();
 	public readonly onResize: Event<void> = this._onResize.event;
 
+	private _scrollableElement: ScrollableElement;
+
 	@ViewChild(WidgetContent) private _widgetContent: WidgetContent;
+
+	@ViewChild('scrollable', { read: ElementRef }) private _scrollable: ElementRef;
+	@ViewChild('scrollContainer', { read: ElementRef }) private _scrollContainer: ElementRef;
+
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) protected _cd: ChangeDetectorRef
 	) {
@@ -54,6 +67,50 @@ export class DashboardWidgetContainer extends DashboardTab implements OnDestroy,
 		}));
 	}
 
+	ngAfterViewInit() {
+		let container = this._scrollContainer.nativeElement as HTMLElement;
+		let scrollable = this._scrollable.nativeElement as HTMLElement;
+		container.removeChild(scrollable);
+
+		this._scrollableElement = new ScrollableElement(scrollable, {
+			horizontal: ScrollbarVisibility.Hidden,
+			vertical: ScrollbarVisibility.Auto,
+			useShadows: false
+		});
+
+		this._scrollableElement.onScroll(e => {
+			scrollable.style.bottom = e.scrollTop + 'px';
+		});
+
+		container.appendChild(this._scrollableElement.getDomNode());
+		let initalHeight = getContentHeight(scrollable);
+		this._scrollableElement.setScrollDimensions({
+			scrollHeight: getContentHeight(scrollable),
+			height: getContentHeight(container)
+		});
+
+		this._register(addDisposableListener(window, EventType.RESIZE, () => {
+			// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
+			setTimeout(() => {
+				this._scrollableElement.setScrollDimensions({
+					scrollHeight: getContentHeight(scrollable),
+					height: getContentHeight(container)
+				});
+			}, 100);
+		}));
+
+		// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
+		setTimeout(() => {
+			let currentheight = getContentHeight(scrollable);
+			if (initalHeight !== currentheight) {
+				this._scrollableElement.setScrollDimensions({
+					scrollHeight: currentheight,
+					height: getContentHeight(container)
+				});
+			}
+		}, 200);
+	}
+
 	ngOnDestroy() {
 		this.dispose();
 	}
@@ -67,6 +124,12 @@ export class DashboardWidgetContainer extends DashboardTab implements OnDestroy,
 	}
 
 	public layout() {
+		let container = this._scrollContainer.nativeElement as HTMLElement;
+		let scrollable = this._scrollable.nativeElement as HTMLElement;
+		this._scrollableElement.setScrollDimensions({
+			scrollHeight: getContentHeight(scrollable),
+			height: getContentHeight(container)
+		});
 		this._widgetContent.layout();
 	}
 

src/sql/parts/dashboard/containers/dashboardWidgetContainer.css

@@ -6,4 +6,13 @@
 dashboard-widget-container {
 	height: 100%;
 	width: 100%;
-}
+}
+
+.scroll-container {
+	height: 100%;
+	width: 100%;
+}
+
+.scrollable {
+	position: relative;
+}

src/sql/parts/dashboard/contents/webviewContent.component.ts

@@ -30,6 +30,7 @@ export class WebviewContent implements OnInit, IDashboardWebview {
 	public readonly onResize: Event<void> = this._onResize.event;
 	private _onMessage = new Emitter<string>();
 	public readonly onMessage: Event<string> = this._onMessage.event;
+
 	private _onMessageDisposable: IDisposable;
 	private _webview: Webview;
 	private _html: string;

src/sql/parts/dashboard/dashboard.module.ts

@@ -35,7 +35,9 @@ import { WidgetContent } from 'sql/parts/dashboard/contents/widgetContent.compon
 import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 import { BreadcrumbComponent } from 'sql/base/browser/ui/breadcrumb/breadcrumb.component';
 import { IBreadcrumbService } from 'sql/base/browser/ui/breadcrumb/interfaces';
-let baseComponents = [DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer, DashboardWidgetContainer, DashboardGridContainer, DashboardNavSection, WidgetContent, WebviewContent, ComponentHostDirective, BreadcrumbComponent];
+import { DashboardHomeContainer } from 'sql/parts/dashboard/containers/dashboardHomeContainer.component';
+
+let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer, DashboardWidgetContainer, DashboardGridContainer, DashboardNavSection, WidgetContent, WebviewContent, ComponentHostDirective, BreadcrumbComponent];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
@@ -43,6 +45,7 @@ import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
 /* Pages */
 import { ServerDashboardPage } from 'sql/parts/dashboard/pages/serverDashboardPage.component';
 import { DatabaseDashboardPage } from 'sql/parts/dashboard/pages/databaseDashboardPage.component';
+
 let pageComponents = [ServerDashboardPage, DatabaseDashboardPage];
 
 /* Widget Components */
@@ -51,6 +54,7 @@ import { ExplorerWidget } from 'sql/parts/dashboard/widgets/explorer/explorerWid
 import { TasksWidget } from 'sql/parts/dashboard/widgets/tasks/tasksWidget.component';
 import { InsightsWidget } from 'sql/parts/dashboard/widgets/insights/insightsWidget.component';
 import { WebviewWidget } from 'sql/parts/dashboard/widgets/webview/webviewWidget.component';
+
 let widgetComponents = [
 	PropertiesWidgetComponent,
 	ExplorerWidget,