ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-20 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Change angular panel display behavior (#1344)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,13 +7,13 @@ import { Component, ContentChildren, QueryList, AfterContentInit, Inject, forwar
import { TabComponent } from './tab.component';
import { TabHeaderComponent } from './tabHeader.component';
import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
import './panelStyles';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { Action } from 'vs/base/common/actions';
import * as types from 'vs/base/common/types';
import { mixin } from 'vs/base/common/objects';
import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { addDisposableListener, EventType } from 'vs/base/browser/dom';
import { Disposable } from 'vs/base/common/lifecycle';
@@ -46,12 +46,13 @@ let idPool = 0;
@Component({
selector: 'panel',
template: `
<div class="tabbedPanel fullsize" #tabbedPanel>
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title" #titleContainer>
<div class="tabList" #tabList role="tablist">
<div *ngFor="let tab of _tabs">
<tab-header [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
<div class="tabContainer">
<div class="tabList" role="tablist" scrollable [horizontalScroll]="ScrollbarVisibility.Auto" [verticalScroll]="ScrollbarVisibility.Hidden" [scrollYToX]="true">
<div *ngFor="let tab of _tabs">
<tab-header [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
</div>
</div>
</div>
<div class="title-actions">
@@ -67,11 +68,12 @@ let idPool = 0;
</div>
`
})
export class PanelComponent extends Disposable implements AfterContentInit, OnInit, OnChanges, OnDestroy, AfterViewInit {
export class PanelComponent extends Disposable {
@Input() public options: IPanelOptions;
@Input() public actions: Array<Action>;
@ContentChildren(TabComponent) private _tabs: QueryList<TabComponent>;
@ViewChildren(TabHeaderComponent) private _headerTabs: QueryList<TabHeaderComponent>;
@ViewChild(ScrollableDirective) private scrollable: ScrollableDirective;
@Output() public onTabChange = new EventEmitter<TabComponent>();
@Output() public onTabClose = new EventEmitter<TabComponent>();
@@ -79,12 +81,11 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
private _activeTab: TabComponent;
private _actionbar: ActionBar;
private _mru: TabComponent[];
private _scrollableElement: ScrollableElement;
private ScrollbarVisibility = ScrollbarVisibility;
private NavigationBarLayout = NavigationBarLayout;
@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
@ViewChild('tabbedPanel', { read: ElementRef }) private _tabbedPanelRef: ElementRef;
@ViewChild('titleContainer', { read: ElementRef }) private _titleContainer: ElementRef;
@ViewChild('tabList', { read: ElementRef }) private _tabList: ElementRef;
constructor( @Inject(forwardRef(() => NgZone)) private _zone: NgZone) {
super();
}
@@ -96,51 +97,14 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
ngAfterContentInit(): void {
if (this._tabs && this._tabs.length > 0) {
this._activeTab = this._tabs.first;
this._activeTab.active = true;
}
}
ngAfterViewInit(): void {
if (!this.options.showTabsWhenOne ? this._tabs.length !== 1 : true) {
let container = this._titleContainer.nativeElement as HTMLElement;
let tabList = this._tabList.nativeElement as HTMLElement;
container.removeChild(tabList);
this._scrollableElement = new ScrollableElement(tabList, {
horizontal: ScrollbarVisibility.Auto,
vertical: ScrollbarVisibility.Hidden,
scrollYToX: true,
useShadows: false,
horizontalScrollbarSize: 3
this.selectTab(this._tabs.first);
} else {
const sub = this._tabs.changes.subscribe(() => {
if (this._tabs && this._tabs.length > 0) {
this.selectTab(this._tabs.first);
sub.unsubscribe();
}
});
this._scrollableElement.onScroll(e => {
tabList.scrollLeft = e.scrollLeft;
});
container.insertBefore(this._scrollableElement.getDomNode(), container.firstChild);
this._scrollableElement.setScrollDimensions({
width: tabList.offsetWidth,
scrollWidth: tabList.scrollWidth
});
this._register(addDisposableListener(window, EventType.RESIZE, () => {
// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
setTimeout(() => {
this._scrollableElement.setScrollDimensions({
width: tabList.offsetWidth,
scrollWidth: tabList.scrollWidth
});
}, 100);
}));
if (this.options.layout === NavigationBarLayout.horizontal) {
(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(horizontalLayout);
} else {
(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(verticalLayout);
}
}
}
@@ -154,6 +118,17 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
}
}
ngAfterViewInit(): void {
this._tabs.changes.subscribe(() => {
if (this.scrollable) {
this.scrollable.layout();
}
});
if (this.scrollable) {
this.scrollable.layout();
}
}
ngOnDestroy() {
if (this._actionbar) {
this._actionbar.dispose();
@@ -210,12 +185,6 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
this.setMostRecentlyUsed(tab);
this._activeTab.active = true;
// Make the tab header focus on the new selected tab
let activeTabHeader = this._headerTabs.find(i => i.tab === this._activeTab);
if (activeTabHeader) {
activeTabHeader.focusOnTabHeader();
}
this.onTabChange.emit(tab);
});
}