mirror of
https://github.com/Microsoft/vscode
synced 2024-08-25 03:56:03 +00:00
parent
b5f97ae0e1
commit
de571f4bbc
|
@ -106,6 +106,38 @@
|
|||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* Tab Background Color in/active group/tab */
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
|
||||
background-color: var(--vscode-tab-unfocusedInactiveBackground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
|
||||
background-color: var(--vscode-tab-inactiveBackground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
|
||||
background-color: var(--vscode-tab-unfocusedActiveBackground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
|
||||
background-color: var(--vscode-tab-activeBackground);
|
||||
}
|
||||
|
||||
/* Tab Foreground Color in/active group/tab */
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
|
||||
color: var(--vscode-tab-unfocusedInactiveForeground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab {
|
||||
color: var(--vscode-tab-inactiveForeground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
|
||||
color: var(--vscode-tab-unfocusedActiveForeground);
|
||||
}
|
||||
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active {
|
||||
color: var(--vscode-tab-activeForeground);
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
|
||||
margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */
|
||||
}
|
||||
|
|
|
@ -26,7 +26,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 } 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_BACKGROUND, 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, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_LAST_PINNED_BORDER } from 'vs/workbench/common/theme';
|
||||
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, 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, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_LAST_PINNED_BORDER } from 'vs/workbench/common/theme';
|
||||
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { ResourcesDropHandler, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, extractTreeDropData, isWindowDraggedOver } from 'vs/workbench/browser/dnd';
|
||||
import { Color } from 'vs/base/common/color';
|
||||
|
@ -1504,55 +1504,23 @@ export class MultiEditorTabsControl extends EditorTabsControl {
|
|||
|
||||
private doRedrawTabActive(isGroupActive: boolean, allowBorderTop: boolean, editor: EditorInput, tabContainer: HTMLElement, tabActionBar: ActionBar): void {
|
||||
|
||||
// Tab is active
|
||||
if (this.tabsModel.isActive(editor)) {
|
||||
const isActive = this.tabsModel.isActive(editor);
|
||||
|
||||
// Container
|
||||
tabContainer.classList.add('active');
|
||||
tabContainer.setAttribute('aria-selected', 'true');
|
||||
tabContainer.tabIndex = 0; // Only active tab can be focused into
|
||||
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_ACTIVE_BACKGROUND : TAB_UNFOCUSED_ACTIVE_BACKGROUND) || '';
|
||||
tabContainer.classList.toggle('active', isActive);
|
||||
tabContainer.setAttribute('aria-selected', isActive ? 'true' : 'false');
|
||||
tabContainer.tabIndex = isActive ? 0 : -1; // Only active tab can be focused into
|
||||
tabActionBar.setFocusable(isActive);
|
||||
|
||||
if (isActive) {
|
||||
// Set border BOTTOM if theme defined color
|
||||
const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
|
||||
if (activeTabBorderColorBottom) {
|
||||
tabContainer.classList.add('tab-border-bottom');
|
||||
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom.toString());
|
||||
} else {
|
||||
tabContainer.classList.remove('tab-border-bottom');
|
||||
tabContainer.style.removeProperty('--tab-border-bottom-color');
|
||||
}
|
||||
tabContainer.classList.toggle('tab-border-bottom', !!activeTabBorderColorBottom);
|
||||
tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom?.toString() ?? '');
|
||||
|
||||
// Set border TOP if theme defined color
|
||||
const activeTabBorderColorTop = allowBorderTop ? this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP) : undefined;
|
||||
if (activeTabBorderColorTop) {
|
||||
tabContainer.classList.add('tab-border-top');
|
||||
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop.toString());
|
||||
} else {
|
||||
tabContainer.classList.remove('tab-border-top');
|
||||
tabContainer.style.removeProperty('--tab-border-top-color');
|
||||
}
|
||||
|
||||
// Label
|
||||
tabContainer.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';
|
||||
|
||||
// Actions
|
||||
tabActionBar.setFocusable(true);
|
||||
}
|
||||
|
||||
// Tab is inactive
|
||||
else {
|
||||
|
||||
// Container
|
||||
tabContainer.classList.remove('active');
|
||||
tabContainer.setAttribute('aria-selected', 'false');
|
||||
tabContainer.tabIndex = -1; // Only active tab can be focused into
|
||||
tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
|
||||
tabContainer.style.boxShadow = '';
|
||||
|
||||
// Label
|
||||
tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
|
||||
|
||||
// Actions
|
||||
tabActionBar.setFocusable(false);
|
||||
tabContainer.classList.toggle('tab-border-top', !!activeTabBorderColorTop);
|
||||
tabContainer.style.setProperty('--tab-border-top-color', activeTabBorderColorTop?.toString() ?? '');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue