mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-18 01:25:37 -05:00
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:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user