ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

rework panel to not need platform (#5270)

Browse Source
This commit is contained in:
Anthony Dresser
2019-04-30 13:19:21 -07:00
committed by GitHub
parent f70369c2a6
commit 48682bacde
14 changed files with 107 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,6 @@ import {
Input, EventEmitter, Output, ViewChild, ElementRef
} from '@angular/core';
import './panelStyles';
import { TabComponent } from './tab.component';
import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
import { subscriptionToDisposable } from 'sql/base/node/lifecycle';

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

@@ -3,17 +3,23 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { IThemable } from 'vs/platform/theme/common/styler';
import 'vs/css!./media/panel';
import { Event, Emitter } from 'vs/base/common/event';
import * as DOM from 'vs/base/browser/dom';
import { IAction } from 'vs/base/common/actions';
import { IActionOptions, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import './panelStyles';
import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
export interface IPanelStyles {
export interface ITabbedPanelStyles {
titleActiveForeground?: Color;
titleActiveBorder?: Color;
titleInactiveForeground?: Color;
focusBorder?: Color;
outline?: Color;
}
export interface IPanelOptions {
@@ -45,7 +51,7 @@ const defaultOptions: IPanelOptions = {
export type PanelTabIdentifier = string;
export class TabbedPanel extends Disposable implements IThemable {
export class TabbedPanel extends Disposable {
private _tabMap = new Map<PanelTabIdentifier, IInternalPanelTab>();
private _shownTabId?: PanelTabIdentifier;
public readonly headersize = 35;
@@ -57,6 +63,7 @@ export class TabbedPanel extends Disposable implements IThemable {
private _currentDimensions: DOM.Dimension;
private _collapsed = false;
private _headerVisible: boolean;
private _styleElement: HTMLStyleElement;
private _onTabChange = new Emitter<PanelTabIdentifier>();
public onTabChange: Event<PanelTabIdentifier> = this._onTabChange.event;
@@ -66,6 +73,7 @@ export class TabbedPanel extends Disposable implements IThemable {
constructor(container: HTMLElement, private options: IPanelOptions = defaultOptions) {
super();
this.parent = DOM.$('.tabbedPanel');
this._styleElement = DOM.createStyleSheet(this.parent);
container.appendChild(this.parent);
this.header = DOM.$('.composite.title');
this.tabList = DOM.$('.tabList');
@@ -92,6 +100,7 @@ export class TabbedPanel extends Disposable implements IThemable {
this.tabList.remove();
this.body.remove();
this.parent.remove();
this._styleElement.remove();
}
public contains(tab: IPanelTab): boolean {
@@ -216,8 +225,60 @@ export class TabbedPanel extends Disposable implements IThemable {
}
}
public style(styles: IPanelStyles): void {
public style(styles: ITabbedPanelStyles): void {
const content: string[] = [];
if (styles.titleActiveForeground && styles.titleActiveBorder) {
content.push(`
.tabbedPanel > .title .tabList .tab:hover .tabLabel,
.tabbedPanel > .title .tabList .tab .tabLabel.active {
color: ${styles.titleActiveForeground};
border-bottom-color: ${styles.titleActiveBorder};
border-bottom-width: 2px;
}
.tabbedPanel > .title .tabList .tab-header.active {
outline: none;
}`);
}
if (styles.titleInactiveForeground) {
content.push(`
.tabbedPanel > .title .tabList .tab .tabLabel {
color: ${styles.titleInactiveForeground};
}`);
}
if (styles.focusBorder && styles.titleActiveForeground) {
content.push(`
.tabbedPanel > .title .tabList .tab .tabLabel:focus {
color: ${styles.titleActiveForeground};
border-bottom-color: ${styles.focusBorder} !important;
border-bottom: 1px solid;
outline: none;
}`);
}
if (styles.outline) {
content.push(`
.tabbedPanel > .title .tabList .tab-header.active,
.tabbedPanel > .title .tabList .tab-header:hover {
outline-color: ${styles.outline};
outline-width: 1px;
outline-style: solid;
padding-bottom: 0;
outline-offset: -5px;
}
.tabbedPanel > .title .tabList .tab-header:hover:not(.active) {
outline-style: dashed;
}`);
}
const newStyles = content.join('\n');
if (newStyles !== this._styleElement.innerHTML) {
this._styleElement.innerHTML = newStyles;
}
}
public layout(dimension: DOM.Dimension): void {

73
src/sql/base/browser/ui/panel/panelStyles.ts
View File

@@ -1,73 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/panel';
import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
import { activeContrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
// Title Active
const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
if (titleActive || titleActiveBorder) {
collector.addRule(`
.tabbedPanel > .title .tabList .tab:hover .tabLabel,
.tabbedPanel > .title .tabList .tab .tabLabel.active {
color: ${titleActive};
border-bottom-color: ${titleActiveBorder};
border-bottom-width: 2px;
}
.tabbedPanel > .title .tabList .tab-header.active {
outline: none;
}
`);
}
// Title Inactive
const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
if (titleInactive) {
collector.addRule(`
.tabbedPanel > .title .tabList .tab .tabLabel {
color: ${titleInactive};
}
`);
}
// Title focus
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
collector.addRule(`
.tabbedPanel > .title .tabList .tab .tabLabel:focus {
color: ${titleActive};
border-bottom-color: ${focusBorderColor} !important;
border-bottom: 1px solid;
outline: none;
}
`);
}
// Styling with Outline color (e.g. high contrast theme)
const outline = theme.getColor(activeContrastBorder);
if (outline) {
collector.addRule(`
.tabbedPanel > .title .tabList .tab-header.active,
.tabbedPanel > .title .tabList .tab-header:hover {
outline-color: ${outline};
outline-width: 1px;
outline-style: solid;
padding-bottom: 0;
outline-offset: -5px;
}
.tabbedPanel > .title .tabList .tab-header:hover:not(.active) {
outline-style: dashed;
}
`);
}
});