PoC for secondary icons

Part of #120241
microsoft · Apr 8, 2021 · 84711ff · 84711ff
1 parent 6062a54
commit 84711ff
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/src/vs/base/browser/ui/iconLabel/iconLabel.ts b/src/vs/base/browser/ui/iconLabel/iconLabel.ts
@@ -32,6 +32,7 @@ export interface IIconLabelMarkdownString {
 
 export interface IIconLabelValueOptions {
 	title?: string | IIconLabelMarkdownString;
+	annotatedIcon?: string;
 	descriptionTitle?: string;
 	hideIcon?: boolean;
 	extraClasses?: string[];

diff --git a/src/vs/base/browser/ui/iconLabel/iconLabels.ts b/src/vs/base/browser/ui/iconLabel/iconLabels.ts
@@ -19,6 +19,15 @@ export function renderLabelWithIcons(text: string): Array<HTMLSpanElement | stri
 
 		const [, escaped, codicon] = match;
 		elements.push(escaped ? `$(${codicon})` : renderIcon({ id: codicon }));
+		if (codicon === 'terminal') {
+			const secondaryIcon = renderIcon({ id: 'warning' });
+			secondaryIcon.style.position = 'absolute';
+			secondaryIcon.style.top = '10px';
+			secondaryIcon.style.left = '10px';
+			secondaryIcon.style.fontSize = '8px';
+			secondaryIcon.style.color = '#990';
+			elements.push(secondaryIcon);
+		}
 	}
 
 	if (textStart < text.length) {
@@ -30,5 +39,10 @@ export function renderLabelWithIcons(text: string): Array<HTMLSpanElement | stri
 export function renderIcon(icon: CSSIcon): HTMLSpanElement {
 	const node = dom.$(`span`);
 	node.classList.add(...CSSIcon.asClassNameArray(icon));
+	if (icon.id === 'terminal') {
+		node.style.verticalAlign = 'text-bottom';
+		node.style.clipPath = 'polygon(0% 0%, 100% 0%, 100% 60%, 60% 60%, 60% 100%, 0% 100%)';
+		node.style.marginRight = '2px';
+	}
 	return node;
 }
diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css
@@ -40,6 +40,7 @@
 
 .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
 	color: inherit;
+	position: relative;
 	white-space: pre; /* enable to show labels that include multiple whitespaces */
 }
 

diff --git a/src/vs/workbench/contrib/terminal/browser/terminalTabsWidget.ts b/src/vs/workbench/contrib/terminal/browser/terminalTabsWidget.ts
@@ -16,7 +16,7 @@ import { ITerminalInstance, ITerminalService, ITerminalTab } from 'vs/workbench/
 import { localize } from 'vs/nls';
 import * as dom from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { Codicon } from 'vs/base/common/codicons';
+import { IconLabel, IIconLabelValueOptions } from 'vs/base/browser/ui/iconLabel/iconLabel';
 
 const $ = dom.$;
 
@@ -116,8 +116,10 @@ class TerminalTabsRenderer implements ITreeRenderer<ITabTreeNode, never, ITermin
 	templateId = 'terminal.tabs';
 
 	renderTemplate(container: HTMLElement): ITerminalTabEntryTemplate {
+		const labelElement = dom.append(container, $('.terminal-tabs-entry'));
 		return {
-			labelElement: dom.append(container, $('.terminal-tabs-entry')),
+			labelElement,
+			label: new IconLabel(labelElement, { supportHighlights: true, supportDescriptionHighlights: true, supportIcons: true })
 		};
 	}
 
@@ -126,15 +128,16 @@ class TerminalTabsRenderer implements ITreeRenderer<ITabTreeNode, never, ITermin
 		let item = node.element;
 		if ('terminalInstances' in item) {
 			if (item.terminalInstances.length === 1) {
-				label = item.terminalInstances[0].title;
+				const instance = item.terminalInstances[0];
+				label = `$(${instance.icon.id}) ${instance.title}`;
 			} else if (item.terminalInstances.length > 1) {
 				label = `Terminals (${item.terminalInstances.length})`;
 			}
 		} else {
-			label = item.title;
+			label = `$(${item.icon.id}) ${item.title}`;
 		}
-		template.labelElement.textContent = label;
-		template.labelElement.title = label;
+		const options: IIconLabelValueOptions = Object.create(null);
+		template.label.setLabel(label, 'desc', options);
 	}
 
 	disposeTemplate(templateData: ITerminalTabEntryTemplate): void {
@@ -143,7 +146,7 @@ class TerminalTabsRenderer implements ITreeRenderer<ITabTreeNode, never, ITermin
 
 interface ITerminalTabEntryTemplate {
 	labelElement: HTMLElement;
-	icon?: Codicon;
+	label: IconLabel;
 }
 
 type ITabTreeNode = ITerminalTab | ITerminalInstance;