diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts index f97f73653d8b8e28d011ee295061fbe3e86fec45..d7f7a42413e8bbfb782177161e058ddd8853ca37 100644 --- a/src/vs/base/browser/ui/iconLabel/iconLabel.ts +++ b/src/vs/base/browser/ui/iconLabel/iconLabel.ts @@ -25,7 +25,7 @@ export interface IIconLabelOptions { italic?: boolean; matches?: IMatch[]; color?: Color; - extraIcon?: uri; + badge?: { letter: string, title: string }; } class FastLabelNode { @@ -87,6 +87,7 @@ export class IconLabel { private domNode: FastLabelNode; private labelNode: FastLabelNode | HighlightedLabel; private descriptionNode: FastLabelNode; + private badgeNode: HTMLSpanElement; constructor(container: HTMLElement, options?: IIconLabelCreationOptions) { this.domNode = new FastLabelNode(dom.append(container, dom.$('.monaco-icon-label'))); @@ -147,18 +148,22 @@ export class IconLabel { this.descriptionNode.textContent = description || ''; this.descriptionNode.empty = !description; - if (options && options.extraIcon) { - this.element.style.backgroundImage = `url("${options.extraIcon.toString(true)}")`; - this.element.style.backgroundRepeat = 'no-repeat'; - this.element.style.backgroundPosition = 'right center'; - this.element.style.paddingRight = '20px'; - this.element.style.marginRight = '14px'; - } else { - this.element.style.backgroundImage = ''; - this.element.style.backgroundRepeat = ''; - this.element.style.backgroundPosition = ''; - this.element.style.paddingRight = ''; - this.element.style.marginRight = ''; + if (options && options.badge) { + if (!this.badgeNode) { + this.badgeNode = document.createElement('span'); + this.badgeNode.className = 'label-badge'; + this.badgeNode.style.backgroundColor = options.color.toString(); + this.badgeNode.style.color = (options.color.isDarker() ? Color.white : Color.black).toString(); + this.element.style.display = 'flex'; + this.element.appendChild(this.badgeNode); + } + const { letter, title } = options.badge; + this.badgeNode.innerHTML = letter; + this.badgeNode.title = title; + dom.show(this.badgeNode); + + } else if (this.badgeNode) { + dom.hide(this.badgeNode); } } diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index 43078b1706b4980e30b4562b6e143c271112872b..a1dda94d93e8c02749504f187f6c725203dd61f3 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -42,4 +42,17 @@ .monaco-icon-label.italic > .label-name, .monaco-icon-label.italic > .label-description { font-style: italic; -} \ No newline at end of file +} + +.monaco-icon-label > .label-badge { + align-self: center; + height: 12px; + min-width: 10px; + line-height: 12px; + font-size: 80%; + margin: 1px 15px 1px auto; + padding: 2px 4px; + border-radius: 14px; + font-weight: normal; + text-align: center; +} diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index cd57469d7951e07b2d0ba4600af38a0933b84e07..2f147796c63fc92233366803c8a525e5364d454e 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -25,8 +25,6 @@ import { Schemas } from 'vs/base/common/network'; import { FileKind } from 'vs/platform/files/common/files'; import { IModel } from 'vs/editor/common/editorCommon'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { Color } from 'vs/base/common/color'; -import { localize } from 'vs/nls'; export interface IResourceLabel { name: string; @@ -159,60 +157,43 @@ export class ResourceLabel extends IconLabel { return; } + const iconLabelOptions: IIconLabelOptions = { + title: '', + italic: this.options && this.options.italic, + matches: this.options && this.options.matches, + }; + const resource = this.label.resource; let label = this.label.name; - let title = ''; + if (this.options && typeof this.options.title === 'string') { - title = this.options.title; + iconLabelOptions.title = this.options.title; } else if (resource) { - title = getPathLabel(resource, void 0, this.environmentService); + iconLabelOptions.title = getPathLabel(resource, void 0, this.environmentService); } if (!this.computedIconClasses) { this.computedIconClasses = getIconClasses(this.modelService, this.modeService, resource, this.options && this.options.fileKind); } - let extraClasses = this.computedIconClasses.slice(0); + iconLabelOptions.extraClasses = this.computedIconClasses.slice(0); if (this.options && this.options.extraClasses) { - extraClasses.push(...this.options.extraClasses); + iconLabelOptions.extraClasses.push(...this.options.extraClasses); } - const italic = this.options && this.options.italic; - const matches = this.options && this.options.matches; - - - - let color: Color; - let extraIcon: uri; if (this.options && this.options.fileDecorations) { let deco = this.decorationsService.getTopDecoration( resource, this.options.fileDecorations === 'all' ); - if (deco) { - color = this.themeService.getTheme().getColor(deco.color); - - if (deco.tooltip) { - title = localize('deco.tooltip', "{0}, {1}", title, deco.tooltip); - } - - if (deco.icon) { - const { type } = this.themeService.getTheme(); - extraIcon = type === 'light' ? deco.icon.light : deco.icon.dark; - } + iconLabelOptions.color = this.themeService.getTheme().getColor(deco.color); + iconLabelOptions.badge = deco.letter && { letter: deco.letter, title: deco.tooltip }; } } - this.setValue(label, this.label.description, { - title, - extraClasses, - italic, - matches, - color, - extraIcon - }); + this.setValue(label, this.label.description, iconLabelOptions); } public dispose(): void { diff --git a/src/vs/workbench/parts/scm/electron-browser/scmFileDecorations.ts b/src/vs/workbench/parts/scm/electron-browser/scmFileDecorations.ts index 021d06178e2aef78b3d3840825b75206dda4ae39..4d774279bf83613740377f76a46bf79505bf39dd 100644 --- a/src/vs/workbench/parts/scm/electron-browser/scmFileDecorations.ts +++ b/src/vs/workbench/parts/scm/electron-browser/scmFileDecorations.ts @@ -70,7 +70,8 @@ class SCMDecorationsProvider implements IDecorationsProvider { severity: Severity.Info, tooltip: localize('tooltip', "{0} - {1}", resource.decorations.tooltip, this._provider.label), color: this._config.fileDecorations.useColors ? resource.decorations.color : undefined, - icon: this._config.fileDecorations.useIcons ? { light: resource.decorations.icon, dark: resource.decorations.iconDark } : undefined + icon: this._config.fileDecorations.useIcons ? { light: resource.decorations.icon, dark: resource.decorations.iconDark } : undefined, + letter: resource.decorations.tooltip.charAt(0), }; } } diff --git a/src/vs/workbench/services/decorations/browser/decorations.ts b/src/vs/workbench/services/decorations/browser/decorations.ts index 8a1740ffd8015850c410348c416c972e38a4f604..2c177fb78f6988eb3838728b2a1839dc2f04c924 100644 --- a/src/vs/workbench/services/decorations/browser/decorations.ts +++ b/src/vs/workbench/services/decorations/browser/decorations.ts @@ -15,8 +15,9 @@ export const IResourceDecorationsService = createDecorator