Change angular panel display behavior (#1344)

* got it working

* remove unneeded code

* formatting

* added scrollable, dashboard tabs don't scroll correctly though

* fix all bugs I could find

* address comments
This commit is contained in:
Anthony Dresser
2018-05-10 09:27:41 -07:00
committed by GitHub
parent f4cfb4a5ef
commit 23ec6ac567
30 changed files with 282 additions and 225 deletions

View File

@@ -2,7 +2,7 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Component, Input, ContentChild, OnDestroy } from '@angular/core';
import { Component, Input, ContentChild, OnDestroy, TemplateRef, ChangeDetectorRef, forwardRef, Inject } from '@angular/core';
import { Action } from 'vs/base/common/actions';
@@ -13,13 +13,14 @@ export abstract class TabChild {
@Component({
selector: 'tab',
template: `
<div class="visibility" [class.hidden]="!active && visibilityType == 'visibility'" *ngIf="visibilityType == 'visibility' || active" class="fullsize">
<ng-content class="body fullsize"></ng-content>
<div class="visibility" [class.hidden]="shouldBeHidden()" *ngIf="shouldBeIfed()" class="fullsize">
<ng-container *ngTemplateOutlet="templateRef"></ng-container>
</div>
`
})
export class TabComponent implements OnDestroy {
@ContentChild(TabChild) private _child: TabChild;
@ContentChild(TemplateRef) templateRef;
@Input() public title: string;
@Input() public canClose: boolean;
@Input() public actions: Array<Action>;
@@ -27,9 +28,18 @@ export class TabComponent implements OnDestroy {
public _active = false;
@Input() public identifier: string;
@Input() private visibilityType: 'if' | 'visibility' = 'if';
private rendered = false;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
) { }
public set active(val: boolean) {
this._active = val;
if (this.active) {
this.rendered = true;
}
this._cd.detectChanges();
if (this.active && this._child) {
this._child.layout();
}
@@ -45,4 +55,21 @@ export class TabComponent implements OnDestroy {
}
}
shouldBeIfed(): boolean {
if (this.active) {
return true;
} else if (this.visibilityType === 'visibility' && this.rendered) {
return true;
} else {
return false;
}
}
shouldBeHidden(): boolean {
if (this.visibilityType === 'visibility' && !this.active) {
return true;
} else {
return false;
}
}
}