SCM - fix text overflow for incoming/outgoing labels (#198663)

This commit is contained in:
Ladislau Szomoru
2023-11-20 11:21:30 +01:00
committed by GitHub
parent 356784e05f
commit 3671d15744
4 changed files with 21 additions and 37 deletions
+7 -19
View File
@@ -7,7 +7,7 @@ import { URI, UriComponents } from 'vs/base/common/uri';
import { Event, Emitter } from 'vs/base/common/event';
import { IDisposable, DisposableStore, combinedDisposable, dispose, DisposableMap } from 'vs/base/common/lifecycle';
import { ISCMService, ISCMRepository, ISCMProvider, ISCMResource, ISCMResourceGroup, ISCMResourceDecorations, IInputValidation, ISCMViewService, InputValidationType, ISCMActionButtonDescriptor, ISCMInputValueProvider, ISCMInputValueProviderContext } from 'vs/workbench/contrib/scm/common/scm';
import { ExtHostContext, MainThreadSCMShape, ExtHostSCMShape, SCMProviderFeatures, SCMRawResourceSplices, SCMGroupFeatures, MainContext, SCMHistoryItemDto, SCMActionButtonDto, SCMHistoryItemGroupDto, SCMInputActionButtonDto } from '../common/extHost.protocol';
import { ExtHostContext, MainThreadSCMShape, ExtHostSCMShape, SCMProviderFeatures, SCMRawResourceSplices, SCMGroupFeatures, MainContext, SCMActionButtonDto, SCMHistoryItemGroupDto, SCMInputActionButtonDto } from '../common/extHost.protocol';
import { Command } from 'vs/editor/common/languages';
import { extHostNamedCustomer, IExtHostContext } from 'vs/workbench/services/extensions/common/extHostCustomers';
import { CancellationToken } from 'vs/base/common/cancellation';
@@ -18,6 +18,7 @@ import { IQuickDiffService, QuickDiffProvider } from 'vs/workbench/contrib/scm/c
import { ISCMHistoryItem, ISCMHistoryItemChange, ISCMHistoryItemGroup, ISCMHistoryItemGroupDetails, ISCMHistoryItemGroupEntry, ISCMHistoryOptions, ISCMHistoryProvider } from 'vs/workbench/contrib/scm/common/history';
import { ResourceTree } from 'vs/base/common/resourceTree';
import { IUriIdentityService } from 'vs/platform/uriIdentity/common/uriIdentity';
import { Codicon } from 'vs/base/common/codicons';
function getSCMInputBoxActionButtonIcon(actionButton: SCMInputActionButtonDto): URI | { light: URI; dark: URI } | ThemeIcon | undefined {
if (!actionButton.icon) {
@@ -32,19 +33,6 @@ function getSCMInputBoxActionButtonIcon(actionButton: SCMInputActionButtonDto):
}
}
function getSCMHistoryItemIcon(historyItem: SCMHistoryItemDto): URI | { light: URI; dark: URI } | ThemeIcon | undefined {
if (!historyItem.icon) {
return undefined;
} else if (URI.isUri(historyItem.icon)) {
return URI.revive(historyItem.icon);
} else if (ThemeIcon.isThemeIcon(historyItem.icon)) {
return historyItem.icon;
} else {
const icon = historyItem.icon as { light: UriComponents; dark: UriComponents };
return { light: URI.revive(icon.light), dark: URI.revive(icon.dark) };
}
}
function getIconFromIconDto(iconDto?: UriComponents | { light: UriComponents; dark: UriComponents } | ThemeIcon): URI | { light: URI; dark: URI } | ThemeIcon | undefined {
if (iconDto === undefined) {
return undefined;
@@ -184,8 +172,8 @@ class MainThreadSCMHistoryProvider implements ISCMHistoryProvider {
if (historyItemGroupBase) {
incoming = {
id: historyItemGroupBase.id,
label: `$(cloud-download) ${historyItemGroupBase.label}`,
// description: localize('incoming', "Incoming Changes"),
label: historyItemGroupBase.label,
icon: Codicon.cloudDownload,
ancestor: ancestor?.id,
count: ancestor?.behind ?? 0,
};
@@ -194,8 +182,8 @@ class MainThreadSCMHistoryProvider implements ISCMHistoryProvider {
// Outgoing
const outgoing: ISCMHistoryItemGroupEntry = {
id: historyItemGroup.id,
label: `$(cloud-upload) ${historyItemGroup.label}`,
// description: localize('outgoing', "Outgoing Changes"),
label: historyItemGroup.label,
icon: Codicon.cloudUpload,
ancestor: ancestor?.id,
count: ancestor?.ahead ?? 0,
};
@@ -213,7 +201,7 @@ class MainThreadSCMHistoryProvider implements ISCMHistoryProvider {
async provideHistoryItems(historyItemGroupId: string, options: ISCMHistoryOptions): Promise<ISCMHistoryItem[] | undefined> {
const historyItems = await this.proxy.$provideHistoryItems(this.handle, historyItemGroupId, options, CancellationToken.None);
return historyItems?.map(historyItem => ({ ...historyItem, icon: getSCMHistoryItemIcon(historyItem), }));
return historyItems?.map(historyItem => ({ ...historyItem, icon: getIconFromIconDto(historyItem.icon) }));
}
async provideHistoryItemChanges(historyItemId: string): Promise<ISCMHistoryItemChange[] | undefined> {
@@ -118,25 +118,12 @@
align-items: center;
}
.scm-view .monaco-list-row .history-item-group .monaco-highlighted-label {
display: flex;
align-items: center;
}
.scm-view .monaco-list-row .history-item-group .monaco-icon-label,
.scm-view .monaco-list-row .history-item .monaco-icon-label {
flex-grow: 1;
align-items: center;
}
.scm-view .monaco-list-row .history-item-group .monaco-icon-label > .monaco-icon-label-container {
display: flex;
}
.scm-view .monaco-list-row .history-item-group .monaco-icon-label > .monaco-icon-label-container .monaco-icon-description-container {
overflow: hidden;
text-overflow: ellipsis;
}
.scm-sync-view .monaco-list-row .monaco-icon-label .icon-container
.scm-sync-view .monaco-list-row .monaco-icon-label .icon-container {
display: flex;
@@ -185,6 +172,7 @@
color: var(--vscode-scm-historyItemDeletionsForeground);
}
.scm-view .monaco-list-row .history-item-group .monaco-icon-label .icon-container,
.scm-view .monaco-list-row .history-item .monaco-icon-label .icon-container {
display: flex;
font-size: 14px;
@@ -726,6 +726,7 @@ class ResourceRenderer implements ICompressibleTreeRenderer<ISCMResource | IReso
}
interface HistoryItemGroupTemplate {
readonly iconContainer: HTMLElement;
readonly label: IconLabel;
readonly count: CountBadge;
readonly disposables: IDisposable;
@@ -741,15 +742,24 @@ class HistoryItemGroupRenderer implements ICompressibleTreeRenderer<SCMHistoryIt
(container.parentElement!.parentElement!.querySelector('.monaco-tl-twistie')! as HTMLElement).classList.add('force-twistie');
const element = append(container, $('.history-item-group'));
const label = new IconLabel(element, { supportIcons: true });
const iconContainer = prepend(label.element, $('.icon-container'));
const countContainer = append(element, $('.count'));
const count = new CountBadge(countContainer, {}, defaultCountBadgeStyles);
return { label, count, disposables: new DisposableStore() };
return { iconContainer, label, count, disposables: new DisposableStore() };
}
renderElement(node: ITreeNode<SCMHistoryItemGroupTreeElement>, index: number, templateData: HistoryItemGroupTemplate, height: number | undefined): void {
const historyItemGroup = node.element;
templateData.iconContainer.className = 'icon-container';
if (historyItemGroup.icon && ThemeIcon.isThemeIcon(historyItemGroup.icon)) {
templateData.iconContainer.classList.add(...ThemeIcon.asClassNameArray(historyItemGroup.icon));
}
templateData.label.setLabel(historyItemGroup.label, historyItemGroup.description);
templateData.count.setCount(historyItemGroup.count ?? 0);
}
@@ -61,15 +61,13 @@ export interface ISCMHistoryItemGroupDetails {
export interface ISCMHistoryItemGroupEntry {
readonly id: string;
readonly label: string;
readonly icon?: URI | { light: URI; dark: URI } | ThemeIcon;
readonly description?: string;
readonly ancestor?: string;
readonly count?: number;
}
export interface SCMHistoryItemGroupTreeElement extends ISCMHistoryItemGroup {
readonly description?: string;
readonly ancestor?: string;
readonly count?: number;
export interface SCMHistoryItemGroupTreeElement extends ISCMHistoryItemGroupEntry {
readonly repository: ISCMRepository;
readonly type: 'historyItemGroup';
}