Implement microsoft#47502

mikemathwig · Jul 23, 2018 · bacfdda · bacfdda
1 parent 0027da0
commit bacfdda
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts
@@ -183,6 +183,7 @@ export class ResourceLabel extends IconLabel {
 			title: '',
 			italic: this.options && this.options.italic,
 			matches: this.options && this.options.matches,
+			extraClasses: []
 		};
 
 		const resource = this.label.resource;

diff --git a/src/vs/workbench/browser/parts/views/customView.ts b/src/vs/workbench/browser/parts/views/customView.ts
@@ -442,7 +442,6 @@ class TreeDataSource implements IDataSource {
 }
 
 interface ITreeExplorerTemplateData {
-	label: HTMLElement;
 	resourceLabel: ResourceLabel;
 	icon: HTMLElement;
 	actionBar: ActionBar;
@@ -475,37 +474,31 @@ class TreeRenderer implements IRenderer {
 		DOM.addClass(container, 'custom-view-tree-node-item');
 
 		const icon = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon'));
-		const label = DOM.append(container, DOM.$('.custom-view-tree-node-item-label'));
 		const resourceLabel = this.instantiationService.createInstance(ResourceLabel, container, {});
-		const actionsContainer = DOM.append(container, DOM.$('.actions'));
+		DOM.addClass(resourceLabel.element, 'custom-view-tree-node-item-resourceLabel');
+		const actionsContainer = DOM.append(resourceLabel.element, DOM.$('.actions'));
 		const actionBar = new ActionBar(actionsContainer, {
 			actionItemProvider: this.actionItemProvider,
 			actionRunner: new MultipleSelectionActionRunner(() => tree.getSelection())
 		});
 
-		return { label, resourceLabel, icon, actionBar, aligner: new Aligner(container, tree, this.themeService) };
+		return { resourceLabel, icon, actionBar, aligner: new Aligner(container, tree, this.themeService) };
 	}
 
 	renderElement(tree: ITree, node: ITreeItem, templateId: string, templateData: ITreeExplorerTemplateData): void {
 		const resource = node.resourceUri ? URI.revive(node.resourceUri) : null;
 		const label = node.label ? node.label : resource ? basename(resource.path) : '';
 		const icon = this.themeService.getTheme().type === LIGHT ? node.icon : node.iconDark;
+		const title = node.tooltip ? node.tooltip : resource ? void 0 : label;
 
 		// reset
 		templateData.resourceLabel.clear();
 		templateData.actionBar.clear();
-		templateData.label.textContent = '';
-		DOM.removeClass(templateData.label, 'custom-view-tree-node-item-label');
-		DOM.removeClass(templateData.resourceLabel.element, 'custom-view-tree-node-item-resourceLabel');
 
 		if ((resource || node.themeIcon) && !icon) {
-			const title = node.tooltip ? node.tooltip : resource ? void 0 : label;
-			templateData.resourceLabel.setLabel({ name: label, resource: resource ? resource : URI.parse('_icon_resource') }, { fileKind: this.getFileKind(node), title });
-			DOM.addClass(templateData.resourceLabel.element, 'custom-view-tree-node-item-resourceLabel');
+			templateData.resourceLabel.setLabel({ name: label, resource: resource ? resource : URI.parse('_icon_resource') }, { fileKind: this.getFileKind(node), title, fileDecorations: node.decorations, extraClasses: ['custom-view-tree-node-item-resourceLabel'] });
 		} else {
-			templateData.label.textContent = label;
-			DOM.addClass(templateData.label, 'custom-view-tree-node-item-label');
-			templateData.label.title = typeof node.tooltip === 'string' ? node.tooltip : label;
+			templateData.resourceLabel.setLabel({ name: label }, { title, hideIcon: true, extraClasses: ['custom-view-tree-node-item-resourceLabel'] });
 		}
 
 		templateData.icon.style.backgroundImage = icon ? `url('${icon}')` : '';

diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css
@@ -58,6 +58,10 @@
 	display: inline-block;
 }
 
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row {
+	padding-right: 12px;
+}
+
 .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item {
 	display: flex;
 	height: 22px;
@@ -68,8 +72,7 @@
 	flex-wrap: nowrap
 }
 
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel,
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-label {
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item .custom-view-tree-node-item-resourceLabel {
 	flex: 1;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -85,18 +88,22 @@
 	-webkit-font-smoothing: antialiased;
 }
 
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .actions {
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel::after {
+	padding-right: 0px;
+}
+
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
 	display: none;
-	padding-right: 6px;
+	flex-grow: 100;
 }
 
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row:hover .custom-view-tree-node-item > .actions,
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.selected .custom-view-tree-node-item > .actions,
-.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.focused .custom-view-tree-node-item > .actions {
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row:hover .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions,
+.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.focused .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions {
 	display: block;
 }
 
-.tree-explorer-viewlet-tree-view .monaco-tree .custom-view-tree-node-item > .actions .action-label {
+.tree-explorer-viewlet-tree-view .monaco-tree .custom-view-tree-node-item > .custom-view-tree-node-item-resourceLabel > .actions .action-label {
 	width: 16px;
 	height: 100%;
 	background-position: 50% 50%;

diff --git a/src/vs/workbench/common/views.ts b/src/vs/workbench/common/views.ts
@@ -289,6 +289,11 @@ export interface ITreeItem {
 
 	children?: ITreeItem[];
 
+	decorations?: {
+		colors: boolean,
+		badges: boolean
+	};
+
 }
 
 export interface ITreeViewDataProvider {