Support icons in panel (#895)

* support icons in panel

* formatting

* address Smitha comments

* address comments
This commit is contained in:
Abbie Petchtes
2018-03-13 13:48:17 -07:00
committed by GitHub
parent 383d74ceb4
commit f3c7b2416b
10 changed files with 96 additions and 19 deletions

View File

@@ -21,7 +21,7 @@ import { CloseTabAction } from './tabActions';
template: `
<div #actionHeader class="tab-header" style="display: flex; flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
<span class="tab" (click)="selectTab(tab)">
<a class="tabLabel" [class.active]="tab.active">
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
{{tab.title}}
</a>
</span>
@@ -31,6 +31,7 @@ import { CloseTabAction } from './tabActions';
})
export class TabHeaderComponent extends Disposable implements AfterContentInit, OnDestroy {
@Input() public tab: TabComponent;
@Input() public showIcon: boolean;
@Output() public onSelectTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@Output() public onCloseTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@@ -38,18 +39,29 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
@ViewChild('actionHeader', { read: ElementRef }) private _actionHeaderRef: ElementRef;
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
@ViewChild('tabLabel', { read: ElementRef }) private _tabLabelRef: ElementRef;
constructor() {
super();
}
ngAfterContentInit(): void {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
if (this.tab.actions) {
this._actionbar.push(this.tab.actions, { icon: true, label: false });
if (this.tab.canClose || this.tab.actions) {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
if (this.tab.actions) {
this._actionbar.push(this.tab.actions, { icon: true, label: false });
}
if (this.tab.canClose) {
let closeAction = this._register(new CloseTabAction(this.closeTab, this));
this._actionbar.push(closeAction, { icon: true, label: false });
}
}
if (this.tab.canClose) {
let closeAction = this._register(new CloseTabAction(this.closeTab, this));
this._actionbar.push(closeAction, { icon: true, label: false });
let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) {
tabLabelcontainer.className = 'tabLabel icon';
tabLabelcontainer.classList.add(this.tab.iconClass);
} else {
tabLabelcontainer.className = 'tabLabel';
}
}