From 2f914692bb546f604156133e1e2b5e163298b903 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Mon, 11 Dec 2017 12:32:51 +0100 Subject: [PATCH] Enhance tab (hover) styling (fixes #30901) --- .../browser/parts/editor/tabsTitleControl.ts | 44 ++++++++++++++++++- src/vs/workbench/common/theme.ts | 24 ++++++++++ 2 files changed, 66 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 157d3cdb771..343b62a71a9 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -40,7 +40,7 @@ import { extractResources } from 'vs/workbench/browser/editor'; import { getOrSet } from 'vs/base/common/map'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; 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 } 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 } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { IFileService } from 'vs/platform/files/common/files'; import { IWorkspacesService } from 'vs/platform/workspaces/common/workspaces'; @@ -281,7 +281,9 @@ export class TabsTitleControl extends TitleControl { const isGroupActive = this.stacks.isActive(group); if (isGroupActive) { DOM.addClass(this.titleContainer, 'active'); + DOM.removeClass(this.titleContainer, 'inactive'); } else { + DOM.addClass(this.titleContainer, 'inactive'); DOM.removeClass(this.titleContainer, 'active'); } @@ -958,4 +960,42 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { } `); } -}); \ No newline at end of file + + // Hover Background + const tabHoverBackground = theme.getColor(TAB_HOVER_BACKGROUND); + if (tabHoverBackground) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab:hover { + background: ${tabHoverBackground} !important; + } + `); + } + + const tabUnfocusedHoverBackground = theme.getColor(TAB_UNFOCUSED_HOVER_BACKGROUND); + if (tabUnfocusedHoverBackground) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.inactive .tabs-container > .tab:hover { + background: ${tabUnfocusedHoverBackground} !important; + } + `); + } + + // Hover Border + const tabHoverBorder = theme.getColor(TAB_HOVER_BORDER); + if (tabHoverBorder) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab:hover { + box-shadow: ${tabHoverBorder} 0 -1px inset !important; + } + `); + } + + const tabUnfocusedHoverBorder = theme.getColor(TAB_UNFOCUSED_HOVER_BORDER); + if (tabUnfocusedHoverBorder) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.inactive .tabs-container > .tab:hover { + box-shadow: ${tabUnfocusedHoverBorder} 0 -1px inset !important; + } + `); + } +}); diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 77887fd950d..5ea4917d224 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -23,6 +23,18 @@ export const TAB_INACTIVE_BACKGROUND = registerColor('tab.inactiveBackground', { hc: null }, nls.localize('tabInactiveBackground', "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.")); +export const TAB_HOVER_BACKGROUND = registerColor('tab.hoverBackground', { + dark: null, + light: null, + hc: null +}, nls.localize('tabHoverBackground', "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.")); + +export const TAB_UNFOCUSED_HOVER_BACKGROUND = registerColor('tab.unfocusedHoverBackground', { + dark: transparent(TAB_HOVER_BACKGROUND, 0.5), + light: transparent(TAB_HOVER_BACKGROUND, 0.7), + hc: null +}, nls.localize('tabUnfocusedHoverBackground', "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.")); + export const TAB_BORDER = registerColor('tab.border', { dark: '#252526', light: '#F3F3F3', @@ -41,6 +53,18 @@ export const TAB_UNFOCUSED_ACTIVE_BORDER = registerColor('tab.unfocusedActiveBor hc: null }, nls.localize('tabActiveUnfocusedBorder', "Border to highlight 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.")); +export const TAB_HOVER_BORDER = registerColor('tab.hoverBorder', { + dark: null, + light: null, + hc: null +}, nls.localize('tabHoverBorder', "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.")); + +export const TAB_UNFOCUSED_HOVER_BORDER = registerColor('tab.unfocusedHoverBorder', { + dark: transparent(TAB_HOVER_BORDER, 0.5), + light: transparent(TAB_HOVER_BORDER, 0.7), + hc: null +}, nls.localize('tabUnfocusedHoverBorder', "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.")); + export const TAB_ACTIVE_FOREGROUND = registerColor('tab.activeForeground', { dark: Color.white, light: '#333333', -- GitLab