Add ModelView method SetItemLayout (#10306)

* Add ModelView method SetItemLayout

* Remove extra line break
This commit is contained in:
Charles Gagnon
2020-05-08 08:38:36 -07:00
committed by GitHub
parent e3daec38c6
commit 6e5fc9c495
13 changed files with 101 additions and 21 deletions

View File

@@ -249,6 +249,31 @@ export class PanelComponent extends Disposable implements IThemable {
this.selectTab(nextTabIndex);
}
/**
* Updates the specified tab with new config values
* @param tabId The id of the tab to update
* @param config The values to update the tab with
*/
public updateTab(tabId: string, config: { title?: string, iconClass?: string }): void {
// First find the tab and update it with the new values. Then manually refresh the
// tab header since it won't detect changes made to the corresponding tab by itself.
let tabHeader: TabHeaderComponent;
const tabHeaders = this._tabHeaders.toArray();
const tab = this._tabs.find((item, i) => {
if (item.identifier === tabId) {
tabHeader = tabHeaders?.length > i ? tabHeaders[i] : undefined;
return true;
}
return false;
});
if (tab) {
tab.title = config.title;
tab.iconClass = config.iconClass;
tabHeader?.refresh();
}
}
private findAndRemoveTabFromMRU(tab: TabComponent): void {
let mruIndex = firstIndex(this._mru, i => i === tab);

View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/tabHeader';
import { Component, AfterContentInit, OnDestroy, Input, Output, ElementRef, ViewChild, EventEmitter } from '@angular/core';
import { Component, AfterContentInit, OnDestroy, Input, Output, ElementRef, ViewChild, EventEmitter, ChangeDetectorRef, forwardRef, Inject } from '@angular/core';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -21,8 +21,8 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
template: `
<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
<div class="tab" role="presentation">
<a #tabIcon></a>
<a class="tabLabel" [class.active]="tab.active" [title]="tab.title" #tabLabel></a>
<a #tabIcon *ngIf="showIcon && tab.iconClass" class="tabIcon codicon icon {{tab.iconClass}}"></a>
<a class="tabLabel" [class.active]="tab.active" [title]="tab.title" #tabLabel>{{tab.title}}</a>
</div>
<div #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></div>
</div>
@@ -40,10 +40,10 @@ 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;
@ViewChild('tabIcon', { read: ElementRef }) private _tabIconRef!: ElementRef;
constructor() {
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
) {
super();
}
@@ -51,6 +51,10 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
return this._actionHeaderRef.nativeElement;
}
public refresh(): void {
this._cd.detectChanges();
}
ngAfterContentInit(): void {
if (this.tab.canClose || this.tab.actions) {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
@@ -62,15 +66,6 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
this._actionbar.push(closeAction, { icon: true, label: false });
}
}
const tabLabelContainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) {
const tabIconContainer = this._tabIconRef.nativeElement as HTMLElement;
tabIconContainer.className = 'tabIcon codicon icon';
tabIconContainer.classList.add(this.tab.iconClass);
}
tabLabelContainer.textContent = this.tab.title;
}
ngOnDestroy() {