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

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

@@ -76,6 +76,10 @@ panel {
min-width: 65px;
}
.tabbedPanel.horizontal > .title .tabList .tab-header {
margin: 5px;
}
.tabbedPanel.vertical > .title .tabList .tab-header {
display: block;
min-width: 150px;
@@ -156,9 +160,8 @@ panel {
.tabbedPanel .tab-group-header {
font-weight: 600;
font-size: 14px;
margin: 15px 24px 3px 24px;
line-height: 20px;
height: 35px;
margin: 10px 24px 5px 24px;
line-height: 35px;
border-style: solid;
border-width: 0 0 1px 0;
}

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

@@ -23,6 +23,9 @@ import * as nls from 'vs/nls';
import { TabHeaderComponent } from 'sql/base/browser/ui/panel/tabHeader.component';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IThemable } from 'vs/base/common/styler';
import { ITabbedPanelStyles } from 'sql/base/browser/ui/panel/panel';
import { createStyleSheet } from 'vs/base/browser/dom';
export interface IPanelOptions {
/**
@@ -49,7 +52,7 @@ let idPool = 0;
@Component({
selector: 'panel',
template: `
<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
<div #rootContainer class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
<div *ngIf="!options.alwaysShowTabs ? _tabs.length !== 1 : true" class="composite title">
<div class="tabContainer">
<div *ngIf="options.layout === NavigationBarLayout.vertical" class="vertical-tab-action-container">
@@ -81,7 +84,7 @@ let idPool = 0;
</div>
`
})
export class PanelComponent extends Disposable {
export class PanelComponent extends Disposable implements IThemable {
@Input() public options?: IPanelOptions;
@Input() public actions?: Array<Action>;
@ContentChildren(TabComponent) private readonly _tabs!: QueryList<TabComponent>;
@@ -95,12 +98,15 @@ export class PanelComponent extends Disposable {
private _actionbar?: ActionBar;
private _mru: TabComponent[] = [];
private _tabExpanded: boolean = true;
private _styleElement: HTMLStyleElement;
protected AutoScrollbarVisibility = ScrollbarVisibility.Auto; // used by angular template
protected HiddenScrollbarVisibility = ScrollbarVisibility.Hidden; // used by angular template
protected NavigationBarLayout = NavigationBarLayout; // used by angular template
@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef!: ElementRef;
@ViewChild('rootContainer', { read: ElementRef }) private _rootContainer!: ElementRef;
constructor(
@Inject(forwardRef(() => NgZone)) private _zone: NgZone,
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef) {
@@ -122,6 +128,8 @@ export class PanelComponent extends Disposable {
ngOnInit(): void {
this.options = mixin(this.options || {}, defaultOptions, false);
const rootContainerElement = this._rootContainer.nativeElement as HTMLElement;
this._styleElement = createStyleSheet(rootContainerElement);
}
ngAfterContentInit(): void {
@@ -321,4 +329,70 @@ export class PanelComponent extends Disposable {
return header.nativeElement === document.activeElement;
});
}
style(styles: ITabbedPanelStyles) {
if (this._styleElement) {
const content: string[] = [];
if (styles.titleInactiveForeground) {
content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header {
color: ${styles.titleInactiveForeground}
}`);
}
if (styles.titleActiveBorder && styles.titleActiveForeground) {
content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus,
.tabbedPanel.horizontal > .title .tabList .tab-header.active {
border-color: ${styles.titleActiveBorder};
border-style: solid;
color: ${styles.titleActiveForeground}
}`);
content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus,
.tabbedPanel.horizontal > .title .tabList .tab-header.active {;
border-width: 0 0 ${styles.activeTabContrastBorder ? '0' : '2'}px 0;
}`);
content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:hover {
color: ${styles.titleActiveForeground}
}`);
}
if (styles.activeBackgroundForVerticalLayout) {
content.push(`.tabbedPanel.vertical > .title .tabList .tab-header.active {
background-color:${styles.activeBackgroundForVerticalLayout}
}`);
}
if (styles.border) {
content.push(`.tabbedPanel.vertical > .title > .tabContainer {
border-right-width: 1px;
border-right-style: solid;
border-right-color: ${styles.border};
}
.tabbedPanel .tab-group-header {
border-color: ${styles.border};
}`);
}
if (styles.activeTabContrastBorder) {
content.push(`
.tabbedPanel > .title .tabList .tab-header.active {
outline: 1px solid;
outline-offset: -3px;
outline-color: ${styles.activeTabContrastBorder};
}
`);
} else {
content.push(`.tabbedPanel.horizontal > .title .tabList .tab-header:focus {
outline-width: 0px;
}`);
}
const newStyles = content.join('\n');
if (newStyles !== this._styleElement.innerHTML) {
this._styleElement.innerHTML = newStyles;
}
}
}
}

3
src/sql/base/browser/ui/panel/panel.ts
View File

@@ -23,6 +23,9 @@ export interface ITabbedPanelStyles {
titleInactiveForeground?: Color;
focusBorder?: Color;
outline?: Color;
activeBackgroundForVerticalLayout?: Color;
border?: Color;
activeTabContrastBorder?: Color;
}
export interface IPanelOptions {

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

@@ -19,7 +19,7 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
@Component({
selector: 'tab-header',
template: `
<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row; height: 100%" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
<span class="tab" role="presentation">
<div role="presentation">
<a #tabIcon></a>

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