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