unify the panel styles (#9934)

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

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);
}

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 {