Skip to content

Commit

Permalink
apply editor Groups & tabs vscode colors
Browse files Browse the repository at this point in the history 
Signed-off-by: Anton Kosyakov <[email protected]>
  • Loading branch information
@akosyakov
akosyakov committed Dec 11, 2019
1 parent a62de0c commit 7ae7e42
Show file tree
Hide file tree
Showing 8 changed files with 292 additions and 37 deletions.
9 changes: 8 additions & 1 deletion packages/core/src/browser/color-registry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { Emitter } from '../common/event';
/**
* Either be a reference to an existing color or a color value as a hex string, rgba, or hsla.
*/
export type Color = string | RGBA | HSLA;
export type Color = string | RGBA | HSLA | TransparentColor;
export namespace Color {
export function rgba(r: number, g: number, b: number, a: number = 1): Color {
return { r, g, b, a };
Expand All @@ -31,6 +31,13 @@ export namespace Color {
}
export const white = rgba(255, 255, 255, 1);
export const black = rgba(0, 0, 0, 1);
export function transparent(v: string, f: number): TransparentColor {
return { v, f };
}
}
export interface TransparentColor {
v: string
f: number
}
export interface RGBA {
/**
Expand Down
188 changes: 183 additions & 5 deletions packages/core/src/browser/common-frontend-contribution.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import { environment } from '@theia/application-package/lib/environment';
import { IconThemeService } from './icon-theme-service';
import { ColorContribution } from './color-application-contribution';
import { ColorRegistry, Color } from './color-registry';
import { CorePreferences } from './core-preferences';

export namespace CommonMenus {

Expand Down Expand Up @@ -253,6 +254,9 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
@inject(QuickOpenService)
protected readonly quickOpenService: QuickOpenService;

@inject(CorePreferences)
protected readonly preferences: CorePreferences;

@postConstruct()
protected init(): void {
this.contextKeyService.createKey<boolean>('isLinux', OS.type() === OS.Type.Linux);
Expand All @@ -261,6 +265,16 @@ export class CommonFrontendContribution implements FrontendApplicationContributi

this.initResourceContextKeys();
this.registerCtrlWHandling();

this.updateStyles();
this.preferences.onPreferenceChanged(() => this.updateStyles());
}

protected updateStyles(): void {
document.body.classList.remove('theia-editor-highlightModifiedTabs');
if (this.preferences['workbench.editor.highlightModifiedTabs']) {
document.body.classList.add('theia-editor-highlightModifiedTabs');
}
}

onStart(): void {
Expand Down Expand Up @@ -769,6 +783,170 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
{ id: 'list.hoverForeground', description: 'List/Tree foreground when hovering over items using the mouse.' },
{ id: 'list.filterMatchBackground', defaults: { dark: 'editor.findMatchHighlightBackground', light: 'editor.findMatchHighlightBackground' }, description: 'Background color of the filtered match.' },

// Edito Group & Tabs colors should be aligned with https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
{
id: 'editorGroup.border',
defaults: {
dark: '#444444',
light: '#E7E7E7',
hc: 'contrastBorder'
},
description: 'Color to separate multiple editor groups from each other. Editor groups are the containers of editors.'
},
{
id: 'editorGroup.dropBackground',
defaults: {
dark: Color.transparent('#53595D', 0.5),
light: Color.transparent('#2677CB', 0.18)
},
description: 'Background color when dragging editors around. The color should have transparency so that the editor contents can still shine through.'
},
{
id: 'editorGroupHeader.tabsBackground',
defaults: {
dark: '#252526',
light: '#F3F3F3'
},
description: 'Background color of the editor group title header when tabs are enabled. Editor groups are the containers of editors.'
},
{
id: 'editorGroupHeader.tabsBorder',
defaults: {
hc: 'contrastBorder'
},
description: 'Border color of the editor group title header when tabs are enabled. Editor groups are the containers of editors.'
},
{
id: 'tab.activeBackground',
defaults: {
dark: 'editor.background',
light: 'editor.background',
hc: 'editor.background'
},
description: 'Active tab background color. 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.'
},
{
id: 'tab.unfocusedActiveBackground',
defaults: {
dark: 'tab.activeBackground',
light: 'tab.activeBackground',
hc: 'tab.activeBackground'
},
description: 'Active tab background color in an unfocused 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.'
},
{
id: 'tab.inactiveBackground',
defaults: {
dark: '#2D2D2D',
light: '#ECECEC'
},
description: 'Inactive tab background color. 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.'
},
{
id: 'tab.activeForeground',
defaults: {
dark: Color.white,
light: '#333333',
hc: Color.white
}, description: 'Active tab foreground color in an active 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.'
},
{
id: 'tab.inactiveForeground', defaults: {
dark: Color.transparent('tab.activeForeground', 0.5),
light: Color.transparent('tab.activeForeground', 0.7),
hc: Color.white
}, description: 'Inactive tab foreground color in an active 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.'
},
{
id: 'tab.unfocusedActiveForeground', defaults: {
dark: Color.transparent('tab.activeForeground', 0.5),
light: Color.transparent('tab.activeForeground', 0.7),
hc: Color.white
}, description: 'Active tab foreground color in an unfocused 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.'
},
{
id: 'tab.unfocusedInactiveForeground', defaults: {
dark: Color.transparent('tab.inactiveForeground', 0.5),
light: Color.transparent('tab.inactiveForeground', 0.5),
hc: Color.white
}, description: 'Inactive tab foreground color in an unfocused 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.'
},
{
id: 'tab.border', defaults: {
dark: '#252526',
light: '#F3F3F3',
hc: 'contrastBorder'
}, description: '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.'
},
{
id: 'tab.activeBorder',
description: 'Border on the bottom of an active tab. 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.'
},
{
id: 'tab.unfocusedActiveBorder', defaults: {
dark: Color.transparent('tab.activeBorder', 0.5),
light: Color.transparent('tab.activeBorder', 0.7)
}, description: 'Border on the bottom of an active tab in an unfocused 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.'
},
{
id: 'tab.activeBorderTop', defaults: {
dark: 'focusBorder',
light: 'focusBorder'
},
description: 'Border to the top of an active tab. 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.'
},
{
id: 'tab.unfocusedActiveBorderTop', defaults: {
dark: Color.transparent('tab.activeBorderTop', 0.5),
light: Color.transparent('tab.activeBorderTop', 0.7)
}, description: 'Border to the top of an active tab in an unfocused 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.'
},
{
id: 'tab.hoverBackground',
description: 'Tab background color when hovering. 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.'
}, {
id: 'tab.unfocusedHoverBackground', defaults: {
dark: Color.transparent('tab.hoverBackground', 0.5),
light: Color.transparent('tab.hoverBackground', 0.7)
}, description: 'Tab background color in an unfocused group when hovering. 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.'
},
{
id: 'tab.hoverBorder',
description: 'Border to highlight tabs when hovering. 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.'
}, {
id: 'tab.unfocusedHoverBorder', defaults: {
dark: Color.transparent('tab.hoverBorder', 0.5),
light: Color.transparent('tab.hoverBorder', 0.7)
}, description: 'Border to highlight tabs in an unfocused group when hovering. 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.'
},
{
id: 'tab.activeModifiedBorder', defaults: {
dark: '#3399CC',
light: '#33AAEE'
}, description: 'Border on the top of modified (dirty) active tabs in an active 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.'
},
{
id: 'tab.inactiveModifiedBorder', defaults: {
dark: Color.transparent('tab.activeModifiedBorder', 0.5),
light: Color.transparent('tab.activeModifiedBorder', 0.5),
hc: Color.white
}, description: 'Border on the top of modified (dirty) inactive tabs in an active 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.'
},
{
id: 'tab.unfocusedActiveModifiedBorder', defaults: {
dark: Color.transparent('tab.activeModifiedBorder', 0.5),
light: Color.transparent('tab.activeModifiedBorder', 0.7),
hc: Color.white
}, description: 'Border on the top of modified (dirty) active tabs in an unfocused 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.'
},
{
id: 'tab.unfocusedInactiveModifiedBorder', defaults: {
dark: Color.transparent('tab.inactiveModifiedBorder', 0.5),
light: Color.transparent('tab.inactiveModifiedBorder', 0.5),
hc: Color.white
}, description: 'Border on the top of modified (dirty) inactive tabs in an unfocused 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.'
},

// Panel colors should be aligned with https://code.visualstudio.com/api/references/theme-color#panel-colors
{
id: 'panel.background', defaults: {
Expand All @@ -777,12 +955,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
},
{
id: 'panel.border', defaults: {
dark: Color.rgba(128, 128, 128, 0.35), light: Color.rgba(128, 128, 128, 0.35), hc: 'contrastBorder'
dark: Color.transparent('#808080', 0.35), light: Color.transparent('#808080', 0.35), hc: 'contrastBorder'
}, description: 'Panel border color to separate the panel from the editor. Panels are shown below the editor area and contain views like output and integrated terminal.'
},
{
id: 'panel.dropBackground', defaults: {
dark: Color.rgba(255, 255, 255, 0.12), light: Color.rgba(38, 119, 203, 0.18), hc: Color.rgba(255, 255, 255, 0.12)
dark: Color.rgba(255, 255, 255, 0.12), light: Color.transparent('#2677CB', 0.18), hc: Color.rgba(255, 255, 255, 0.12)
}, description: 'Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal.'
},
{
Expand All @@ -792,12 +970,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
},
{
id: 'panelTitle.inactiveForeground', defaults: {
dark: Color.rgba(231, 231, 231, 0.6), light: Color.rgba(66, 66, 66, 0.75), hc: Color.white
dark: Color.transparent('panelTitle.activeForeground', 0.6), light: Color.transparent('panelTitle.activeForeground', 0.75), hc: Color.white
}, description: 'Title color for the inactive panel. Panels are shown below the editor area and contain views like output and integrated terminal.'
},
{
id: 'panelTitle.activeBorder', defaults: {
dark: Color.rgba(231, 231, 231, 0.6), light: Color.rgba(66, 66, 66, 0.75), hc: 'contrastBorder'
dark: 'panelTitle.activeForeground', light: 'panelTitle.activeForeground', hc: 'contrastBorder'
}, description: 'Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal.'
},
{
Expand All @@ -806,7 +984,7 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
},
{
id: 'imagePreview.border', defaults: {
dark: Color.rgba(128, 128, 128, 0.35), light: Color.rgba(128, 128, 128, 0.35), hc: 'contrastBorder'
dark: Color.transparent('#808080', 0.35), light: Color.transparent('#808080', 0.35), hc: 'contrastBorder'
}, description: 'Border color for image in image preview.'
},

Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/browser/core-preferences.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ export const corePreferenceSchema: PreferenceSchema = {
default: 'singleClick',
description: 'Controls how to open items in trees using the mouse.'
},
'workbench.editor.highlightModifiedTabs': {
'type': 'boolean',
'description': 'Controls whether a top border is drawn on modified (dirty) editor tabs or not.',
'default': false
},
'application.confirmExit': {
type: 'string',
enum: [
Expand All @@ -52,6 +57,7 @@ export interface CoreConfiguration {
'application.confirmExit': 'never' | 'ifRequired' | 'always';
'workbench.list.openMode': 'singleClick' | 'doubleClick';
'workbench.commandPalette.history': number;
'workbench.editor.highlightModifiedTabs': boolean
}

export const CorePreferences = Symbol('CorePreferences');
Expand Down
9 changes: 1 addition & 8 deletions packages/core/src/browser/style/dockpanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,14 @@

.p-DockPanel-handle[data-orientation='vertical'] {
min-height: var(--theia-border-width);
border-top: var(--theia-border-width) solid var(--theia-border-color1);
}

.p-DockPanel-handle[data-orientation='horizontal'] {
min-width: var(--theia-border-width);
border-left: var(--theia-border-width) solid var(--theia-border-color1);
}

.p-DockPanel-handle[data-orientation='horizontal']:after {
background-color: var(--theia-layout-color0);
border-left: var(--theia-border-width) solid var(--theia-border-color1);
}

.p-DockPanel-overlay {
background: rgba(33, 150, 243, 0.1);
background: var(--theia-editorGroup-dropBackground);
border: var(--theia-border-width) dashed var(--theia-brand-color1);
transition-property: top, left, right, bottom;
transition-duration: 150ms;
Expand Down
8 changes: 1 addition & 7 deletions packages/core/src/browser/style/sidepanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,6 @@
border-color: var(--theia-panelInput-border);
}

#theia-bottom-content-panel .p-DockPanel-handle,
#theia-bottom-content-panel .p-DockPanel-handle::after {
background: none;
border: none;
}

#theia-bottom-content-panel .p-DockPanel-handle[data-orientation='horizontal'] {
border-left: var(--theia-border-width) solid var(--theia-panel-border);
}
Expand All @@ -227,7 +221,7 @@
}

#theia-bottom-content-panel .p-TabBar-tab.p-mod-current.theia-mod-active {
border-top-color: var(--theia-accent-color2);
border-top-color: var(--theia-focusBorder);
}

/*-----------------------------------------------------------------------------
Expand Down
Loading

0 comments on commit 7ae7e42

Please sign in to comment.