mirror of
https://github.com/microsoft/vscode.git
synced 2026-05-27 02:37:26 +01:00
adopt css var in lieu of registerThemingParticipant (#165561)
* panel and auxiliar bar part css refs #165169 * unused imports
This commit is contained in:
SteVen Batten
GitHub
@@ -12,12 +12,12 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { INotificationService } from 'vs/platform/notification/common/notification';
|
||||
import { IStorageService } from 'vs/platform/storage/common/storage';
|
||||
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
|
||||
import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IThemeService } from 'vs/platform/theme/common/themeService';
|
||||
import { Extensions as PaneCompositeExtensions } from 'vs/workbench/browser/panecomposite';
|
||||
import { BasePanelPart } from 'vs/workbench/browser/parts/panel/panelPart';
|
||||
import { ActiveAuxiliaryContext, AuxiliaryBarFocusContext } from 'vs/workbench/common/contextkeys';
|
||||
import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND, SIDE_BAR_TITLE_FOREGROUND } from 'vs/workbench/common/theme';
|
||||
import { SIDE_BAR_BACKGROUND, SIDE_BAR_BORDER, SIDE_BAR_FOREGROUND } from 'vs/workbench/common/theme';
|
||||
import { IViewDescriptorService, ViewContainerLocation } from 'vs/workbench/common/views';
|
||||
import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
|
||||
import { IWorkbenchLayoutService, Parts, Position } from 'vs/workbench/services/layout/browser/layoutService';
|
||||
@@ -126,63 +126,3 @@ export class AuxiliaryBarPart extends BasePanelPart {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
registerThemingParticipant((theme, collector) => {
|
||||
|
||||
// Auxiliary Bar Background: since panels can host editors, we apply a background rule if the panel background
|
||||
// color is different from the editor background color. This is a bit of a hack though. The better way
|
||||
// would be to have a way to push the background color onto each editor widget itself somehow.
|
||||
const auxiliaryBarBackground = theme.getColor(SIDE_BAR_BACKGROUND);
|
||||
if (auxiliaryBarBackground && auxiliaryBarBackground !== theme.getColor(editorBackground)) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor,
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin,
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
|
||||
background-color: ${auxiliaryBarBackground};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Title Active
|
||||
const titleActive = theme.getColor(SIDE_BAR_TITLE_FOREGROUND);
|
||||
if (titleActive) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
color: ${titleActive} !important;
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
|
||||
color: ${titleActive} !important;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Styling with Outline color (e.g. high contrast theme)
|
||||
const outline = theme.getColor(activeContrastBorder);
|
||||
if (outline) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline-color: ${outline};
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
border-bottom: none;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline-style: dashed;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
|
||||
// if (inputBorder) {
|
||||
// collector.addRule(`
|
||||
// .monaco-workbench .part.auxiliarybar .monaco-inputbox {
|
||||
// border-color: ${inputBorder}
|
||||
// }
|
||||
// `);
|
||||
// }
|
||||
});
|
||||
|
||||
@@ -7,3 +7,23 @@
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor,
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .margin,
|
||||
.monaco-workbench .part.auxiliarybar > .content .monaco-editor .monaco-editor-background {
|
||||
background-color: var(--vscode-sideBar-background) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label,
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
|
||||
color: var(--vscode-sideBarTitle-foreground) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.auxiliarybar > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
|
||||
}
|
||||
|
||||
@@ -34,3 +34,42 @@
|
||||
.monaco-workbench.noeditorarea .part.panel.left {
|
||||
border-right-width: 0; /* no border when editor area is hiden */
|
||||
}
|
||||
|
||||
.monaco-workbench .part.panel > .content .monaco-editor,
|
||||
.monaco-workbench .part.panel > .content .monaco-editor .margin,
|
||||
.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
|
||||
background-color: var(--vscode-panel-background) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label,
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
color: var(--vscode-panelTitle-activeForeground) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.panel .monaco-inputbox {
|
||||
border-color: var(--vscode-panelInput-border) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
|
||||
border-top-color: var(--vscode-focusBorder) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
|
||||
border-top-color: var(--vscode-panelTitle-activeBorder) !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -19,9 +19,9 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
|
||||
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { PanelActivityAction, TogglePanelAction, PlaceHolderPanelActivityAction, PlaceHolderToggleCompositePinnedAction, PositionPanelActionConfigs, SetPanelPositionAction } from 'vs/workbench/browser/parts/panel/panelActions';
|
||||
import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
|
||||
import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_INPUT_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme';
|
||||
import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
|
||||
import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, PANEL_DRAG_AND_DROP_BORDER } from 'vs/workbench/common/theme';
|
||||
import { contrastBorder, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { CompositeBar, ICompositeBarItem, CompositeDragAndDrop } from 'vs/workbench/browser/parts/compositeBar';
|
||||
import { IActivityHoverOptions, ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositeBarActions';
|
||||
import { IBadge } from 'vs/workbench/services/activity/common/activity';
|
||||
@@ -1008,90 +1008,3 @@ export class PanelPart extends BasePanelPart {
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
registerThemingParticipant((theme, collector) => {
|
||||
|
||||
// Panel Background: since panels can host editors, we apply a background rule if the panel background
|
||||
// color is different from the editor background color. This is a bit of a hack though. The better way
|
||||
// would be to have a way to push the background color onto each editor widget itself somehow.
|
||||
const panelBackground = theme.getColor(PANEL_BACKGROUND);
|
||||
if (panelBackground && panelBackground !== theme.getColor(editorBackground)) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .content .monaco-editor,
|
||||
.monaco-workbench .part.panel > .content .monaco-editor .margin,
|
||||
.monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background {
|
||||
background-color: ${panelBackground};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Title Active
|
||||
const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
|
||||
if (titleActive) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
color: ${titleActive} !important;
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .action-label {
|
||||
color: ${titleActive} !important;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const inputBorder = theme.getColor(PANEL_INPUT_BORDER);
|
||||
if (inputBorder) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel .monaco-inputbox {
|
||||
border-color: ${inputBorder}
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
|
||||
// Base Panel Styles
|
||||
// Title focus
|
||||
const focusBorderColor = theme.getColor(focusBorder);
|
||||
if (focusBorderColor) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus .active-item-indicator:before {
|
||||
border-top-color: ${focusBorderColor};
|
||||
}
|
||||
`);
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item:focus {
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
|
||||
if (titleActiveBorder) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked:not(:focus) .active-item-indicator:before,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked.clicked:focus .active-item-indicator:before {
|
||||
border-top-color: ${titleActiveBorder};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Styling with Outline color (e.g. high contrast theme)
|
||||
const outline = theme.getColor(activeContrastBorder);
|
||||
if (outline) {
|
||||
collector.addRule(`
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item.checked .action-label,
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:hover .action-label {
|
||||
outline-color: ${outline};
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
border-bottom: none;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.monaco-workbench .part.basepanel > .title > .panel-switcher-container > .monaco-action-bar .action-item:not(.checked):hover .action-label {
|
||||
outline-style: dashed;
|
||||
}
|
||||
`);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user