Update npm scripts explorer to use codicons (ref #90911)

microsoft · Mar 5, 2020 · 573fe9e · 573fe9e
1 parent 599043c
commit 573fe9e
Show file tree

Hide file tree

Showing 15 changed files with 14 additions and 61 deletions.
diff --git a/extensions/npm/package.json b/extensions/npm/package.json
@@ -57,18 +57,12 @@
       {
         "command": "npm.runScript",
         "title": "%command.run%",
-        "icon": {
-          "light": "resources/light/continue.svg",
-          "dark": "resources/dark/continue.svg"
-        }
+        "icon": "$(run)"
       },
       {
         "command": "npm.debugScript",
         "title": "%command.debug%",
-        "icon": {
-          "light": "resources/light/debug.svg",
-          "dark": "resources/dark/debug.svg"
-        }
+        "icon": "$(debug)"
       },
       {
         "command": "npm.openScript",
@@ -81,10 +75,7 @@
       {
         "command": "npm.refresh",
         "title": "%command.refresh%",
-        "icon": {
-          "light": "resources/light/refresh.svg",
-          "dark": "resources/dark/refresh.svg"
-        }
+        "icon": "$(refresh)"
       },
       {
         "command": "npm.runSelectedScript",

diff --git a/extensions/npm/resources/dark/continue.svg b/extensions/npm/resources/dark/continue.svg
diff --git a/extensions/npm/resources/dark/debug.svg b/extensions/npm/resources/dark/debug.svg
diff --git a/extensions/npm/resources/dark/prepostscript.svg b/extensions/npm/resources/dark/prepostscript.svg
diff --git a/extensions/npm/resources/dark/refresh.svg b/extensions/npm/resources/dark/refresh.svg
diff --git a/extensions/npm/resources/dark/script.svg b/extensions/npm/resources/dark/script.svg
diff --git a/extensions/npm/resources/light/continue.svg b/extensions/npm/resources/light/continue.svg
diff --git a/extensions/npm/resources/light/debug.svg b/extensions/npm/resources/light/debug.svg
diff --git a/extensions/npm/resources/light/prepostscript.svg b/extensions/npm/resources/light/prepostscript.svg
diff --git a/extensions/npm/resources/light/refresh.svg b/extensions/npm/resources/light/refresh.svg
diff --git a/extensions/npm/resources/light/script.svg b/extensions/npm/resources/light/script.svg
diff --git a/extensions/npm/src/npmView.ts b/extensions/npm/src/npmView.ts
@@ -73,7 +73,7 @@ class NpmScript extends TreeItem {
 	task: Task;
 	package: PackageJSON;
 
-	constructor(context: ExtensionContext, packageJson: PackageJSON, task: Task) {
+	constructor(_context: ExtensionContext, packageJson: PackageJSON, task: Task) {
 		super(task.name, TreeItemCollapsibleState.None);
 		const command: ExplorerCommands = workspace.getConfiguration('npm').get<ExplorerCommands>('scriptExplorerAction') || 'open';
 
@@ -98,15 +98,9 @@ class NpmScript extends TreeItem {
 		this.command = commandList[command];
 
 		if (task.group && task.group === TaskGroup.Clean) {
-			this.iconPath = {
-				light: context.asAbsolutePath(path.join('resources', 'light', 'prepostscript.svg')),
-				dark: context.asAbsolutePath(path.join('resources', 'dark', 'prepostscript.svg'))
-			};
+			this.iconPath = new ThemeIcon('wrench-subaction');
 		} else {
-			this.iconPath = {
-				light: context.asAbsolutePath(path.join('resources', 'light', 'script.svg')),
-				dark: context.asAbsolutePath(path.join('resources', 'dark', 'script.svg'))
-			};
+			this.iconPath = new ThemeIcon('wrench');
 		}
 		if (task.detail) {
 			this.tooltip = task.detail;

diff --git a/src/vs/base/browser/ui/codiconLabel/codicon/codicon-modifications.css b/src/vs/base/browser/ui/codiconLabel/codicon/codicon-modifications.css
@@ -0,0 +1,3 @@
+.codicon-wrench-subaction {
+	opacity: 0.5;
+}
diff --git a/src/vs/base/browser/ui/codiconLabel/codiconLabel.ts b/src/vs/base/browser/ui/codiconLabel/codiconLabel.ts
@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./codicon/codicon';
+import 'vs/css!./codicon/codicon-modifications';
 import 'vs/css!./codicon/codicon-animations';
 import { escape } from 'vs/base/common/strings';
 import { renderCodicons } from 'vs/base/common/codicons';

diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css
@@ -141,6 +141,10 @@
 	margin-top: 3px;
 }
 
+.customview-tree .monaco-list .monaco-list-row.selected .custom-view-tree-node-item > .custom-view-tree-node-item-icon.codicon {
+	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 > .monaco-icon-name-container {
 	flex: 1;
 }