From c615b43be67170e166779c9020a249442c4f36fc Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Tue, 9 May 2017 07:58:17 +0200 Subject: [PATCH] theming - badge colors (fixes #25493) --- .../theme-abyss/themes/abyss-color-theme.json | 2 + .../themes/kimbie-dark-color-theme.json | 3 +- .../themes/monokai-color-theme.json | 2 + .../themes/quietlight-color-theme.json | 3 +- .../theme-red/themes/Red-color-theme.json | 3 +- .../themes/solarized-dark-color-theme.json | 2 + .../themes/solarized-light-color-theme.json | 2 + .../themes/tomorrow-night-blue-theme.json | 2 + .../base/browser/ui/countBadge/countBadge.css | 14 ----- .../base/browser/ui/countBadge/countBadge.ts | 62 ++++++++++++++++++- .../browser/referencesWidget.ts | 21 +++++-- src/vs/platform/theme/common/colorRegistry.ts | 4 ++ src/vs/platform/theme/common/styler.ts | 15 ++++- .../files/browser/media/explorerviewlet.css | 10 --- .../files/browser/views/openEditorsView.ts | 17 ++++- .../markers/browser/markersTreeViewer.ts | 11 +++- .../preferences/browser/media/preferences.css | 10 +-- .../preferences/browser/preferencesWidgets.ts | 14 ++++- .../parts/scm/electron-browser/scmViewlet.ts | 18 ++++-- .../parts/search/browser/searchResultsView.ts | 13 +++- 20 files changed, 173 insertions(+), 55 deletions(-) diff --git a/extensions/theme-abyss/themes/abyss-color-theme.json b/extensions/theme-abyss/themes/abyss-color-theme.json index aec2495fd14c4..d742e6ec1cc47 100644 --- a/extensions/theme-abyss/themes/abyss-color-theme.json +++ b/extensions/theme-abyss/themes/abyss-color-theme.json @@ -270,6 +270,8 @@ "inputValidation.errorBackground": "#A22D44", "inputValidation.errorBorder": "#AB395B", + "badge.background": "#0063a5", + "dropdown.background": "#181f2f", // "dropdown.foreground": "", // "dropdown.border": "", diff --git a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json index f98364ce67d12..94ddfd4583668 100644 --- a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json +++ b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json @@ -43,7 +43,8 @@ "inputValidation.warningBackground": "#51412c", // "inputValidation.warningBorder": "#5B7E7A", "inputValidation.errorBackground": "#5f0d0d", - "inputValidation.errorBorder": "#9d2f23" + "inputValidation.errorBorder": "#9d2f23", + "badge.background": "#7f5d38" }, "tokenColors": [ { diff --git a/extensions/theme-monokai/themes/monokai-color-theme.json b/extensions/theme-monokai/themes/monokai-color-theme.json index d8138d5cd91df..2ae56ae72393b 100644 --- a/extensions/theme-monokai/themes/monokai-color-theme.json +++ b/extensions/theme-monokai/themes/monokai-color-theme.json @@ -28,6 +28,8 @@ "tab.border": "#1e1f1c", "tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused "widget.shadow": "#1e1f1c", + "badge.background": "#75715E", + "badge.foreground": "#f8f8f2", "editorLineNumber.foreground": "#90908a", "panelTitle.activeForeground": "#f8f8f2", "panelTitle.activeBorder": "#75715E", diff --git a/extensions/theme-quietlight/themes/quietlight-color-theme.json b/extensions/theme-quietlight/themes/quietlight-color-theme.json index 9e065fef1d672..4edbd8c1871e3 100644 --- a/extensions/theme-quietlight/themes/quietlight-color-theme.json +++ b/extensions/theme-quietlight/themes/quietlight-color-theme.json @@ -495,6 +495,7 @@ "inputValidation.warningBackground": "#fffee2", "inputValidation.warningBorder": "#ffe055", "inputValidation.errorBackground": "#ffeaea", - "inputValidation.errorBorder": "#f1897f" + "inputValidation.errorBorder": "#f1897f", + "badge.background": "#705697AA" } } \ No newline at end of file diff --git a/extensions/theme-red/themes/Red-color-theme.json b/extensions/theme-red/themes/Red-color-theme.json index 22e587a81f9ea..ec9b4dbf20abb 100644 --- a/extensions/theme-red/themes/Red-color-theme.json +++ b/extensions/theme-red/themes/Red-color-theme.json @@ -50,7 +50,8 @@ "list.highlightForeground": "#ff4444", "notification.background": "#662222", "pickerGroup.foreground": "#cc9999", - "pickerGroup.border": "#ff000033" + "pickerGroup.border": "#ff000033", + "badge.background": "#cc3333" }, "name": "Red" } \ No newline at end of file diff --git a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json index 81a5609cfebb2..118127b4e92b5 100644 --- a/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json +++ b/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json @@ -314,6 +314,8 @@ "inputValidation.errorBackground": "#571b26", "inputValidation.errorBorder": "#a92049", + "badge.background": "#047aa6", + "dropdown.background": "#00212B", "dropdown.border": "#2AA19899", // "dropdown.foreground": "", diff --git a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json index 4c5ea2d9070ad..71b344458d1b1 100644 --- a/extensions/theme-solarized-light/themes/solarized-light-color-theme.json +++ b/extensions/theme-solarized-light/themes/solarized-light-color-theme.json @@ -313,6 +313,8 @@ // "inputValidation.errorBackground": "", // "inputValidation.errorBorder": "", + "badge.background": "#B58900AA", + "dropdown.background": "#EEE8D5", // "dropdown.foreground": "", "dropdown.border": "#D3AF86", diff --git a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json index 1e1ba355fb2d2..f9af23e39ebdd 100644 --- a/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json +++ b/extensions/theme-tomorrow-night-blue/themes/tomorrow-night-blue-theme.json @@ -33,6 +33,8 @@ "activityBar.background": "#001733", "activityBarBadge.background": "#bbdaff", "activityBarBadge.foreground": "#001733", + "badge.background": "#bbdaffcc", + "badge.foreground": "#001733", "sideBar.background": "#001c40", "terminal.ansiBlack": "#111111", "terminal.ansiRed": "#ff9da4", diff --git a/src/vs/base/browser/ui/countBadge/countBadge.css b/src/vs/base/browser/ui/countBadge/countBadge.css index aef2810df4cd1..e6f36db1adc67 100644 --- a/src/vs/base/browser/ui/countBadge/countBadge.css +++ b/src/vs/base/browser/ui/countBadge/countBadge.css @@ -9,19 +9,5 @@ font-size: 85%; font-weight: normal; text-align: center; - background: #BEBEBE; - color: #FFF; display: inline; -} - -.vs-dark .monaco-count-badge { - color: #FFF; - background: #4D4D4D; -} - -/* High Contrast Theming */ -.hc-black .monaco-count-badge { - background: #000; - border: 1px solid #6FC3DF; - margin-top: 2px; } \ No newline at end of file diff --git a/src/vs/base/browser/ui/countBadge/countBadge.ts b/src/vs/base/browser/ui/countBadge/countBadge.ts index 36031fb9a1e79..a7fa56efce851 100644 --- a/src/vs/base/browser/ui/countBadge/countBadge.ts +++ b/src/vs/base/browser/ui/countBadge/countBadge.ts @@ -8,6 +8,24 @@ import 'vs/css!./countBadge'; import { $, append } from 'vs/base/browser/dom'; import { format } from 'vs/base/common/strings'; +import { Color } from "vs/base/common/color"; +import { mixin } from "vs/base/common/objects"; + +export interface ICountBadgeOptions extends ICountBadgetyles { + count?: number; + titleFormat?: string; +} + +export interface ICountBadgetyles { + badgeBackground?: Color; + badgeForeground?: Color; + badgeBorder?: Color; +} + +const defaultOpts = { + badgeBackground: Color.fromHex('#4D4D4D'), + badgeForeground: Color.fromHex('#FFFFFF') +}; export class CountBadge { @@ -15,10 +33,23 @@ export class CountBadge { private count: number; private titleFormat: string; - constructor(container: HTMLElement, count?: number, titleFormat?: string) { + private badgeBackground: Color; + private badgeForeground: Color; + private badgeBorder: Color; + + private options: ICountBadgeOptions; + + constructor(container: HTMLElement, options?: ICountBadgeOptions) { + this.options = options || Object.create(null); + mixin(this.options, defaultOpts, false); + + this.badgeBackground = this.options.badgeBackground; + this.badgeForeground = this.options.badgeForeground; + this.badgeBorder = this.options.badgeBorder; + this.element = append(container, $('.monaco-count-badge')); - this.titleFormat = titleFormat || ''; - this.setCount(count || 0); + this.titleFormat = this.options.titleFormat || ''; + this.setCount(this.options.count || 0); } setCount(count: number) { @@ -34,5 +65,30 @@ export class CountBadge { private render() { this.element.textContent = '' + this.count; this.element.title = format(this.titleFormat, this.count); + + this.applyStyles(); + } + + style(styles: ICountBadgetyles): void { + this.badgeBackground = styles.badgeBackground; + this.badgeForeground = styles.badgeForeground; + this.badgeBorder = styles.badgeBorder; + + this.applyStyles(); + } + + private applyStyles(): void { + if (this.element) { + const background = this.badgeBackground ? this.badgeBackground.toString() : null; + const foreground = this.badgeForeground ? this.badgeForeground.toString() : null; + const border = this.badgeBorder ? this.badgeBorder.toString() : null; + + this.element.style.backgroundColor = background; + this.element.style.color = foreground; + + this.element.style.borderWidth = border ? '1px' : null; + this.element.style.borderStyle = border ? 'solid' : null; + this.element.style.borderColor = border; + } } } diff --git a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts index 19d31c7d4053d..f5bbe18e907b8 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts +++ b/src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts @@ -40,7 +40,7 @@ import { FileReferences, OneReference, ReferencesModel } from './referencesModel import { ITextModelResolverService, ITextEditorModel } from 'vs/editor/common/services/resolverService'; import { registerColor, activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { registerThemingParticipant, ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachListStyler } from 'vs/platform/theme/common/styler'; +import { attachListStyler, attachBadgeStyler } from 'vs/platform/theme/common/styler'; import { IModelDecorationsChangedEvent } from 'vs/editor/common/model/textModelEvents'; import { IEditorOptions } from 'vs/editor/common/config/editorOptions'; @@ -344,10 +344,16 @@ class Controller extends DefaultController { class Renderer extends LegacyRenderer { private _contextService: IWorkspaceContextService; + private _themeService: IThemeService; - constructor( @IWorkspaceContextService contextService: IWorkspaceContextService) { + constructor( + @IWorkspaceContextService contextService: IWorkspaceContextService, + @IThemeService themeService: IThemeService + ) { super(); + this._contextService = contextService; + this._themeService = themeService; } public getHeight(tree: tree.ITree, element: any): number { @@ -356,6 +362,7 @@ class Renderer extends LegacyRenderer { protected render(tree: tree.ITree, element: FileReferences | OneReference, container: HTMLElement): tree.IElementCallback { + const toDispose: IDisposable[] = []; dom.clearNode(container); if (element instanceof FileReferences) { @@ -364,13 +371,15 @@ class Renderer extends LegacyRenderer { /* tslint:disable:no-unused-expression */ new LeftRightWidget(fileReferencesContainer, (left: HTMLElement) => { - new FileLabel(left, element.uri, this._contextService); + const label = new FileLabel(left, element.uri, this._contextService); + toDispose.push(label); return null; }, (right: HTMLElement) => { const len = element.children.length; - const badge = new CountBadge(right, len); + const badge = new CountBadge(right, { count: len }); + toDispose.push(attachBadgeStyler(badge, this._themeService)); if (element.failure) { badge.setTitleFormat(nls.localize('referencesFailre', "Failed to resolve file.")); @@ -402,7 +411,9 @@ class Renderer extends LegacyRenderer { strings.escape(preview.after))).appendTo(container); } - return null; + return () => { + dispose(toDispose); + }; } } diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 110d70f162a15..7d5d29074b542 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/src/vs/platform/theme/common/colorRegistry.ts @@ -172,6 +172,10 @@ export const buttonForeground = registerColor('button.foreground', { dark: Color export const buttonBackground = registerColor('button.background', { dark: '#0E639C', light: '#007ACC', hc: null }, nls.localize('buttonBackground', "Button background color.")); export const buttonHoverBackground = registerColor('button.hoverBackground', { dark: lighten(buttonBackground, 0.2), light: darken(buttonBackground, 0.2), hc: null }, nls.localize('buttonHoverBackground', "Button background color when hovering.")); +export const badgeBackground = registerColor('badge.background', { dark: '#4D4D4D', light: '#BEBEBE', hc: Color.black }, nls.localize('badgeBackground', "Badge background color. Badges are small information labels, e.g. for search results count.")); +export const badgeForeground = registerColor('badge.foreground', { dark: Color.white, light: Color.white, hc: Color.white }, nls.localize('badgeForeground', "Badge foreground color. Badges are small information labels, e.g. for search results count.")); +export const badgeBorder = registerColor('badge.border', { dark: null, light: null, hc: contrastBorder }, nls.localize('badgeBorder', "Badge border color. Badges are small information labels, e.g. for search results count.")); + export const scrollbarShadow = registerColor('scrollbar.shadow', { dark: '#000000', light: '#DDDDDD', hc: null }, nls.localize('scrollbarShadow', "Scrollbar shadow to indicate that the view is scrolled.")); export const scrollbarSliderBackground = registerColor('scrollbarSlider.background', { dark: Color.fromHex('#797979').transparent(0.4), light: Color.fromHex('#646464').transparent(0.4), hc: transparent(contrastBorder, 0.6) }, nls.localize('scrollbarSliderBackground', "Slider background color.")); export const scrollbarSliderHoverBackground = registerColor('scrollbarSlider.hoverBackground', { dark: Color.fromHex('#646464').transparent(0.7), light: Color.fromHex('#646464').transparent(0.7), hc: transparent(contrastBorder, 0.8) }, nls.localize('scrollbarSliderHoverBackground', "Slider background color when hovering.")); diff --git a/src/vs/platform/theme/common/styler.ts b/src/vs/platform/theme/common/styler.ts index ca14730cfd09e..e5d088e794a82 100644 --- a/src/vs/platform/theme/common/styler.ts +++ b/src/vs/platform/theme/common/styler.ts @@ -6,7 +6,7 @@ 'use strict'; import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService'; -import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten } from 'vs/platform/theme/common/colorRegistry'; +import { inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listHoverBackground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, badgeBorder } from 'vs/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme'; @@ -46,6 +46,19 @@ export function attachCheckboxStyler(widget: IThemable, themeService: IThemeServ }, widget); } +export function attachBadgeStyler(widget: IThemable, themeService: IThemeService, style?: + { + badgeBackground?: ColorIdentifier, + badgeForeground?: ColorIdentifier, + badgeBorder?: ColorIdentifier + }): IDisposable { + return doAttachStyler(themeService, { + badgeBackground: (style && style.badgeBackground) || badgeBackground, + badgeForeground: (style && style.badgeForeground) || badgeForeground, + badgeBorder: (style && style.badgeBorder) || badgeBorder + }, widget); +} + export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: { inputBackground?: ColorIdentifier, diff --git a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css index b8a40903a7414..c0718789375fe 100644 --- a/src/vs/workbench/parts/files/browser/media/explorerviewlet.css +++ b/src/vs/workbench/parts/files/browser/media/explorerviewlet.css @@ -182,14 +182,4 @@ .hc-black .monaco-workbench .explorer-viewlet .open-editor, .hc-black .monaco-workbench .explorer-viewlet .editor-group { line-height: 20px; -} - -/* TODO@Theme */ - -.vs .monaco-workbench .explorer-viewlet .header .monaco-count-badge { - background-color: rgba(190, 190, 190, 0.7); -} - -.vs-dark .monaco-workbench .explorer-viewlet .header .monaco-count-badge { - background-color: rgba(100, 100, 100, 0.5); } \ No newline at end of file diff --git a/src/vs/workbench/parts/files/browser/views/openEditorsView.ts b/src/vs/workbench/parts/files/browser/views/openEditorsView.ts index b6f1e2db772ab..07b9ac2cbd9b8 100644 --- a/src/vs/workbench/parts/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/parts/files/browser/views/openEditorsView.ts @@ -31,8 +31,9 @@ import { ToggleEditorLayoutAction } from 'vs/workbench/browser/actions/toggleEdi import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey'; import { IListService } from 'vs/platform/list/browser/listService'; import { EditorGroup } from 'vs/workbench/common/editor/editorStacksModel'; -import { attachListStyler } from 'vs/platform/theme/common/styler'; +import { attachListStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { badgeBackground, badgeForeground, badgeBorder } from "vs/platform/theme/common/colorRegistry"; const $ = dom.$; @@ -87,6 +88,20 @@ export class OpenEditorsView extends AdaptiveCollapsibleViewletView { titleSpan.textContent = nls.localize({ key: 'openEditors', comment: ['Open is an adjective'] }, "Open Editors"); this.dirtyCountElement = dom.append(titleDiv, $('.monaco-count-badge')); + + this.toDispose.push((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, badgeBorder }, colors => { + const background = colors.badgeBackground ? colors.badgeBackground.toString() : null; + const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : null; + const border = colors.badgeBorder ? colors.badgeBorder.toString() : null; + + this.dirtyCountElement.style.backgroundColor = background; + this.dirtyCountElement.style.color = foreground; + + this.dirtyCountElement.style.borderWidth = border ? '1px' : null; + this.dirtyCountElement.style.borderStyle = border ? 'solid' : null; + this.dirtyCountElement.style.borderColor = border; + }))); + this.updateDirtyIndicator(); super.renderHeader(container); diff --git a/src/vs/workbench/parts/markers/browser/markersTreeViewer.ts b/src/vs/workbench/parts/markers/browser/markersTreeViewer.ts index 4367e3c85de64..b0f736e5e5182 100644 --- a/src/vs/workbench/parts/markers/browser/markersTreeViewer.ts +++ b/src/vs/workbench/parts/markers/browser/markersTreeViewer.ts @@ -18,9 +18,13 @@ import { IMarker } from 'vs/platform/markers/common/markers'; import { MarkersModel, Resource, Marker } from 'vs/workbench/parts/markers/common/markersModel'; import Messages from 'vs/workbench/parts/markers/common/messages'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { attachBadgeStyler } from "vs/platform/theme/common/styler"; +import { IThemeService } from "vs/platform/theme/common/themeService"; +import { IDisposable } from "vs/base/common/lifecycle"; interface IAnyResourceTemplateData { count: CountBadge; + styler: IDisposable; } interface IResourceTemplateData extends IAnyResourceTemplateData { @@ -80,7 +84,8 @@ export class Renderer implements IRenderer { constructor(private actionRunner: IActionRunner, private actionProvider: IActionProvider, @IWorkspaceContextService private contextService: IWorkspaceContextService, - @IInstantiationService private instantiationService: IInstantiationService + @IInstantiationService private instantiationService: IInstantiationService, + @IThemeService private themeService: IThemeService ) { } @@ -121,6 +126,7 @@ export class Renderer implements IRenderer { const badgeWrapper = dom.append(container, dom.$('.count-badge-wrapper')); data.count = new CountBadge(badgeWrapper); + data.styler = attachBadgeStyler(data.count, this.themeService); return data; } @@ -132,6 +138,7 @@ export class Renderer implements IRenderer { const badgeWrapper = dom.append(container, dom.$('.count-badge-wrapper')); data.count = new CountBadge(badgeWrapper); + data.styler = attachBadgeStyler(data.count, this.themeService); return data; } @@ -193,9 +200,11 @@ export class Renderer implements IRenderer { public disposeTemplate(tree: ITree, templateId: string, templateData: any): void { if (templateId === Renderer.FILE_RESOURCE_TEMPLATE_ID) { (templateData).fileLabel.dispose(); + (templateData).styler.dispose(); } if (templateId === Renderer.RESOURCE_TEMPLATE_ID) { (templateData).resourceLabel.dispose(); + (templateData).styler.dispose(); } } } diff --git a/src/vs/workbench/parts/preferences/browser/media/preferences.css b/src/vs/workbench/parts/preferences/browser/media/preferences.css index d0f783fbcaa39..a8eccaa8c2d50 100644 --- a/src/vs/workbench/parts/preferences/browser/media/preferences.css +++ b/src/vs/workbench/parts/preferences/browser/media/preferences.css @@ -108,25 +108,19 @@ position: absolute; right: 10px; border-radius: 2px; - background-color: #EFEFF2; } .settings-header-widget > .settings-count-widget.hide { display: none; } -.hc-black .settings-header-widget > .settings-count-widget, -.vs-dark .settings-header-widget > .settings-count-widget { - background-color: #2D2D30; -} - .settings-header-widget > .settings-count-widget.no-results { - color: #A1260D; + color: #A1260D !important; } .hc-black .settings-header-widget > .settings-count-widget.no-results, .vs-dark .settings-header-widget > .settings-count-widget.no-results { - color: #F48771 + color: #F48771 !important; } .settings-header-widget > .settings-search-container { diff --git a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts index 5d7cfc196957a..ff38198dbbaf0 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts @@ -27,7 +27,7 @@ import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/co import { IThemeService } from 'vs/platform/theme/common/themeService'; import { Position } from 'vs/editor/common/core/position'; import { ICursorPositionChangedEvent } from 'vs/editor/common/controller/cursorEvents'; -import { buttonBackground, buttonForeground } from "vs/platform/theme/common/colorRegistry"; +import { buttonBackground, buttonForeground, badgeBorder, badgeForeground, badgeBackground } from "vs/platform/theme/common/colorRegistry"; export class SettingsGroupTitleWidget extends Widget implements IViewZone { @@ -263,6 +263,18 @@ export class SearchWidget extends Widget { this.domNode = DOM.append(parent, DOM.$('div.settings-header-widget')); this.createSearchContainer(DOM.append(this.domNode, DOM.$('div.settings-search-container'))); this.countElement = DOM.append(this.domNode, DOM.$('.settings-count-widget')); + this._register(attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, badgeBorder }, colors => { + const background = colors.badgeBackground ? colors.badgeBackground.toString() : null; + const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : null; + const border = colors.badgeBorder ? colors.badgeBorder.toString() : null; + + this.countElement.style.backgroundColor = background; + this.countElement.style.color = foreground; + + this.countElement.style.borderWidth = border ? '1px' : null; + this.countElement.style.borderStyle = border ? 'solid' : null; + this.countElement.style.borderColor = border; + })); this.inputBox.inputElement.setAttribute('aria-live', 'assertive'); } diff --git a/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts b/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts index 4bf09bf4e1126..f395ebd5eed22 100644 --- a/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts +++ b/src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts @@ -42,7 +42,7 @@ import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import { IModelService } from 'vs/editor/common/services/modelService'; import { comparePaths } from 'vs/base/common/comparers'; import { isSCMResource } from './scmUtil'; -import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler'; +import { attachInputBoxStyler, attachListStyler, attachBadgeStyler } from 'vs/platform/theme/common/styler'; import Severity from 'vs/base/common/severity'; // TODO@Joao @@ -80,6 +80,7 @@ interface ResourceGroupTemplate { name: HTMLElement; count: CountBadge; actionBar: ActionBar; + dispose: () => void; } class ResourceGroupRenderer implements IRenderer { @@ -89,7 +90,8 @@ class ResourceGroupRenderer implements IRenderer { + actionBar.dispose(); + styler.dispose(); + } + }; } renderElement(group: ISCMResourceGroup, index: number, template: ResourceGroupTemplate): void { @@ -112,7 +120,7 @@ class ResourceGroupRenderer implements IRenderer this.getActionItem(action); const renderers = [ - new ResourceGroupRenderer(this.menus, actionItemProvider), + new ResourceGroupRenderer(this.menus, actionItemProvider, this.themeService), this.instantiationService.createInstance(ResourceRenderer, this.menus, actionItemProvider, () => this.getSelectedResources()), ]; diff --git a/src/vs/workbench/parts/search/browser/searchResultsView.ts b/src/vs/workbench/parts/search/browser/searchResultsView.ts index 5039bded06412..2ea9e84cafa13 100644 --- a/src/vs/workbench/parts/search/browser/searchResultsView.ts +++ b/src/vs/workbench/parts/search/browser/searchResultsView.ts @@ -19,6 +19,8 @@ import { Range } from 'vs/editor/common/core/range'; import { SearchViewlet } from 'vs/workbench/parts/search/browser/searchViewlet'; import { RemoveAction, ReplaceAllAction, ReplaceAction } from 'vs/workbench/parts/search/browser/searchActions'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { attachBadgeStyler } from "vs/platform/theme/common/styler"; +import { IThemeService } from "vs/platform/theme/common/themeService"; export class SearchDataSource implements IDataSource { @@ -107,8 +109,13 @@ export class SearchRenderer extends Disposable implements IRenderer { private static FILE_MATCH_TEMPLATE_ID = 'fileMatch'; private static MATCH_TEMPLATE_ID = 'match'; - constructor(actionRunner: IActionRunner, private viewlet: SearchViewlet, @IWorkspaceContextService private contextService: IWorkspaceContextService, - @IInstantiationService private instantiationService: IInstantiationService) { + constructor( + actionRunner: IActionRunner, + private viewlet: SearchViewlet, + @IWorkspaceContextService private contextService: IWorkspaceContextService, + @IInstantiationService private instantiationService: IInstantiationService, + @IThemeService private themeService: IThemeService + ) { super(); } @@ -145,11 +152,11 @@ export class SearchRenderer extends Disposable implements IRenderer { } } - private renderFileMatchTemplate(tree: ITree, templateId: string, container: HTMLElement): IFileMatchTemplate { let fileMatchElement = DOM.append(container, DOM.$('.filematch')); const label = this.instantiationService.createInstance(FileLabel, fileMatchElement, void 0); const badge = new CountBadge(DOM.append(fileMatchElement, DOM.$('.badge'))); + this._register(attachBadgeStyler(badge, this.themeService)); const actions = new ActionBar(fileMatchElement, { animated: false }); return { label, badge, actions }; }