ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-15 02:48:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move dashboard properties, fix scroll (#758)

Browse Source 
* started moving properties to home tab

* moved properties

* refactored panel in dashboard

* fix errors

* fix miss-naming
This commit is contained in:
Anthony Dresser
2018-02-23 13:34:11 -08:00
committed by GitHub
parent fdc956e116
commit f9d8f479b5
10 changed files with 156 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/sql/parts/dashboard/common/dashboardPage.component.html
View File

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

90
src/sql/parts/dashboard/common/dashboardPage.component.ts
View File

@@ -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 => {