diff --git a/src/vs/workbench/contrib/scm/browser/media/scm.css b/src/vs/workbench/contrib/scm/browser/media/scm.css index 0c72ca522f9ae..4ba122fa37019 100644 --- a/src/vs/workbench/contrib/scm/browser/media/scm.css +++ b/src/vs/workbench/contrib/scm/browser/media/scm.css @@ -168,6 +168,12 @@ line-height: 18px; } +.scm-view .monaco-list-row .history-item > .label-container > .label > .count { + font-size: 12px; + margin-left: 0; + padding-left: 4px; +} + .scm-view .monaco-list-row .history-item > .label-container > .label > .codicon { font-size: 14px; color: inherit !important; diff --git a/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts b/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts index ff5fc1818fafb..5ad747852ecf8 100644 --- a/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts +++ b/src/vs/workbench/contrib/scm/browser/scmHistoryViewPane.ts @@ -375,7 +375,7 @@ class HistoryItemRenderer implements ITreeRenderer 0 && references[0].color) { - this._renderBadge(references[0], true, templateData); + this._renderBadge([references[0]], true, templateData); // Remove the rendered reference from the collection references.splice(0, 1); @@ -385,7 +385,7 @@ class HistoryItemRenderer implements ITreeRenderer ref.color ? ref.color : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefsByColor)) { - // If needed skip badges with no color + // If needed skip badges without a color if (key === '' && labelConfig !== 'all') { continue; } @@ -393,35 +393,40 @@ class HistoryItemRenderer implements ITreeRenderer ThemeIcon.isThemeIcon(ref.icon) ? ref.icon.id : ''); for (const [key, historyItemRefs] of Object.entries(historyItemRefByIconId)) { - if (key === '' || historyItemRefs.length === 0) { + // Skip badges without an icon + if (key === '') { continue; } - this._renderBadge(historyItemRefs[0], false, templateData); + this._renderBadge(historyItemRefs, false, templateData); } } })); } - private _renderBadge(historyItemRef: ISCMHistoryItemRef, showDescription: boolean, templateData: HistoryItemTemplate): void { - if (!ThemeIcon.isThemeIcon(historyItemRef.icon)) { + private _renderBadge(historyItemRefs: ISCMHistoryItemRef[], showDescription: boolean, templateData: HistoryItemTemplate): void { + if (historyItemRefs.length === 0 || !ThemeIcon.isThemeIcon(historyItemRefs[0].icon)) { return; } const elements = h('div.label', { style: { - color: historyItemRef.color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), - backgroundColor: historyItemRef.color ? asCssVariable(historyItemRef.color) : asCssVariable(historyItemHoverDefaultLabelBackground) + color: historyItemRefs[0].color ? asCssVariable(historyItemHoverLabelForeground) : asCssVariable(foreground), + backgroundColor: historyItemRefs[0].color ? asCssVariable(historyItemRefs[0].color) : asCssVariable(historyItemHoverDefaultLabelBackground) } }, [ + h('div.count@count', { + style: { display: historyItemRefs.length > 1 ? '' : 'none' } + }), h('div.icon@icon'), - h('div.description@description') + h('div.description@description', { + style: { display: showDescription ? '' : 'none' } + }) ]); - elements.icon.classList.add(...ThemeIcon.asClassNameArray(historyItemRef.icon)); - - elements.description.textContent = historyItemRef.name; - elements.description.style.display = showDescription ? '' : 'none'; + elements.count.textContent = historyItemRefs.length.toString(); + elements.icon.classList.add(...ThemeIcon.asClassNameArray(historyItemRefs[0].icon)); + elements.description.textContent = historyItemRefs[0].name; append(templateData.labelContainer, elements.root); }