ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-13 11:38:36 -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

30
src/sql/parts/dashboard/containers/dashboardHomeContainer.component.ts Normal file
View File

@@ -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;
}

10
src/sql/parts/dashboard/containers/dashboardHomeContainer.css Normal file
View File

@@ -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;
}

67
src/sql/parts/dashboard/containers/dashboardWidgetContainer.component.ts
View File

@@ -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">
</widget-content>
<div class="scroll-container" #scrollContainer>
<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();
}

11
src/sql/parts/dashboard/containers/dashboardWidgetContainer.css
View File

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