ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix clipping issue (#10020)

Browse Source 
* fix clipping issue

* remove hardcoded height
This commit is contained in:
Alan Ren
2020-04-16 15:59:26 -07:00
committed by GitHub
parent 07a65dd64f
commit 04ec347eeb
4 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/workbench/contrib/dashboard/browser/containers/dashboardGridContainer.component.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./dashboardGridContainer';
import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, ContentChild } from '@angular/core';
import { Component, Inject, Input, forwardRef, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
import { CommonServiceInterface } from 'sql/workbench/services/bootstrap/browser/commonServiceInterface.service';
import { TabConfig, WidgetConfig } from 'sql/workbench/contrib/dashboard/browser/core/dashboardWidget';
@@ -206,7 +206,7 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
@ViewChildren(DashboardWidgetWrapper) private _widgets: QueryList<DashboardWidgetWrapper>;
@ViewChildren(WebviewContent) private _webViews: QueryList<WebviewContent>;
@ContentChild(ScrollableDirective) private _scrollable: ScrollableDirective;
@ViewChild(ScrollableDirective) private _scrollable: ScrollableDirective;
constructor(
@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface,
@Inject(forwardRef(() => ElementRef)) protected _el: ElementRef,

4
src/sql/workbench/contrib/dashboard/browser/containers/dashboardHomeContainer.component.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./dashboardHomeContainer';
import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, ContentChild, ElementRef } from '@angular/core';
import { Component, forwardRef, Input, ChangeDetectorRef, Inject, ViewChild, 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';
@@ -44,7 +44,7 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
@Input() private properties: WidgetConfig;
@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
@ViewChild('propertiesContainer') private _propertiesContainer: ElementRef;
@ContentChild(ScrollableDirective) private _scrollable: ScrollableDirective;
@ViewChild(ScrollableDirective) private _scrollable: ScrollableDirective;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,

48
src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.html
View File

@@ -8,28 +8,30 @@
[actions]="panelActions">
<div #toolbar [style.display]="showToolbar ? 'block': 'none'" class="editor-toolbar">
</div>
<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [type]="tab.type" [iconClass]="tab.iconClass">
<ng-template>
<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-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
</dashboard-modelview-container>
<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
</dashboard-controlhost-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>
<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
</dashboard-error-container>
<div [style.height]="getContentAreaHeight()">
<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [type]="tab.type"
[iconClass]="tab.iconClass">
<ng-template>
<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-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
</dashboard-modelview-container>
<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
</dashboard-controlhost-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>
<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
</dashboard-error-container>
</ng-template>
</ng-template>
</ng-template>
</tab>
</tab>
</div>
</panel>

4
src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts
View File

@@ -553,4 +553,8 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
const border = theme.getColor(DASHBOARD_BORDER);
this.toolbarContainer.nativeElement.style.borderBottomColor = border.toString();
}
public getContentAreaHeight() {
return this.showToolbar ? `calc(100% - ${(<HTMLElement>this.toolbarContainer.nativeElement).clientHeight}px)` : '100%';
}
}