added scrollable directibe to the dashboard griod container (#6206)

This commit is contained in:
Maddy
2019-07-01 12:20:17 -07:00
committed by GitHub
parent 678b2737bd
commit e44e0a7c89
3 changed files with 12 additions and 3 deletions

View File

@@ -180,7 +180,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<MssqlE
container.addItem(endPointRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } }); container.addItem(endPointRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
}); });
const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', alignItems: 'left' }).component(); const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '540px', height: '100%', alignItems: 'left', position: 'absolute' }).component();
endpointsContainer.addItem(container, { CSSStyles: { 'padding-top': '25px', 'padding-left': '5px' } }); endpointsContainer.addItem(container, { CSSStyles: { 'padding-top': '25px', 'padding-left': '5px' } });
await view.initializeModel(endpointsContainer); await view.initializeModel(endpointsContainer);

View File

@@ -4,7 +4,8 @@
* Licensed under the Source EULA. See License.txt in the project root for license information. * Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
--> -->
<div> <div class="fullsize" style="display: flex; flex-direction: column">
<div scrollable [horizontalScroll]="ScrollbarVisibility.Auto" [verticalScroll]="ScrollbarVisibility.Auto">
<table class="grid-table"> <table class="grid-table">
<tr *ngFor="let row of rows" class="grid-table-row"> <tr *ngFor="let row of rows" class="grid-table-row">
<ng-container *ngFor="let col of cols"> <ng-container *ngFor="let col of cols">
@@ -28,4 +29,5 @@
</ng-container> </ng-container>
</tr> </tr>
</table> </table>
</div>
</div> </div>

View File

@@ -5,7 +5,7 @@
import 'vs/css!./dashboardGridContainer'; import 'vs/css!./dashboardGridContainer';
import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef } from '@angular/core'; import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, ContentChild } from '@angular/core';
import { CommonServiceInterface } from 'sql/platform/bootstrap/node/commonServiceInterface.service'; import { CommonServiceInterface } from 'sql/platform/bootstrap/node/commonServiceInterface.service';
import { TabConfig, WidgetConfig } from 'sql/workbench/parts/dashboard/common/dashboardWidget'; import { TabConfig, WidgetConfig } from 'sql/workbench/parts/dashboard/common/dashboardWidget';
@@ -15,6 +15,8 @@ import { WebviewContent } from 'sql/workbench/parts/dashboard/contents/webviewCo
import { TabChild } from 'sql/base/electron-browser/ui/panel/tab.component'; import { TabChild } from 'sql/base/electron-browser/ui/panel/tab.component';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
import { ScrollableDirective } from 'sql/base/electron-browser/ui/scrollable/scrollable.directive';
import { ScrollbarVisibility } from 'vs/editor/common/standalone/standaloneEnums';
export interface GridCellConfig { export interface GridCellConfig {
id?: string; id?: string;
@@ -52,6 +54,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
public readonly onResize: Event<void> = this._onResize.event; public readonly onResize: Event<void> = this._onResize.event;
private cellWidth: number = 270; private cellWidth: number = 270;
private cellHeight: number = 270; private cellHeight: number = 270;
private ScrollbarVisibility = ScrollbarVisibility;
protected SKELETON_WIDTH = 5; protected SKELETON_WIDTH = 5;
@@ -175,6 +178,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>; @ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
@ViewChildren(WebviewContent) private _webViews: QueryList<WebviewContent>; @ViewChildren(WebviewContent) private _webViews: QueryList<WebviewContent>;
@ContentChild(ScrollableDirective) private _scrollable;
constructor( constructor(
@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface, @Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface,
@Inject(forwardRef(() => ElementRef)) protected _el: ElementRef, @Inject(forwardRef(() => ElementRef)) protected _el: ElementRef,
@@ -236,6 +240,9 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
item.layout(); item.layout();
}); });
} }
if (this._scrollable) {
this._scrollable.layout();
}
} }
public refresh(): void { public refresh(): void {