deco - make letter be a after-pseudo element

src/vs/base/browser/ui/iconLabel/iconLabel.ts

@@ -28,7 +28,6 @@ export interface IIconLabelOptions {
 	extraClasses?: string[];
 	italic?: boolean;
 	matches?: IMatch[];
-	badge?: ILabelBadgeOptions;
 }
 
 class FastLabelNode {
@@ -90,7 +89,6 @@ 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')));
@@ -148,20 +146,6 @@ export class IconLabel {
 
 		this.descriptionNode.textContent = description || '';
 		this.descriptionNode.empty = !description;
-
-		if (options && options.badge) {
-			if (!this.badgeNode) {
-				this.badgeNode = document.createElement('span');
-				this.element.style.display = 'flex';
-				this.element.appendChild(this.badgeNode);
-			}
-			this.badgeNode.title = options.badge.title;
-			this.badgeNode.className = `label-badge ${options.badge.className}`;
-			dom.show(this.badgeNode);
-
-		} else if (this.badgeNode) {
-			dom.hide(this.badgeNode);
-		}
 	}
 
 	public dispose(): void {

src/vs/base/browser/ui/iconLabel/iconlabel.css

@@ -6,7 +6,7 @@
 /* ---------- Icon label ---------- */
 
 .monaco-icon-label {
-	display: inline-block; /* required for icons support :before rule */
+	display: flex; /* required for icons support :before rule */
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -44,15 +44,11 @@
 	font-style: italic;
 }
 
-.monaco-icon-label > .label-badge {
-	align-self: center;
-	height: 12px;
-	min-width: 10px;
-	line-height: 125%;
+.monaco-icon-label::after {
+	flex: 1;
+	opacity: 0.75;
 	font-size: 90%;
-	margin: 1px 15px 1px auto;
-	padding: 2px 3px;
-	border-radius: 5px;
-	font-weight: 500;
-	text-align: center;
+	font-weight: 600;
+	text-align: right;
+	padding: 0 15px 0 5px;
 }

src/vs/workbench/browser/labels.ts

@@ -202,15 +202,16 @@ export class ResourceLabel extends IconLabel {
 				this.options.fileKind !== FileKind.FILE
 			);
 
-			if (deco && this.options.fileDecorations.colors) {
-				iconLabelOptions.extraClasses.push(deco.labelClassName);
-			}
-
-			if (deco && deco.badgeClassName && this.options.fileDecorations.badges) {
-				iconLabelOptions.badge = {
-					title: deco.title,
-					className: deco.badgeClassName,
-				};
+			if (deco) {
+				if (deco.title) {
+					iconLabelOptions.title = `${deco.title}, ${iconLabelOptions.title}`;
+				}
+				if (this.options.fileDecorations.colors) {
+					iconLabelOptions.extraClasses.push(deco.labelClassName);
+				}
+				if (this.options.fileDecorations.badges) {
+					iconLabelOptions.extraClasses.push(deco.badgeClassName);
+				}
 			}
 		}
 

src/vs/workbench/services/decorations/browser/decorationsService.ts

@@ -54,7 +54,7 @@ class DecorationRule {
 		createCSSRule(`.focused .selected .${this.labelClassName}`, `color: inherit;`, element);
 		// letter
 		if (letter) {
-			createCSSRule(`.${this.badgeClassName}::before`, `content: "${letter}"`, element);
+			createCSSRule(`.${this.badgeClassName}::after`, `content: "${letter}";`, element);
 		}
 	}
 
@@ -62,14 +62,11 @@ class DecorationRule {
 		// label
 		const { color } = data[0];
 		createCSSRule(`.${this.labelClassName}`, `color: ${theme.getColor(color) || 'inherit'};`, element);
-		createCSSRule(`.focused .selected .${this.labelClassName}`, `color: inherit; opacity: inherit;`, element);
+		createCSSRule(`.focused .selected .${this.labelClassName}`, `color: inherit;`, element);
 
 		// badge
-		let letters: string[] = [];
-		for (const deco of data) {
-			letters.push(deco.letter);
-		}
-		createCSSRule(`.${this.badgeClassName}::before`, `content: "${letters.join(', ')}"`, element);
+		let content = data.map(d => d.letter).join(', ');
+		createCSSRule(`.${this.badgeClassName}::after`, `content: "${content}";`, element);
 	}
 
 	removeCSSRules(element: HTMLStyleElement): void {