maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

grid - retire editorGroup.background and add new colors for empty groups

Browse source
This commit is contained in:
Benjamin Pasero 2018-05-09 10:53:04 +02:00
parent b4b420f0f1
commit a970588eb6
12 changed files with 33 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
extensions/theme-abyss/themes/abyss-color-theme.json
View file

@ -365,7 +365,6 @@
// Workbench: Editors
// "editorGroupHeader.noTabsBackground": "",
"editorGroup.border": "#2b2b4a",
"editorGroup.background": "#1c1c2a",
"editorGroup.dropBackground": "#25375daa",
"editorGroupHeader.tabsBackground": "#1c1c2a",

1
extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json
View file

@ -19,7 +19,6 @@
"editorWidget.background": "#131510",
"editorHoverWidget.background": "#221a14",
"editorGroupHeader.tabsBackground": "#131510",
"editorGroup.background": "#0f0c08",
"editorLineNumber.activeForeground": "#adadad",
"tab.inactiveBackground": "#131510",
"titleBar.activeBackground": "#423523",

1
extensions/theme-monokai-dimmed/themes/dimmed-monokai-color-theme.json
View file

@ -21,7 +21,6 @@
"editorIndentGuide.background": "#505037",
"editorIndentGuide.activeBackground": "#707057",
"editorGroupHeader.tabsBackground": "#282828",
"editorGroup.background": "#1e1e1e",
"tab.inactiveBackground": "#404040",
"tab.border": "#303030",
"tab.inactiveForeground": "#d8d8d8",

1
extensions/theme-red/themes/Red-color-theme.json
View file

@ -15,7 +15,6 @@
// editor
"editor.background": "#390000",
"editorGroup.border": "#ff666633",
"editorGroup.background": "#1c0101",
"editorCursor.foreground": "#970000",
"editor.foreground": "#F8F8F8",
"editorWhitespace.foreground": "#c10000",

1
extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json
View file

@ -413,7 +413,6 @@
// Workbench: Editors
// "editorGroupHeader.noTabsBackground": "",
"editorGroup.border": "#00212B",
"editorGroup.background": "#011b23",
"editorGroup.dropBackground": "#2AA19844",
"editorGroupHeader.tabsBackground": "#004052",

1
extensions/theme-solarized-light/themes/solarized-light-color-theme.json
View file

@ -409,7 +409,6 @@
// Workbench: Editors
// "editorGroupHeader.noTabsBackground": "",
"editorGroup.border": "#DDD6C1",
"editorGroup.background": "#FFFBF2",
"editorGroup.dropBackground": "#DDD6C1AA",
"editorGroupHeader.tabsBackground": "#D9D2C2",

1
extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json
View file

@ -23,7 +23,6 @@
"editorHoverWidget.border": "#ffffff44",
"editorGroup.border": "#404f7d",
"editorGroupHeader.tabsBackground": "#001733",
"editorGroup.background": "#1c1c2a",
"editorGroup.dropBackground": "#25375daa",
"peekViewResult.background": "#001c40",
"tab.inactiveBackground": "#001c40",

5
src/vs/workbench/browser/parts/editor/editorGroupsControl.ts
View file

@ -30,7 +30,7 @@ import { IEditorStacksModel, IStacksModelChangeEvent, IEditorGroup, EditorOption
import { getCodeEditor } from 'vs/editor/browser/services/codeEditorService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { editorBackground, contrastBorder, activeContrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { Themable, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
import { Themable, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BORDER } from 'vs/workbench/common/theme';
import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
import { IDisposable } from 'vs/base/common/lifecycle';
import { ResourcesDropHandler, LocalSelectionTransfer, DraggedEditorIdentifier } from 'vs/workbench/browser/dnd';
@ -1660,8 +1660,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
}
private updateFromDragAndDrop(element: HTMLElement, isDraggedOver: boolean): void {
const groupCount = this.stacks.groups.length;
const background = this.getColor(isDraggedOver ? EDITOR_DRAG_AND_DROP_BACKGROUND : groupCount > 0 ? EDITOR_GROUP_BACKGROUND : null);
const background = this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
element.style.backgroundColor = background;
const activeContrastBorderColor = this.getColor(activeContrastBorder);

3
src/vs/workbench/browser/parts/editor/editorPart.ts
View file

@ -38,7 +38,6 @@ import { Event, Emitter, once } from 'vs/base/common/event';
import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { EDITOR_GROUP_BACKGROUND } from 'vs/workbench/common/theme';
import { createCSSRule, Dimension, addClass, removeClass } from 'vs/base/browser/dom';
import { IEnvironmentService } from 'vs/platform/environment/common/environment';
import { join } from 'vs/base/common/paths';
@ -1457,8 +1456,6 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService
} else {
removeClass(content, 'multiple-groups');
}
content.style.backgroundColor = groupCount > 0 ? this.getColor(EDITOR_GROUP_BACKGROUND) : null;
}
public activateGroup(group: EditorGroup): void;

23
src/vs/workbench/browser/parts/editor2/nextEditorGroupView.ts
View file

@ -18,7 +18,7 @@ import { ProgressBar } from 'vs/base/browser/ui/progressbar/progressbar';
import { attachProgressBarStyler } from 'vs/platform/theme/common/styler';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { editorBackground, contrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND } from 'vs/workbench/common/theme';
import { Themable, EDITOR_GROUP_HEADER_TABS_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_HEADER_NO_TABS_BACKGROUND, EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND, EDITOR_GROUP_EMPTY_BACKGROUND } from 'vs/workbench/common/theme';
import { IMoveEditorOptions, ICopyEditorOptions } from 'vs/workbench/services/group/common/nextEditorGroupsService';
import { NextTabsTitleControl } from 'vs/workbench/browser/parts/editor2/nextTabsTitleControl';
import { NextEditorControl } from 'vs/workbench/browser/parts/editor2/nextEditorControl';
@ -85,6 +85,7 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
private _group: EditorGroup;
private active: boolean;
private _dimension: Dimension;
private _whenRestored: Thenable<void>;
@ -173,15 +174,15 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
// Editor control
this.editorControl = this._register(this.scopedInstantiationService.createInstance(NextEditorControl, this.editorContainer, this._group.id));
// Update styles
this.updateStyles();
// Track Focus
this.doTrackFocus();
// Update containers
this.updateTitleContainer();
this.updateContainer();
// Track Focus
this.doTrackFocus();
// Update styles
this.updateStyles();
}
private doTrackFocus(): void {
@ -241,6 +242,9 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
this.element.removeAttribute('tabIndex');
this.element.removeAttribute('aria-label');
}
// Update styles
this.updateStyles();
}
private updateTitleContainer(): void {
@ -448,6 +452,7 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
}
setActive(isActive: boolean): void {
this.active = isActive;
// Update container
toggleClass(this.element, 'active', isActive);
@ -455,6 +460,9 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
// Update title control
this.titleAreaControl.setActive(isActive);
// Update styles
this.updateStyles();
}
isEmpty(): boolean {
@ -887,6 +895,11 @@ export class NextEditorGroupView extends Themable implements INextEditorGroupVie
// Container
this.element.style.outlineColor = this.getColor(focusBorder);
if (this.isEmpty()) {
this.element.style.backgroundColor = this.getColor(this.active ? EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND : EDITOR_GROUP_EMPTY_BACKGROUND);
} else {
this.element.style.backgroundColor = null;
}
// Title control
const { showTabs } = this.accessor.partOptions;

7
src/vs/workbench/browser/parts/editor2/nextTabsTitleControl.ts
View file

@ -30,7 +30,7 @@ import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElemen
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { getOrSet } from 'vs/base/common/map';
import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_GROUP_BACKGROUND, WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme';
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { ResourcesDropHandler, fillResourceDataTransfers, LocalSelectionTransfer, DraggedEditorIdentifier, DragCounter } from 'vs/workbench/browser/dnd';
import { Color } from 'vs/base/common/color';
@ -1036,13 +1036,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
if (theme.type !== 'hc') {
const workbenchBackground = WORKBENCH_BACKGROUND(theme);
const editorBackgroundColor = theme.getColor(editorBackground);
const editorGroupBackground = theme.getColor(EDITOR_GROUP_BACKGROUND);
const editorGroupHeaderTabsBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
const editorDragAndDropBackground = theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
let adjustedTabBackground: Color;
if (editorGroupHeaderTabsBackground && editorBackgroundColor && editorGroupBackground) {
adjustedTabBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorGroupBackground, editorBackgroundColor, workbenchBackground);
if (editorGroupHeaderTabsBackground && editorBackgroundColor) {
adjustedTabBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorBackgroundColor, workbenchBackground);
}
let adjustedTabDragBackground: Color;

14
src/vs/workbench/common/theme.ts
View file

@ -105,11 +105,17 @@ export const TAB_UNFOCUSED_INACTIVE_FOREGROUND = registerColor('tab.unfocusedIna
// < --- Editors --- >
export const EDITOR_GROUP_BACKGROUND = registerColor('editorGroup.background', {
dark: '#2D2D2D',
light: '#ECECEC',
export const EDITOR_GROUP_EMPTY_BACKGROUND = registerColor('editorGroup.emptyBackground', {
dark: null,
light: null,
hc: null
}, nls.localize('editorGroupBackground', "Background color of an editor group. Editor groups are the containers of editors. The background color shows up when dragging editor groups around."));
}, nls.localize('editorGroupEmptyBackground', "Background color of an empty editor group. Editor groups are the containers of editors."));
export const EDITOR_GROUP_ACTIVE_EMPTY_BACKGROUND = registerColor('editorGroup.activeEmptyBackground', {
dark: EDITOR_GROUP_EMPTY_BACKGROUND,
light: EDITOR_GROUP_EMPTY_BACKGROUND,
hc: EDITOR_GROUP_EMPTY_BACKGROUND
}, nls.localize('editorGroupActiveEmptyBackground', "Background color of an empty editor group that is active. Editor groups are the containers of editors."));
export const EDITOR_GROUP_HEADER_TABS_BACKGROUND = registerColor('editorGroupHeader.tabsBackground', {
dark: '#252526',