Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 27a99843 编写于 作者: B Benjamin Pasero
浏览文件
操作

theming - tab and editor borders

上级 54dbf09d
隐藏空白更改
内联 并排
Showing with 69 addition and 91 deletion
src/vs/platform/theme/common/colorRegistry.ts
浏览文件 @ 27a99843
......@@ -71,7 +71,7 @@ export interface IColorRegistry {
class ColorRegistry implements IColorRegistry {
private colorsById: { [key: string]: ColorContribution };
private colorSchema: IJSONSchema = { type: 'object', description: nls.localize('schema.colors', 'Colors used in the workbench.'), properties: {} };
private colorSchema: IJSONSchema = { type: 'object', description: nls.localize('schema.colors', "Colors used in the workbench."), properties: {} };
constructor() {
this.colorsById = {};
......@@ -113,31 +113,37 @@ export function registerColor(id: string, defaults: ColorDefaults, description:
// ----- base colors
/**
* Commonly used High contrast colors.
*/
export const highContrastBorder = registerColor('highContrastBorder', { light: null, dark: null, hc: '#6FC3DF' }, nls.localize('highContrastBorder', "Border color to separate components when high contrast theme is enabled."));
export const highContrastOutline = registerColor('highContrastOutline', { light: null, dark: null, hc: '#F38518' }, nls.localize('highContrastOutline', "Outline color for active components when high contrast theme is enabled."));
/**
* Editor background color.
* Because of bug https://monacotools.visualstudio.com/DefaultCollection/Monaco/_workitems/edit/13254
* we are *not* using the color white (or #ffffff, rgba(255,255,255)) but something very close to white.
*/
export const editorBackground = registerColor('editorBackground', { light: '#fffffe', dark: '#1E1E1E', hc: Color.black }, nls.localize('editorBackground', 'Editor background color'));
export const editorBackground = registerColor('editorBackground', { light: '#fffffe', dark: '#1E1E1E', hc: Color.black }, nls.localize('editorBackground', "Editor background color"));
/**
* Editor foreground color.
*/
export const editorForeground = registerColor('editorForeground', { light: '#333333', dark: '#BBBBBB', hc: Color.white }, nls.localize('editorForeground', 'Editor default foreground color'));
export const editorForeground = registerColor('editorForeground', { light: '#333333', dark: '#BBBBBB', hc: Color.white }, nls.localize('editorForeground', "Editor default foreground color"));
/**
* Editor selection colors.
*/
export const editorSelection = registerColor('editorSelection', { light: '#ADD6FF', dark: '#264F78', hc: '#f3f518' }, nls.localize('editorSelection', 'Color of the editor selection'));
export const editorInactiveSelection = registerColor('editorInactiveSelection', { light: '#E5EBF1', dark: '#3A3D41', hc: null }, nls.localize('editorInactiveSelection', 'Color of the inactive editor selection'));
export const editorSelectionHighlightColor = registerColor('editorSelectionHighlightColor', { light: '#add6ff4d', dark: '#add6ff26', hc: null }, nls.localize('editorsSelectionHighlightColor', 'Background color of regions highlighted while selecting'));
export const editorSelection = registerColor('editorSelection', { light: '#ADD6FF', dark: '#264F78', hc: '#f3f518' }, nls.localize('editorSelection', "Color of the editor selection"));
export const editorInactiveSelection = registerColor('editorInactiveSelection', { light: '#E5EBF1', dark: '#3A3D41', hc: null }, nls.localize('editorInactiveSelection', "Color of the inactive editor selection"));
export const editorSelectionHighlightColor = registerColor('editorSelectionHighlightColor', { light: '#add6ff4d', dark: '#add6ff26', hc: null }, nls.localize('editorsSelectionHighlightColor', "Background color of regions highlighted while selecting"));
/**
* Editor find match colors.
*/
export const editorFindMatchHighlight = registerColor('editorFindMatchHighlight', { light: '#EA5C0055', dark: '#EA5C0055', hc: null }, nls.localize('findMatchHighlight', 'Background color of regions matching the search'));
export const editorCurrentFindMatchHighlight = registerColor('editorCurrentFindMatchHighlight', { light: '#A8AC94', dark: '#515C6A', hc: null }, nls.localize('currentFindMatchHighlight', 'Background color of the current region matching the search'));
export const editorFindRangeHighlight = registerColor('editorFindRangeHighlight', { dark: '#3a3d4166', light: '#b4b4b44d', hc: null }, nls.localize('findRangeHighlight', 'Background color of regions selected for search'));
export const editorFindMatchHighlight = registerColor('editorFindMatchHighlight', { light: '#EA5C0055', dark: '#EA5C0055', hc: null }, nls.localize('findMatchHighlight', "Background color of regions matching the search"));
export const editorCurrentFindMatchHighlight = registerColor('editorCurrentFindMatchHighlight', { light: '#A8AC94', dark: '#515C6A', hc: null }, nls.localize('currentFindMatchHighlight', "Background color of the current region matching the search"));
export const editorFindRangeHighlight = registerColor('editorFindRangeHighlight', { dark: '#3a3d4166', light: '#b4b4b44d', hc: null }, nls.localize('findRangeHighlight', "Background color of regions selected for search"));
// ----- color functions
......
src/vs/workbench/browser/actions/media/actions.css
浏览文件 @ 27a99843
......@@ -3,11 +3,11 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.monaco-workbench .toggle-editor-layout {
.vs .monaco-workbench .toggle-editor-layout {
background-image: url('editor-layout.svg');
}
.vs-dark .monaco-workbench .toggle-editor-layout,
.hc-black .monaco-workbench .toggle-editor-layout {
background-image: url('editor-layout-inverse.svg');
background-image: url('editor-layout-inverse.svg') !important;
}
src/vs/workbench/browser/parts/editor/editorGroupsControl.ts
浏览文件 @ 27a99843
......@@ -34,8 +34,8 @@ import { extractResources } from 'vs/base/browser/dnd';
import { IWindowService } from 'vs/platform/windows/common/windows';
import { getCodeEditor } from 'vs/editor/common/services/codeEditorService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { Themable, TABS_CONTAINER_BACKGROUND, NO_TABS_CONTAINER_BACKGROUND } from 'vs/workbench/common/theme';
import { editorBackground, highContrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { Themable, TABS_CONTAINER_BACKGROUND, NO_TABS_CONTAINER_BACKGROUND, EDITOR_GROUP_BORDER_COLOR } from 'vs/workbench/common/theme';
export enum Rochade {
NONE,
......@@ -763,6 +763,9 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
this.sashOne.setOrientation(this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL);
this.sashTwo.setOrientation(this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL);
// Update styles
this.updateStyles();
// Trigger layout
this.arrangeGroups();
}
......@@ -931,20 +934,29 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
}
protected updateStyles(): void {
const isHighContrast = (this.theme.type === 'hc');
// Editor container background
this.silos.forEach(silo => {
// Editor container colors
this.silos.forEach((silo, index) => {
// Background
silo.style('background-color', this.getColor(editorBackground));
// Border
if (index > Position.ONE) {
silo.style('border-left-color', this.getColor(EDITOR_GROUP_BORDER_COLOR));
silo.style('border-top-color', this.getColor(EDITOR_GROUP_BORDER_COLOR));
}
});
// Title control
POSITIONS.forEach(position => {
const container = this.getTitleAreaControl(position).getContainer();
if (this.tabOptions.showTabs) {
container.style.backgroundColor = this.getColor(TABS_CONTAINER_BACKGROUND);
} else {
container.style.backgroundColor = this.getColor(NO_TABS_CONTAINER_BACKGROUND);
}
container.style.backgroundColor = this.getColor(this.tabOptions.showTabs ? TABS_CONTAINER_BACKGROUND : NO_TABS_CONTAINER_BACKGROUND);
container.style.borderBottomWidth = (isHighContrast && this.tabOptions.showTabs) ? '1px' : null;
container.style.borderBottomStyle = (isHighContrast && this.tabOptions.showTabs) ? 'solid' : null;
container.style.borderBottomColor = (isHighContrast && this.tabOptions.showTabs) ? this.getColor(highContrastBorder) : null;
});
}
......
src/vs/workbench/browser/parts/editor/media/editorGroupsControl.css
浏览文件 @ 27a99843
......@@ -128,16 +128,6 @@
border-bottom-color: #E7E7E7;
}
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
.vs .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
border-left-color: #E7E7E7;
}
.vs .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
.vs .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
border-top-color: #E7E7E7;
}
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.dragging {
border-left-color: #444;
border-right-color: #444;
......@@ -148,16 +138,6 @@
border-bottom-color: #444;
}
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
.vs-dark .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
border-left-color: #444;
}
.vs-dark .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
.vs-dark .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
border-top-color: #444;
}
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.dragging {
border-left-color: #6FC3DF;
border-right-color: #6FC3DF;
......@@ -166,14 +146,4 @@
.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.dragging {
border-top-color: #6FC3DF;
border-bottom-color: #6FC3DF;
}
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-two,
.hc-black .monaco-workbench > .editor > .content.vertical-layout > .one-editor-silo.editor-three {
border-left-color: #6FC3DF;
}
.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-two,
.hc-black .monaco-workbench > .editor > .content.horizontal-layout > .one-editor-silo.editor-three {
border-top-color: #6FC3DF;
}
\ No newline at end of file
src/vs/workbench/browser/parts/editor/media/tabstitle.css
浏览文件 @ 27a99843
......@@ -182,40 +182,6 @@
/* TODO@theme */
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.tabs {
border-bottom: 1px solid;
border-bottom-color: #6FC3DF;
}
.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
border-left-color: #F3F3F3;
}
.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child {
border-right-color: #F3F3F3;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab {
border-left-color: #252526;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:last-child {
border-right-color: #252526;
}
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:first-child,
.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:first-child {
border-left-color: transparent;
}
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:not(:first-child) {
border-left-color: #6FC3DF;
}
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab:last-child {
border-right-color: #6FC3DF;
}
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active,
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active:hover {
outline-color: #f38518;
......
src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
浏览文件 @ 27a99843
......@@ -41,7 +41,7 @@ import { LinkedMap } from 'vs/base/common/map';
import { DelegatingWorkbenchEditorService } from 'vs/workbench/services/editor/browser/editorService';
import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { INACTIVE_TAB_BACKGROUND, ACTIVE_TAB_BACKGROUND, ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND } from 'vs/workbench/common/theme';
import { INACTIVE_TAB_BACKGROUND, ACTIVE_TAB_BACKGROUND, ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND, TAB_BORDER } from 'vs/workbench/common/theme';
interface IEditorInputLabel {
editor: IEditorInput;
......@@ -250,6 +250,8 @@ export class TabsTitleControl extends TitleControl {
// Container
tabContainer.setAttribute('aria-label', `${name}, tab`);
tabContainer.title = title;
tabContainer.style.borderLeftColor = (index !== 0) ? this.getColor(TAB_BORDER) : null;
tabContainer.style.borderRightColor = (index === editorsOfGroup.length - 1) ? this.getColor(TAB_BORDER) : null;
const tabOptions = this.editorGroupService.getTabOptions();
['off', 'left'].forEach(option => {
const domAction = tabOptions.tabCloseButton === option ? DOM.addClass : DOM.removeClass;
......
src/vs/workbench/common/theme.ts
浏览文件 @ 27a99843
......@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import nls = require('vs/nls');
import { registerColor, editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { registerColor, editorBackground, highContrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { Color, RGBA } from 'vs/base/common/color';
......@@ -59,6 +59,22 @@ export const INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND = registerColor('inactiveTab
hc: Color.white
}, nls.localize('inactiveTabInactiveGroupForeground', "Inactive tab foreground color in an inactive group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups."));
export const TAB_BORDER = registerColor('tabBorder', {
dark: '#252526',
light: '#F3F3F3',
hc: highContrastBorder
}, nls.localize('tabBorder', "Border to separate tabs from each other. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups."));
// < --- Editors --- >
export const EDITOR_GROUP_BORDER_COLOR = registerColor('editorGroupBorder', {
dark: '#444444',
light: '#E7E7E7',
hc: highContrastBorder
}, nls.localize('editorGroupBorder', "Color to separate multiple editor groups from each other. Editor groups are the containers of editors."));
// < --- Panels --- >
......@@ -72,7 +88,7 @@ export const PANEL_BACKGROUND = registerColor('panelBackground', {
export const PANEL_BORDER_TOP_COLOR = registerColor('panelBorderTopColor', {
dark: Color.fromRGBA(new RGBA(128, 128, 128)).transparent(0.35),
light: Color.fromRGBA(new RGBA(128, 128, 128)).transparent(0.35),
hc: '#6FC3DF'
hc: highContrastBorder
}, nls.localize('panelBorderTopColor', "Panel border color on the top separating to the editor. Panels are shown below the editor area and contain views like output and integrated terminal."));
......@@ -102,7 +118,7 @@ export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor('statusBarNoFolderB
*/
export class Themable extends Disposable {
private _toUnbind: IDisposable[];
private theme: ITheme;
private _theme: ITheme;
constructor(
protected themeService: IThemeService
......@@ -110,18 +126,22 @@ export class Themable extends Disposable {
super();
this._toUnbind = [];
this.theme = themeService.getTheme();
this._theme = themeService.getTheme();
// Hook up to theme changes
this._toUnbind.push(this.themeService.onThemeChange(theme => this.onThemeChange(theme)));
}
protected get theme(): ITheme {
return this._theme;
}
protected get toUnbind() {
return this._toUnbind;
}
protected onThemeChange(theme: ITheme): void {
this.theme = theme;
this._theme = theme;
this.updateStyles(theme);
}
......@@ -131,7 +151,9 @@ export class Themable extends Disposable {
}
protected getColor(id: string): string {
return this.theme.getColor(id).toString();
const color = this._theme.getColor(id);
return color ? color.toString() : null;
}
public dispose(): void {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或