From 552bf2e0350e14de50d6931503fa9a5fa7107a7f Mon Sep 17 00:00:00 2001 From: Ladislau Szomoru <3372902+lszomoru@users.noreply.github.com> Date: Wed, 15 Nov 2023 21:31:41 +0100 Subject: [PATCH] SCM - improve statistics badge --- .../lib/stylelint/vscode-known-variables.json | 5 +- .../contrib/scm/browser/media/scm.css | 48 +++++----------- .../contrib/scm/browser/scmViewPane.ts | 56 ++++++++++++++----- 3 files changed, 61 insertions(+), 48 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index f10a77ba58106..e89588fc11ac1 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -499,6 +499,9 @@ "--vscode-quickInputList-focusIconForeground", "--vscode-quickInputTitle-background", "--vscode-sash-hoverBorder", + "--vscode-scm-historyItemAdditionsForeground", + "--vscode-scm-historyItemDeletionsForeground", + "--vscode-scm-historyItemStatisticsBorder", "--vscode-scrollbar-shadow", "--vscode-scrollbarSlider-activeBackground", "--vscode-scrollbarSlider-background", @@ -789,4 +792,4 @@ "--z-index-notebook-sticky-scroll", "--zoom-factor" ] -} +} \ No newline at end of file diff --git a/src/vs/workbench/contrib/scm/browser/media/scm.css b/src/vs/workbench/contrib/scm/browser/media/scm.css index df51b3184b16d..baaf911f7cc8b 100644 --- a/src/vs/workbench/contrib/scm/browser/media/scm.css +++ b/src/vs/workbench/contrib/scm/browser/media/scm.css @@ -154,50 +154,30 @@ font-size: 11px; line-height: 11px; margin-left: 6px; - color: var(--vscode-badge-foreground); + gap: 4px; } -.scm-view .monaco-list .monaco-list-row.focused .history-item .stats-container, -.scm-view .monaco-list .monaco-list-row.selected .history-item .stats-container, -.scm-view .monaco-list .monaco-list-row.focused .history-item .stats-container .monaco-icon-label .codicon, -.scm-view .monaco-list .monaco-list-row.selected .history-item .stats-container .monaco-icon-label .codicon { - color: var(--vscode-badge-foreground); -} - -.scm-view .monaco-list-row .history-item .stats-container .monaco-icon-label { +.scm-view .monaco-list-row .history-item .stats-container { min-height: 18px; - padding: 0 2px; + padding: 0 4px; border-radius: 2px; - border: 1px solid var(--vscode-contrastBorder); - background-color: var(--vscode-badge-background); + border: 1px solid var(--vscode-scm-historyItemStatisticsBorder); } -.scm-view .monaco-list-row .history-item .stats-container .monaco-icon-label .codicon { - color: var(--vscode-badge-foreground); - margin: 0 1px; -} - -.scm-view .monaco-list-row .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-added, -.scm-view .monaco-list-row.focused .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-added, -.scm-view .monaco-list-row.selected .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-added { - color: var(--vscode-editorGutter-addedBackground); - margin-top: 1px; -} - -.scm-view .monaco-list-row .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-removed, -.scm-view .monaco-list-row.focused .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-removed, -.scm-view .monaco-list-row.selected .history-item .stats-container .monaco-icon-label .codicon.codicon-diff-removed { - color: var(--vscode-editorGutter-deletedBackground); - margin-top: 1px; -} - -.scm-view .monaco-list-row .history-item .stats-container .monaco-icon-label .monaco-highlighted-label { +.scm-view .monaco-list-row .history-item .stats-container > .files-label, +.scm-view .monaco-list-row .history-item .stats-container > .insertions-label, +.scm-view .monaco-list-row .history-item .stats-container > .deletions-label { display: flex; align-items: center; + opacity: 0.75; } -.scm-view .monaco-list-row .history-item .stats-container .codicon { - font-size: 11px; +.scm-view .monaco-list-row .history-item .stats-container > .insertions-label { + color: var(--vscode-scm-historyItemAdditionsForeground); +} + +.scm-view .monaco-list-row .history-item .stats-container > .deletions-label { + color: var(--vscode-scm-historyItemDeletionsForeground); } .scm-view .monaco-list-row .history-item .monaco-icon-label .icon-container { diff --git a/src/vs/workbench/contrib/scm/browser/scmViewPane.ts b/src/vs/workbench/contrib/scm/browser/scmViewPane.ts index a74efbaca07cf..82093192f3c03 100644 --- a/src/vs/workbench/contrib/scm/browser/scmViewPane.ts +++ b/src/vs/workbench/contrib/scm/browser/scmViewPane.ts @@ -100,6 +100,7 @@ import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity' import { EditOperation } from 'vs/editor/common/core/editOperation'; import { stripIcons } from 'vs/base/common/iconLabels'; import { IconLabel } from 'vs/base/browser/ui/iconLabel/iconLabel'; +import { registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; // type SCMResourceTreeNode = IResourceNode; // type SCMHistoryItemChangeResourceTreeNode = IResourceNode; @@ -116,6 +117,28 @@ type TreeElement = IResourceNode | SCMViewSeparatorElement; +registerColor('scm.historyItemAdditionsForeground', { + dark: 'gitDecoration.addedResourceForeground', + light: 'gitDecoration.addedResourceForeground', + hcDark: 'gitDecoration.addedResourceForeground', + hcLight: 'gitDecoration.addedResourceForeground' +}, localize('scm.historyItemAdditionsForeground', "History item additions foreground color.")); + +registerColor('scm.historyItemDeletionsForeground', { + dark: 'gitDecoration.deletedResourceForeground', + light: 'gitDecoration.deletedResourceForeground', + hcDark: 'gitDecoration.deletedResourceForeground', + hcLight: 'gitDecoration.deletedResourceForeground' +}, localize('scm.historyItemDeletionsForeground', "History item deletions foreground color.")); + +registerColor('scm.historyItemStatisticsBorder', { + dark: transparent('foreground', 0.1), + light: transparent('foreground', 0.1), + hcDark: transparent('foreground', 0.1), + hcLight: transparent('foreground', 0.1) +}, localize('scm.historyItemStatisticsBorder', "History item statistics border color.")); + + interface ISCMLayout { height: number | undefined; width: number | undefined; @@ -735,7 +758,9 @@ interface HistoryItemTemplate { readonly iconContainer: HTMLElement; readonly label: IconLabel; readonly statsContainer: HTMLElement; - readonly statsLabel: IconLabel; + readonly filesLabel: HTMLElement; + readonly insertionsLabel: HTMLElement; + readonly deletionsLabel: HTMLElement; readonly actionBar: ActionBar; readonly elementDisposables: DisposableStore; readonly disposables: IDisposable; @@ -765,9 +790,11 @@ class HistoryItemRenderer implements ICompressibleTreeRenderer, index: number, templateData: HistoryItemTemplate, height: number | undefined): void { @@ -798,32 +825,35 @@ class HistoryItemRenderer implements ICompressibleTreeRenderer, index: number, templateData: HistoryItemTemplate, height: number | undefined): void { const historyItem = node.element; - if (historyItem.statistics?.files || historyItem.statistics?.insertions || historyItem.statistics?.deletions) { - const statsLabelTitle: string[] = []; - - const filesLabel = historyItem.statistics?.files ? `${historyItem.statistics.files}$(files)` : ''; - const insertionsLabel = historyItem.statistics?.insertions ? ` ${historyItem.statistics.insertions}$(diff-added)` : ''; - const deletionsLabel = historyItem.statistics?.deletions ? ` ${historyItem.statistics.deletions}$(diff-removed)` : ''; + if (historyItem.statistics) { + const statsAriaLabel: string[] = []; if (historyItem.statistics?.files) { const filesDescription = historyItem.statistics.files === 1 ? localize('fileChanged', "file changed") : localize('filesChanged', "files changed"); - statsLabelTitle.push(`${historyItem.statistics.files} ${filesDescription}`); + statsAriaLabel.push(`${historyItem.statistics.files} ${filesDescription}`); } if (historyItem.statistics?.insertions) { const insertionsDescription = historyItem.statistics.insertions === 1 ? localize('insertion', "insertion{0}", '(+)') : localize('insertions', "insertions{0}", '(+)'); - statsLabelTitle.push(`${historyItem.statistics.insertions} ${insertionsDescription}`); + statsAriaLabel.push(`${historyItem.statistics.insertions} ${insertionsDescription}`); } if (historyItem.statistics?.deletions) { const deletionsDescription = historyItem.statistics.deletions === 1 ? localize('deletion', "deletion{0}", '(-)') : localize('deletions', "deletions{0}", '(-)'); - statsLabelTitle.push(`${historyItem.statistics.deletions} ${deletionsDescription}`); + statsAriaLabel.push(`${historyItem.statistics.deletions} ${deletionsDescription}`); } - templateData.statsLabel.setLabel(`${filesLabel}${insertionsLabel}${deletionsLabel}`, undefined, { title: statsLabelTitle.join(', ') }); + const statsTitle = statsAriaLabel.join(', '); + templateData.statsContainer.title = statsTitle; + templateData.statsContainer.setAttribute('aria-label', statsTitle); + + templateData.filesLabel.textContent = historyItem.statistics.files > 0 ? historyItem.statistics.files.toString() : ''; + templateData.insertionsLabel.textContent = historyItem.statistics.insertions > 0 ? `+${historyItem.statistics.insertions}` : ''; + templateData.deletionsLabel.textContent = historyItem.statistics.deletions > 0 ? `-${historyItem.statistics.deletions}` : ''; + templateData.statsContainer.style.display = ''; } else { templateData.statsContainer.style.display = 'none';