Add themeable indicator to active terminal tab

Fixes #127360
This commit is contained in:
Daniel Imms 2021-07-07 04:21:02 -07:00
parent c8d0707d19
commit 7667e90bf8
4 changed files with 24 additions and 2 deletions

View file

@ -244,6 +244,16 @@
padding: 4px 0 2px;
margin: auto;
}
.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-entry.is-active::before {
display: block;
position: absolute;
content: "";
left: 0;
top: 0;
bottom: 0;
width: 1px;
}
.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text > .monaco-toolbar {
padding: 4px 7px 2px;
margin: 0;

View file

@ -112,6 +112,7 @@ export class TerminalTabList extends WorkbenchList<ITerminalInstance> {
this.setSelection([i]);
this.reveal(i);
}
this.refresh();
});
this.onMouseDblClick(async e => {
@ -261,6 +262,7 @@ class TerminalTabsRenderer implements IListRenderer<ITerminalInstance, ITerminal
}
template.element.classList.toggle('has-text', hasText);
template.element.classList.toggle('is-active', this._terminalGroupService.activeInstance === instance);
let prefix: string = '';
if (group.terminalInstances.length > 1) {

View file

@ -12,7 +12,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IThemeService, IColorTheme, registerThemingParticipant, ICssStyleCollector, ThemeIcon, Themable } from 'vs/platform/theme/common/themeService';
import { switchTerminalActionViewItemSeparator, switchTerminalShowTabsTitle } from 'vs/workbench/contrib/terminal/browser/terminalActions';
import { TERMINAL_BACKGROUND_COLOR, TERMINAL_BORDER_COLOR, TERMINAL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
import { TERMINAL_BACKGROUND_COLOR, TERMINAL_BORDER_COLOR, TERMINAL_DRAG_AND_DROP_BACKGROUND, TERMINAL_TAB_ACTIVE_BORDER } from 'vs/workbench/contrib/terminal/common/terminalColorRegistry';
import { INotificationService, IPromptChoice, Severity } from 'vs/platform/notification/common/notification';
import { ITerminalGroupService, ITerminalInstance, ITerminalService, TerminalConnectionState } from 'vs/workbench/contrib/terminal/browser/terminal';
import { ViewPane, IViewPaneOptions } from 'vs/workbench/browser/parts/views/viewPane';
@ -346,6 +346,11 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
if (dndBackgroundColor) {
collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .terminal-drop-overlay { background-color: ${dndBackgroundColor.toString()}; }`);
}
const activeTabBorderColor = theme.getColor(TERMINAL_TAB_ACTIVE_BORDER);
if (activeTabBorderColor) {
collector.addRule(`.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-entry.is-active::before { background-color: ${activeTabBorderColor.toString()}; }`);
}
});

View file

@ -6,7 +6,7 @@
import * as nls from 'vs/nls';
import { registerColor, ColorIdentifier, ColorDefaults } from 'vs/platform/theme/common/colorRegistry';
import { EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_BORDER } from 'vs/workbench/common/theme';
import { EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_BORDER, TAB_ACTIVE_BORDER } from 'vs/workbench/common/theme';
/**
* The color identifiers for the terminal's ansi colors. The index in the array corresponds to the index
@ -37,6 +37,11 @@ export const TERMINAL_DRAG_AND_DROP_BACKGROUND = registerColor('terminal.dropBac
light: EDITOR_DRAG_AND_DROP_BACKGROUND,
hc: EDITOR_DRAG_AND_DROP_BACKGROUND
}, nls.localize('terminal.dragAndDropBackground', "Background color when dragging on top of terminals. The color should have transparency so that the terminal contents can still shine through."));
export const TERMINAL_TAB_ACTIVE_BORDER = registerColor('terminal.tab.activeBorder', {
dark: TAB_ACTIVE_BORDER,
light: TAB_ACTIVE_BORDER,
hc: TAB_ACTIVE_BORDER
}, nls.localize('terminal.tab.activeBorder', 'Border on the side of the terminal tab in the panel. This defaults to tab.activeBorder.'));
export const ansiColorMap: { [key: string]: { index: number, defaults: ColorDefaults } } = {
'terminal.ansiBlack': {