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

46
src/sql/workbench/browser/modelComponents/media/tabbedPanel.css
View File

@@ -11,49 +11,3 @@
.tabbedpanel-component .tabbedPanel {
border-top-width: 0px;
}
.tabbedpanel-component .tabbedPanel .tabContainer {
border-style: solid;
border-color: rgb(237, 235, 233);
border-width: 0px;
}
.vs-dark .tabbedpanel-component .tabbedPanel .tabContainer,
.hc-black .tabbedpanel-component .tabbedPanel .tabContainer {
border-color: rgba(128, 128, 128, 0.5);
}
.tabbedpanel-component .tabbedPanel.vertical > .title .tabContainer {
border-right-width: 1px;
}
.tabbedpanel-component .tabbedPanel.horizontal > .title .tabContainer {
border-bottom-width: 1px;
}
.tabbedpanel-component .tabbedPanel .tab > .tabLabel.active {
border-bottom: 0px solid;
}
.tabbedpanel-component .tabbedPanel.vertical .tabList .tab-header {
line-height: 35px;
}
.tabbedpanel-component .tabbedPanel.horizontal .tabList .tab-header {
border-color: rgb(214, 214, 214);
border-width: 0 1px 0 0;
border-style: solid;
}
.tabbedpanel-component .tabbedPanel .tabList .tab .tabLabel {
font-weight: normal;
}
.tabbedpanel-component .tabList .tab-header.active {
background-color: #E1F0FE;
}
.vs-dark .tabbedpanel-component .tabList .tab-header.active,
.hc-black .tabbedpanel-component .tabList .tab-header.active {
background-color: rgba(128, 128, 128, 0.5);
}

7
src/sql/workbench/browser/modelComponents/tabbedPanel.component.ts
View File

@@ -11,6 +11,8 @@ import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBa
import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
import 'vs/css!./media/tabbedPanel';
import { IUserFriendlyIcon, createIconCssClass } from 'sql/workbench/browser/modelComponents/iconUtils';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
export interface TabConfig {
title: string;
@@ -40,7 +42,9 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
) {
super(changeRef, el);
}
@@ -49,6 +53,7 @@ export default class TabbedPanelComponent extends ContainerBase<TabConfig> imple
}
ngAfterViewInit(): void {
this._register(attachTabbedPanelStyler(this._panel, this.themeService));
}
ngOnDestroy(): void {

11
src/sql/workbench/common/styler.ts
View File

@@ -8,7 +8,11 @@ import { IDisposable } from 'vs/base/common/lifecycle';
import * as cr from 'vs/platform/theme/common/colorRegistry';
import { IThemable } from 'vs/base/common/styler';
import { attachStyler } from 'vs/platform/theme/common/styler';
import { SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
import {
SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_DRAG_AND_DROP_BACKGROUND,
PANEL_ACTIVE_TITLE_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, VERTICAL_TAB_ACTIVE_BACKGROUND, DASHBOARD_BORDER,
} from 'vs/workbench/common/theme';
export function attachModalDialogStyler(widget: IThemable, themeService: IThemeService, style?:
{
@@ -39,6 +43,9 @@ export function attachTabbedPanelStyler(widget: IThemable, themeService: IThemeS
titleActiveBorder: PANEL_ACTIVE_TITLE_BORDER,
titleInactiveForeground: PANEL_INACTIVE_TITLE_FOREGROUND,
focusBorder: cr.focusBorder,
outline: cr.activeContrastBorder
outline: cr.activeContrastBorder,
activeBackgroundForVerticalLayout: VERTICAL_TAB_ACTIVE_BACKGROUND,
border: DASHBOARD_BORDER,
activeTabContrastBorder: cr.activeContrastBorder
}, widget);
}

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) {