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

Fix few dashboard panel issues (#801)

Browse Source 
* home tab is shown by default when the dashboard is opened

* add scroll bar when tab list is overflow

* fix regression in other tab panels

* address comments
This commit is contained in:
Abbie Petchtes
2018-03-06 10:28:15 -08:00
committed by GitHub
parent bab9fc01ea
commit 0bba972657
5 changed files with 79 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/sql/base/browser/ui/panel/media/panel.css
View File

@@ -29,6 +29,8 @@ panel {
padding: 0;
justify-content: flex-start;
line-height: 35px;
white-space: nowrap;
flex: 1;
}
.tabbedPanel .tabList .tab {
@@ -61,7 +63,7 @@ panel {
}
.composite.title .title-actions {
flex: 1;
flex: 1 1 auto;
}
.tab > .tabLabel.active {
@@ -87,6 +89,10 @@ panel {
height: 100%;
}
.tabbedPanel.vertical .tabList {
flex-direction: column;
}
.tabbedPanel > .tab-content {
flex: 1;
position: relative;
@@ -98,4 +104,9 @@ panel {
.tabbedPanel.horizontal > .title > .tabList {
flex-flow: row;
}
.tabbedPanel > .title > .monaco-scrollable-element {
flex: 0 1 auto;
width: inherit;
}

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

@@ -13,6 +13,10 @@ 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';
export interface IPanelOptions {
/**
@@ -40,9 +44,10 @@ let idPool = 0;
@Component({
selector: 'panel',
template: `
<div class="tabbedPanel fullsize" #tabbedPanel>
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
<div class="tabList">
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title" #titleContainer>
<div class="tabList" #tabList>
<div *ngFor="let tab of _tabs">
<tab-header [tab]="tab" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
</div>
@@ -60,7 +65,7 @@ let idPool = 0;
</div>
`
})
export class PanelComponent implements AfterContentInit, OnInit, OnChanges, OnDestroy, AfterViewInit {
export class PanelComponent extends Disposable implements AfterContentInit, OnInit, OnChanges, OnDestroy, AfterViewInit {
@Input() public options: IPanelOptions;
@Input() public actions: Array<Action>;
@ContentChildren(TabComponent) private _tabs: QueryList<TabComponent>;
@@ -72,10 +77,15 @@ export class PanelComponent implements AfterContentInit, OnInit, OnChanges, OnDe
private _activeTab: TabComponent;
private _actionbar: ActionBar;
private _mru: TabComponent[];
private _scrollableElement: ScrollableElement;
@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
@ViewChild('tabbedPanel', { read: ElementRef }) private _tabbedPanelRef: ElementRef;
constructor( @Inject(forwardRef(() => NgZone)) private _zone: NgZone) { }
@ViewChild('titleContainer', { read: ElementRef }) private _titleContainer: ElementRef;
@ViewChild('tabList', { read: ElementRef }) private _tabList: ElementRef;
constructor( @Inject(forwardRef(() => NgZone)) private _zone: NgZone) {
super();
}
ngOnInit(): void {
this.options = mixin(this.options || {}, defaultOptions, false);
@@ -90,6 +100,39 @@ export class PanelComponent implements AfterContentInit, OnInit, OnChanges, OnDe
}
ngAfterViewInit(): void {
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._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 {