ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix tabbed panel not updating correctly when layout updated (#10328)

Browse Source 
* Fix tabbed panel not updating correctly when layout updated

* Add comment
This commit is contained in:
Charles Gagnon
2020-05-08 15:56:59 -07:00
committed by GitHub
parent 5e1978e29f
commit 9bcd7cdd80
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/sql/base/browser/ui/panel/panel.component.ts
View File

@@ -52,18 +52,18 @@ let idPool = 0;
@Component({ @Component({
selector: 'panel', selector: 'panel',
template: ` template: `
<div #rootContainer class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'"> <div #rootContainer class="tabbedPanel fullsize" [ngClass]="_options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
<div *ngIf="!options.alwaysShowTabs ? _tabs.length !== 1 : true" class="composite title"> <div *ngIf="!_options.alwaysShowTabs ? _tabs.length !== 1 : true" class="composite title">
<div class="tabContainer"> <div class="tabContainer">
<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container"> <div *ngIf="_options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
<button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button> <button [attr.aria-expanded]="_tabExpanded" [title]="toggleTabPanelButtonAriaLabel" [attr.aria-label]="toggleTabPanelButtonAriaLabel" [ngClass]="toggleTabPanelButtonCssClass" tabindex="0" (click)="toggleTabPanel()"></button>
</div> </div>
<div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" (keydown)="onKey($event)"> <div [style.display]="_tabExpanded ? 'flex': 'none'" [attr.aria-hidden]="_tabExpanded ? 'false': 'true'" class="tabList" role="tablist" (keydown)="onKey($event)">
<div role="presentation" *ngFor="let tab of _tabs"> <div role="presentation" *ngFor="let tab of _tabs">
<ng-container *ngIf="tab.type!=='group-header'"> <ng-container *ngIf="tab.type!=='group-header'">
<tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header> <tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="_options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header>
</ng-container> </ng-container>
<ng-container *ngIf="tab.type==='group-header' && options.layout === NavigationBarLayout.vertical"> <ng-container *ngIf="tab.type==='group-header' && _options.layout === NavigationBarLayout.vertical">
<div class="tab-group-header"> <div class="tab-group-header">
<span>{{tab.title}}</span> <span>{{tab.title}}</span>
</div> </div>
@@ -85,7 +85,16 @@ let idPool = 0;
` `
}) })
export class PanelComponent extends Disposable implements IThemable { export class PanelComponent extends Disposable implements IThemable {
@Input() public options?: IPanelOptions; private _options: IPanelOptions = defaultOptions;
@Input() public set options(newOptions: IPanelOptions) {
// Refresh for the case when the options are set
// manually through code which doesn't trigger
// Angular's change detection
this._options = newOptions;
this._cd.detectChanges();
}
@Input() public actions?: Array<Action>; @Input() public actions?: Array<Action>;
@ContentChildren(TabComponent) private readonly _tabs!: QueryList<TabComponent>; @ContentChildren(TabComponent) private readonly _tabs!: QueryList<TabComponent>;
@ViewChildren(TabHeaderComponent) private readonly _tabHeaders!: QueryList<TabHeaderComponent>; @ViewChildren(TabHeaderComponent) private readonly _tabHeaders!: QueryList<TabHeaderComponent>;
@@ -127,7 +136,7 @@ export class PanelComponent extends Disposable implements IThemable {
} }
ngOnInit(): void { ngOnInit(): void {
this.options = mixin(this.options || {}, defaultOptions, false); this._options = mixin(this._options || {}, defaultOptions, false);
const rootContainerElement = this._rootContainer.nativeElement as HTMLElement; const rootContainerElement = this._rootContainer.nativeElement as HTMLElement;
this._styleElement = createStyleSheet(rootContainerElement); this._styleElement = createStyleSheet(rootContainerElement);
} }