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

unify the panel styles (#9934)

Browse Source
This commit is contained in:
Alan Ren
2020-04-10 23:05:21 -07:00
committed by GitHub
parent b1a9c8418b
commit e450369d5e
10 changed files with 104 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sql/workbench/contrib/dashboard/browser/core/dashboardPage.component.ts
View File

@@ -51,6 +51,7 @@ import { NAV_SECTION } from 'sql/workbench/contrib/dashboard/browser/containers/
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { DASHBOARD_BORDER } from 'vs/workbench/common/theme';
import { IColorTheme } from 'vs/platform/theme/common/themeService';
import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
const dashboardRegistry = Registry.as<IDashboardRegistry>(DashboardExtensions.DashboardContributions);
@@ -132,6 +133,7 @@ export abstract class DashboardPage extends AngularDisposable implements IConfig
}
ngAfterViewInit(): void {
attachTabbedPanelStyler(this._panel, this.themeService);
this.updateTheme(this.themeService.getColorTheme());
}

16
src/sql/workbench/contrib/dashboard/browser/core/dashboardPanel.css
View File

@@ -5,20 +5,4 @@
panel.dashboard-panel > .tabbedPanel {
border-top-width: 0px;
border-top-style: solid;
box-sizing: border-box;
}
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header .tab > .tabLabel.active {
border-bottom: 0px solid;
}
panel.dashboard-panel > .tabbedPanel .tabList .tab .tabLabel {
opacity: 1;
}
panel.dashboard-panel > .tabbedPanel > .title > .title-actions,
panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
box-sizing: border-box;
border: 1px solid transparent;
}

130
src/sql/workbench/contrib/dashboard/browser/core/dashboardPanelStyles.ts
View File

@@ -5,145 +5,17 @@
import 'vs/css!./dashboardPanel';
import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import {
TAB_ACTIVE_BACKGROUND, TAB_INACTIVE_BACKGROUND,
TAB_INACTIVE_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND, TAB_BORDER, EDITOR_GROUP_BORDER, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER, DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, TAB_GROUP_HEADER, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME
} from 'vs/workbench/common/theme';
import { activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { DASHBOARD_WIDGET_SUBTEXT, TAB_LABEL, DASHBOARD_WIDGET_TITLE, DASHBOARD_PROPERTIES_NAME } from 'vs/workbench/common/theme';
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
// Title Active
const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
const tabActiveBackgroundVertical = theme.getColor(VERTICAL_TAB_ACTIVE_BACKGROUND);
if (tabActiveBackground) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
border-bottom: 0px solid;
}
panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
background-color: ${tabActiveBackgroundVertical};
}
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
background-color: ${tabActiveBackground};
}
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
border-bottom-color: transparent;
}
panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
border-right-color: transparent;
}
`);
}
const highContrastActiveTabBorderColor = theme.getColor(activeContrastBorder);
if (highContrastActiveTabBorderColor) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
outline: 1px solid;
outline-offset: -3px;
outline-color: ${highContrastActiveTabBorderColor};
}
`);
}
// Title Inactive
const tabInactiveBackground = theme.getColor(TAB_INACTIVE_BACKGROUND);
const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
if (tabInactiveBackground || tabInactiveForeground) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab .tabLabel {
color: ${tabInactiveForeground};
}
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
background-color: ${tabInactiveBackground};
}
`);
}
// tab label
const tabLabelColor = theme.getColor(TAB_LABEL);
if (tabLabelColor) {
collector.addRule(`.tabbedPanel.vertical > .title .tabList .tabLabel {
color: ${tabLabelColor}
}`);
collector.addRule(`properties-widget .propertiesValue {
color: ${tabLabelColor}
}`);
}
// tab group header
const tabGroupHeader = theme.getColor(TAB_GROUP_HEADER);
if (tabGroupHeader) {
collector.addRule(`.tabbedPanel .tab-group-header {
border-color: ${tabGroupHeader};
}`);
}
// Panel title background
const panelTitleBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
if (panelTitleBackground) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel.horizontal > .title {
background-color: ${panelTitleBackground};
}
`);
}
// Panel title background
const tabBorder = theme.getColor(TAB_BORDER);
if (tabBorder) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
border-right-color: ${tabBorder};
border-bottom-color: ${tabBorder};
}
`);
}
// Styling with Outline color (e.g. high contrast theme)
const outline = theme.getColor(activeContrastBorder);
if (outline) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel.horizontal > .title {
border-bottom-color: ${tabBorder};
border-bottom-width: 1px;
border-bottom-style: solid;
}
panel.dashboard-panel > .tabbedPanel.vertical > .title {
border-right-color: ${tabBorder};
border-right-width: 1px;
border-right-style: solid;
}
`);
}
const divider = theme.getColor(EDITOR_GROUP_BORDER);
if (divider) {
collector.addRule(`
panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header {
border-right-width: 1px;
border-right-style: solid;
}
`);
}
const sideBorder = theme.getColor(DASHBOARD_BORDER);
if (sideBorder) {
collector.addRule(`panel.dashboard-panel > .tabbedPanel.vertical > .title > .tabContainer {
border-right-width: 1px;
border-right-style: solid;
border-right-color: ${sideBorder};
}`);
}
// widget title
const widgetTitle = theme.getColor(DASHBOARD_WIDGET_TITLE);
if (widgetTitle) {