From 6111b83cb1ed601b9f2e8c4990d7cd0740a25ed7 Mon Sep 17 00:00:00 2001 From: Johannes Rieken Date: Thu, 12 Oct 2017 12:07:03 +0200 Subject: [PATCH] use a single letter and render that --- src/vs/base/browser/ui/iconLabel/iconLabel.ts | 31 +++++++----- .../base/browser/ui/iconLabel/iconlabel.css | 15 +++++- src/vs/workbench/browser/labels.ts | 47 ++++++------------- .../electron-browser/scmFileDecorations.ts | 3 +- .../decorations/browser/decorations.ts | 3 +- 5 files changed, 50 insertions(+), 49 deletions(-) diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts index f97f73653d8..d7f7a42413e 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 43078b1706b..a1dda94d93e 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 cd57469d795..2f147796c63 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 021d06178e2..4d774279bf8 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 8a1740ffd80..2c177fb78f6 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