ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-12 02:58:31 -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

14
src/sql/parts/dashboard/common/dashboardPage.component.ts
View File

@@ -174,7 +174,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
}));
this._tabsDispose.push(this.dashboardService.onAddNewTabs(e => {
this.loadNewTabs(e);
this.loadNewTabs(e, true);
}));
}
@@ -188,7 +188,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
this.dashboardService.writeSettings([this.context, 'tabs'].join('.'), writeableConfig, target);
}
private loadNewTabs(dashboardTabs: IDashboardTab[]) {
private loadNewTabs(dashboardTabs: IDashboardTab[], openLastTab: boolean = false) {
if (dashboardTabs && dashboardTabs.length > 0) {
let selectedTabs = dashboardTabs.map(v => {
let container = dashboardHelper.getDashboardContainer(v.container);
@@ -226,10 +226,12 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
return config;
});
// put this immediately on the stack so that is ran *after* the tab is rendered
setTimeout(() => {
this._panel.selectTab(selectedTabs.pop().id);
});
if (openLastTab) {
// put this immediately on the stack so that is ran *after* the tab is rendered
setTimeout(() => {
this._panel.selectTab(selectedTabs.pop().id);
});
}
}
}

4
src/sql/parts/dashboard/common/dashboardPanel.css
View File

@@ -9,12 +9,12 @@ panel.dashboard-panel > .tabbedPanel {
box-sizing: border-box;
}
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header .tab > .tabLabel.active {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header .tab > .tabLabel.active {
border-bottom: 0px solid;
}
panel.dashboard-panel > .tabbedPanel > .title > .title-actions,
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
box-sizing: border-box;
border: 1px solid transparent;
}

27
src/sql/parts/dashboard/common/dashboardPanelStyles.ts
View File

@@ -15,21 +15,22 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND);
if (tabActiveBackground || tabActiveForeground) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab:hover .tabLabel,
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab .tabLabel.active {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab:hover .tabLabel,
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel.active {
color: ${tabActiveForeground};
border-bottom: 0px solid;
}
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header.active {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
background-color: ${tabActiveBackground};
outline-color: ${tabActiveBackground};
}
panel.dashboard-panel > .tabbedPanel.horizontal > .title > .tabList .tab-header.active {
panel.dashboard-panel > .tabbedPanel.horizontal > .title > .monaco-scrollable-element > .tabList .tab-header.active {
border-bottom-color: transparent;
}
panel.dashboard-panel > .tabbedPanel.vertical > .title > .tabList .tab-header.active {
panel.dashboard-panel > .tabbedPanel.vertical > .title > .monaco-scrollable-element > .tabList .tab-header.active {
border-right-color: transparent;
}
`);
@@ -38,7 +39,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const activeTabBorderColor = theme.getColor(TAB_ACTIVE_BORDER);
if (activeTabBorderColor) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header.active {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
box-shadow: ${activeTabBorderColor} 0 -1px inset;
}
`);
@@ -49,11 +50,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
if (tabInactiveBackground || tabInactiveForeground) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab .tabLabel {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel {
color: ${tabInactiveForeground};
}
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
background-color: ${tabInactiveBackground};
}
`);
@@ -73,18 +74,10 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const tabBoarder = theme.getColor(TAB_BORDER);
if (tabBoarder) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title > .tabList .tab-header {
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
border-right-color: ${tabBoarder};
border-bottom-color: ${tabBoarder};
}
panel.dashboard-panel > .tabbedPanel.horizontal > .title > .title-actions {
border-bottom-color: ${tabBoarder};
}
panel.dashboard-panel > .tabbedPanel.vertical > .title > .title-actions {
border-right-color: ${tabBoarder};
}
`);
}