diff --git a/src/vs/workbench/api/common/extHost.api.impl.ts b/src/vs/workbench/api/common/extHost.api.impl.ts index 690e0ef0479a0..6b0219acdcbaa 100644 --- a/src/vs/workbench/api/common/extHost.api.impl.ts +++ b/src/vs/workbench/api/common/extHost.api.impl.ts @@ -1763,6 +1763,7 @@ export function createApiFactoryAndRegisterActors(accessor: ServicesAccessor): I TextDocumentChangeReason: extHostTypes.TextDocumentChangeReason, ThemeColor: extHostTypes.ThemeColor, ThemeIcon: extHostTypes.ThemeIcon, + TreeItemAlignment: extHostTypes.TreeItemAlignment, TreeItem: extHostTypes.TreeItem, TreeItemCheckboxState: extHostTypes.TreeItemCheckboxState, TreeItemCollapsibleState: extHostTypes.TreeItemCollapsibleState, diff --git a/src/vs/workbench/api/common/extHostTreeViews.ts b/src/vs/workbench/api/common/extHostTreeViews.ts index b7e09f40a5b2b..bbfd373404720 100644 --- a/src/vs/workbench/api/common/extHostTreeViews.ts +++ b/src/vs/workbench/api/common/extHostTreeViews.ts @@ -843,6 +843,7 @@ class ExtHostTreeView extends Disposable { parentHandle: parent ? parent.item.handle : undefined, label: toTreeItemLabel(extensionTreeItem.label, this._extension), description: extensionTreeItem.description, + alignment: extensionTreeItem.alignment, resourceUri: extensionTreeItem.resourceUri, tooltip: this._getTooltip(extensionTreeItem.tooltip), command: this._getCommand(disposableStore, extensionTreeItem.command), diff --git a/src/vs/workbench/api/common/extHostTypes.ts b/src/vs/workbench/api/common/extHostTypes.ts index 34760e54c7bf0..8cb1d5bdf6f54 100644 --- a/src/vs/workbench/api/common/extHostTypes.ts +++ b/src/vs/workbench/api/common/extHostTypes.ts @@ -1571,6 +1571,11 @@ export namespace ViewBadge { } } +export enum TreeItemAlignment { + Left = 'left', + Right = 'right' +} + @es5ClassCompat export class TreeItem { @@ -1618,6 +1623,10 @@ export class TreeItem { console.log('INVALID tree item, invalid description', treeItemThing.description); return false; } + if ((treeItemThing.alignment !== undefined) && (treeItemThing.alignment !== 'left') && (treeItemThing.alignment !== 'right')) { + console.log('INVALID tree item, invalid alignment', treeItemThing.alignment); + return false; + } if ((treeItemThing.resourceUri !== undefined) && !URI.isUri(treeItemThing.resourceUri)) { console.log('INVALID tree item, invalid resourceUri', treeItemThing.resourceUri); return false; diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css index 9111b05e6b9ec..0bdf6674d2988 100644 --- a/src/vs/workbench/browser/parts/views/media/views.css +++ b/src/vs/workbench/browser/parts/views/media/views.css @@ -217,10 +217,29 @@ color: currentColor !important; } +.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel .monaco-icon-label-container { + display: flex; +} + .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel .monaco-icon-label-container > .monaco-icon-name-container { flex: 1; } +.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-name-container { + overflow: hidden; + text-overflow: ellipsis; +} + +.customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container { + float: right; +} + +.customview-tree .monaco-list .monaco-list-row:hover .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container, +.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container, +.customview-tree .monaco-list .monaco-list-row.focused .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel.custom-view-tree-node-item-right .monaco-icon-description-container { + display: none; +} + .customview-tree .monaco-list .monaco-list-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel::after { padding-right: 0px; margin-right: 4px; diff --git a/src/vs/workbench/browser/parts/views/treeView.ts b/src/vs/workbench/browser/parts/views/treeView.ts index f150c09299e99..c70f2e17fb67f 100644 --- a/src/vs/workbench/browser/parts/views/treeView.ts +++ b/src/vs/workbench/browser/parts/views/treeView.ts @@ -1330,6 +1330,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer { if (start < 0) { @@ -1363,6 +1364,12 @@ class TreeRenderer extends Disposable implements ITreeRenderer('explorer.decorations'); const labelResource = resource ? resource : URI.parse('missing:_icon_resource'); @@ -1371,7 +1378,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer; } + /** + * Represents the alignment of TreeView items. + */ + export enum TreeItemAlignment { + + /** + * Aligned to the left side. + */ + Left = 'left', + + /** + * Aligned to the right side. + */ + Right = 'right' + } + /** * A tree item is an UI element of the tree. Tree items are created by the {@link TreeDataProvider data provider}. */ @@ -12257,6 +12273,13 @@ declare module 'vscode' { */ description?: string | boolean; + /** + * The horizontal alignment of the {@link TreeItem.description description} text. + * When `right`, the text with be right-aligned and when `left`, it is left-aligned. + * Defaults to `Left` + */ + alignment?: TreeItemAlignment; + /** * The {@link Uri} of the resource representing this item. *