diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index 5434d4c3cb..209513521a 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -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; } diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts index 2510014791..cd35561468 100644 --- a/src/sql/base/browser/ui/panel/panel.component.ts +++ b/src/sql/base/browser/ui/panel/panel.component.ts @@ -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: ` -
+
@@ -81,7 +84,7 @@ let idPool = 0;
` }) -export class PanelComponent extends Disposable { +export class PanelComponent extends Disposable implements IThemable { @Input() public options?: IPanelOptions; @Input() public actions?: Array; @ContentChildren(TabComponent) private readonly _tabs!: QueryList; @@ -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; + } + } + } + } diff --git a/src/sql/base/browser/ui/panel/panel.ts b/src/sql/base/browser/ui/panel/panel.ts index 85921f09d3..b9ba9a6ab4 100644 --- a/src/sql/base/browser/ui/panel/panel.ts +++ b/src/sql/base/browser/ui/panel/panel.ts @@ -23,6 +23,9 @@ export interface ITabbedPanelStyles { titleInactiveForeground?: Color; focusBorder?: Color; outline?: Color; + activeBackgroundForVerticalLayout?: Color; + border?: Color; + activeTabContrastBorder?: Color; } export interface IPanelOptions { diff --git a/src/sql/base/browser/ui/panel/tabHeader.component.ts b/src/sql/base/browser/ui/panel/tabHeader.component.ts index 5da411aac2..12aa962493 100644 --- a/src/sql/base/browser/ui/panel/tabHeader.component.ts +++ b/src/sql/base/browser/ui/panel/tabHeader.component.ts @@ -19,7 +19,7 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions'; @Component({ selector: 'tab-header', template: ` -