From 5f76da4901025574aca594b049dcfee93e25ef6d Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Mon, 20 Mar 2017 07:07:33 -0700 Subject: [PATCH] theming - status bar items --- .../parts/editor/editorGroupsControl.ts | 9 ++--- .../parts/statusbar/media/statusbarpart.css | 30 ---------------- .../browser/parts/statusbar/statusbarPart.ts | 34 +++++++++++++++++-- src/vs/workbench/common/theme.ts | 24 +++++++++++++ 4 files changed, 60 insertions(+), 37 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index e043102d6ef..0046c31e1dd 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1145,14 +1145,15 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro const containers = $this.visibleEditors.filter(e => !!e).map(e => e.getContainer()); containers.forEach((container, index) => { if (container && DOM.isAncestor(target, container.getHTMLElement())) { + const useOutline = $this.isHighContrastTheme; overlay = $('div').style({ top: $this.tabOptions.showTabs ? `${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : 0, height: $this.tabOptions.showTabs ? `calc(100% - ${EditorGroupsControl.EDITOR_TITLE_HEIGHT}px` : '100%', backgroundColor: $this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND), - outlineColor: $this.isHighContrastTheme ? $this.getColor(highContrastOutline) : null, - outlineOffset: $this.isHighContrastTheme ? '-2px' : null, - outlineStyle: $this.isHighContrastTheme ? 'dashed' : null, - outlineWidth: $this.isHighContrastTheme ? '2px' : null + outlineColor: useOutline ? $this.getColor(highContrastOutline) : null, + outlineOffset: useOutline ? '-2px' : null, + outlineStyle: useOutline ? 'dashed' : null, + outlineWidth: useOutline ? '2px' : null }).id(overlayId); overlay.appendTo(container); diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css index 00db1ce1357..77ace7d3011 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css @@ -55,34 +55,4 @@ .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { text-decoration: none; -} - -/* TODO@theme */ - -.hc-black .monaco-workbench > .part.statusbar { - border-top-width: 1px; - border-top-style: solid; - border-top-color: #6FC3DF; -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled), -.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { - background-color: rgba(255, 255, 255, 0.12); -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled), -.hc-black .monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) { - background-color: rgba(255, 255, 255, 0.18); -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info, -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { - background-color: #388a34; -} - -.vs .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled), -.vs-dark .monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) { - background-color: #369432; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index baa5c6c3122..45ec34d8fbe 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -26,9 +26,10 @@ import { IStatusbarService, IStatusbarEntry } from 'vs/platform/statusbar/common import { getCodeEditor } from 'vs/editor/common/services/codeEditorService'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { Action } from 'vs/base/common/actions'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND } from 'vs/workbench/common/theme'; +import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_INFO_ITEM_BACKGROUND, STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_ITEM_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme'; import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; +import { highContrastBorder } from 'vs/platform/theme/common/colorRegistry'; export class StatusbarPart extends Part implements IStatusbarService { @@ -135,6 +136,11 @@ export class StatusbarPart extends Part implements IStatusbarService { container.style('color', this.getColor(STATUS_BAR_FOREGROUND)); container.style('background-color', this.getColor(this.contextService.hasWorkspace() ? STATUS_BAR_BACKGROUND : STATUS_BAR_NO_FOLDER_BACKGROUND)); + + const useBorder = this.isHighContrastTheme; + container.style('border-top-width', useBorder ? '1px' : null); + container.style('border-top-style', useBorder ? 'solid' : null); + container.style('border-top-color', useBorder ? this.getColor(highContrastBorder) : null); } private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0): HTMLElement { @@ -309,4 +315,26 @@ class ManageExtensionAction extends Action { public run(extensionId: string): TPromise { return this.commandService.executeCommand('_extensions.manage', extensionId); } -} \ No newline at end of file +} + +registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { + const statusBarItemHoverBackground = theme.getColor(STATUS_BAR_ITEM_HOVER_BACKGROUND); + if (statusBarItemHoverBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled) { background-color: ${statusBarItemHoverBackground}; }`); + } + + const statusBarItemActiveBackground = theme.getColor(STATUS_BAR_ITEM_ACTIVE_BACKGROUND); + if (statusBarItemActiveBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a:active:not([disabled]):not(.disabled) { background-color: ${statusBarItemActiveBackground}; }`); + } + + const statusBarInfoItemBackground = theme.getColor(STATUS_BAR_INFO_ITEM_BACKGROUND); + if (statusBarInfoItemBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item .status-bar-info { background-color: ${statusBarInfoItemBackground}; }`); + } + + const statusBarInfoItemHoverBackground = theme.getColor(STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND); + if (statusBarInfoItemHoverBackground) { + collector.addRule(`.monaco-workbench > .part.statusbar > .statusbar-item a.status-bar-info:hover:not([disabled]):not(.disabled) { background-color: ${statusBarInfoItemHoverBackground}; }`); + } +}); \ No newline at end of file diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index f005f179770..ac5d16b8d06 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -124,6 +124,30 @@ export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor('statusBarNoFolderB hc: null }, nls.localize('statusBarNoFolderBackground', "Status bar background color when no folder is opened. The status bar is shown in the bottom of the window")); +export const STATUS_BAR_ITEM_ACTIVE_BACKGROUND = registerColor('statusBarItemActiveBackground', { + dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18), + light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18), + hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.18) +}, nls.localize('statusBarItemActiveBackground', "Status bar item background color when clicking. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_ITEM_HOVER_BACKGROUND = registerColor('statusBarItemHoverBackground', { + dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12), + light: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12), + hc: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.12) +}, nls.localize('statusBarItemHoverBackground', "Status bar item background color when hovering. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_INFO_ITEM_BACKGROUND = registerColor('statusBarInfoItemBackground', { + dark: '#388a34', + light: '#388a34', + hc: '#388a34' +}, nls.localize('statusBarInfoItemBackground', "Status bar info item background color. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_INFO_ITEM_HOVER_BACKGROUND = registerColor('statusBarInfoItemHoverBackground', { + dark: '#369432', + light: '#369432', + hc: '#369432' +}, nls.localize('statusBarInfoItemHoverBackground', "Status bar info item background color when hovering. The status bar is shown in the bottom of the window")); + /** * Base class for all themable workbench components. */ -- GitLab