Skip to content

Commit e93bb6e

Browse files
anshkathuriaanshkathuria
authored
feat: Add difficulty badge to problems in explorer tree (LeetCode-OpenSource#727)
1 parent adf255c commit e93bb6e

7 files changed

+81
-21
lines changed

‎README.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -119,21 +119,23 @@ Thanks for [@yihong0618](https://github.com/yihong0618) provided a workaround wh
119119

120120

121121
## Settings
122-
| Setting Name | Description | Default Value |
123-
| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
124-
| `leetcode.hideSolved` | Specify to hide the solved problems or not | `false` |
125-
| `leetcode.showLocked` | Specify to show the locked problems or not. Only Premium users could open the locked problems | `false` |
126-
| `leetcode.defaultLanguage` | Specify the default language used to solve the problem. Supported languages are: `bash`, `c`, `cpp`, `csharp`, `golang`, `java`, `javascript`, `kotlin`, `mysql`, `php`, `python`,`python3`,`ruby`,`rust`, `scala`, `swift`, `typescript` | `N/A` |
127-
| `leetcode.useWsl` | Specify whether to use WSL or not | `false` |
128-
| `leetcode.endpoint` | Specify the active endpoint. Supported endpoints are: `leetcode`, `leetcode-cn` | `leetcode` |
129-
| `leetcode.workspaceFolder` | Specify the path of the workspace folder to store the problem files. | `""` |
130-
| `leetcode.filePath` | Specify the relative path under the workspace and the file name to save the problem files. More details can be found [here](https://github.com/LeetCode-OpenSource/vscode-leetcode/wiki/Customize-the-Relative-Folder-and-the-File-Name-of-the-Problem-File). | |
131-
| `leetcode.enableStatusBar` | Specify whether the LeetCode status bar will be shown or not. | `true` |
132-
| `leetcode.editor.shortcuts` | Specify the customized shortcuts in editors. Supported values are: `submit`, `test`, `star`, `solution` and `description`. | `["submit, test"]` |
133-
| `leetcode.enableSideMode` | Specify whether `preview`, `solution` and `submission` tab should be grouped into the second editor column when solving a problem. | `true` |
134-
| `leetcode.nodePath` | Specify the `Node.js` executable path. for example, C:\Program Files\nodejs\node.exe | `node` |
135-
| `leetcode.showCommentDescription` | Specify whether to include the problem description in the comments | `false` |
136-
| `leetcode.useEndpointTranslation` | Use endpoint's translation (if available) | `true` |
122+
123+
| Setting Name | Description | Default Value |
124+
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
125+
| `leetcode.hideSolved` | Specify to hide the solved problems or not | `false` |
126+
| `leetcode.showLocked` | Specify to show the locked problems or not. Only Premium users could open the locked problems | `false` |
127+
| `leetcode.defaultLanguage` | Specify the default language used to solve the problem. Supported languages are: `bash`, `c`, `cpp`, `csharp`, `golang`, `java`, `javascript`, `kotlin`, `mysql`, `php`, `python`,`python3`,`ruby`,`rust`, `scala`, `swift`, `typescript` | `N/A` |
128+
| `leetcode.useWsl` | Specify whether to use WSL or not | `false` |
129+
| `leetcode.endpoint` | Specify the active endpoint. Supported endpoints are: `leetcode`, `leetcode-cn` | `leetcode` |
130+
| `leetcode.workspaceFolder` | Specify the path of the workspace folder to store the problem files. | `""` |
131+
| `leetcode.filePath` | Specify the relative path under the workspace and the file name to save the problem files. More details can be found [here](https://github.com/LeetCode-OpenSource/vscode-leetcode/wiki/Customize-the-Relative-Folder-and-the-File-Name-of-the-Problem-File). | |
132+
| `leetcode.enableStatusBar` | Specify whether the LeetCode status bar will be shown or not. | `true` |
133+
| `leetcode.editor.shortcuts` | Specify the customized shortcuts in editors. Supported values are: `submit`, `test`, `star`, `solution` and `description`. | `["submit, test"]` |
134+
| `leetcode.enableSideMode` | Specify whether `preview`, `solution` and `submission` tab should be grouped into the second editor column when solving a problem. | `true` |
135+
| `leetcode.nodePath` | Specify the `Node.js` executable path. for example, C:\Program Files\nodejs\node.exe | `node` |
136+
| `leetcode.showCommentDescription` | Specify whether to include the problem description in the comments | `false` |
137+
| `leetcode.useEndpointTranslation` | Use endpoint's translation (if available) | `true` |
138+
| `leetcode.colorizeProblems` | Add difficulty badge and colorize problems files in explorer tree | `true` |
137139

138140
## Want Help?
139141

‎package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"license": "MIT",
99
"icon": "resources/LeetCode.png",
1010
"engines": {
11-
"vscode": "^1.50.0"
11+
"vscode": "^1.57.0"
1212
},
1313
"repository": {
1414
"type": "git",
@@ -671,6 +671,12 @@
671671
"default": "node",
672672
"scope": "application",
673673
"description": "The Node.js executable path. for example, C:\\Program Files\\nodejs\\node.exe"
674+
},
675+
"leetcode.colorizeProblems": {
676+
"type": "boolean",
677+
"default": true,
678+
"scope": "application",
679+
"description": "Add difficulty badge and colorize problems files in explorer tree."
674680
}
675681
}
676682
}
@@ -689,7 +695,7 @@
689695
"@types/mocha": "^2.2.42",
690696
"@types/node": "^14.14.33",
691697
"@types/require-from-string": "^1.2.0",
692-
"@types/vscode": "1.50.0",
698+
"@types/vscode": "1.57.0",
693699
"tslint": "^5.20.1",
694700
"typescript": "^4.3.2"
695701
},

‎src/explorer/LeetCodeNode.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright (c) jdneo. All rights reserved.
22
// Licensed under the MIT license.
33

4-
import { Command } from "vscode";
4+
import { Command, Uri } from "vscode";
55
import { IProblem, ProblemState } from "../shared";
66

77
export class LeetCodeNode {
@@ -55,4 +55,13 @@ export class LeetCodeNode {
5555
};
5656
}
5757

58+
public get uri(): Uri {
59+
return Uri.from({
60+
scheme: "leetcode",
61+
authority: this.isProblem ? "problems" : "tree-node",
62+
path: `/${this.id}`, // path must begin with slash /
63+
query: `difficulty=${this.difficulty}`,
64+
});
65+
}
66+
5867
}

‎src/explorer/LeetCodeTreeDataProvider.ts

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
5151
collapsibleState: element.isProblem ? vscode.TreeItemCollapsibleState.None : vscode.TreeItemCollapsibleState.Collapsed,
5252
iconPath: this.parseIconPathFromProblemState(element),
5353
command: element.isProblem ? element.previewCommand : undefined,
54+
resourceUri: element.uri,
5455
contextValue,
5556
};
5657
}

‎src/explorer/LeetCodeTreeItemDecorationProvider.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { URLSearchParams } from "url";
2+
import { FileDecoration, FileDecorationProvider, ProviderResult, ThemeColor, Uri, workspace, WorkspaceConfiguration } from "vscode";
3+
4+
export class LeetCodeTreeItemDecorationProvider implements FileDecorationProvider {
5+
private readonly DIFFICULTY_BADGE_LABEL: { [key: string]: string } = {
6+
easy: "E",
7+
medium: "M",
8+
hard: "H",
9+
};
10+
11+
private readonly ITEM_COLOR: { [key: string]: ThemeColor } = {
12+
easy: new ThemeColor("charts.green"),
13+
medium: new ThemeColor("charts.yellow"),
14+
hard: new ThemeColor("charts.red"),
15+
};
16+
17+
public provideFileDecoration(uri: Uri): ProviderResult<FileDecoration> {
18+
if (!this.isDifficultyBadgeEnabled()) {
19+
return;
20+
}
21+
22+
if (uri.scheme !== "leetcode" && uri.authority !== "problems") {
23+
return;
24+
}
25+
26+
const params: URLSearchParams = new URLSearchParams(uri.query);
27+
const difficulty: string = params.get("difficulty")!.toLowerCase();
28+
return {
29+
badge: this.DIFFICULTY_BADGE_LABEL[difficulty],
30+
color: this.ITEM_COLOR[difficulty],
31+
};
32+
}
33+
34+
private isDifficultyBadgeEnabled(): boolean {
35+
const configuration: WorkspaceConfiguration = workspace.getConfiguration();
36+
return configuration.get<boolean>("leetcode.colorizeProblems", false);
37+
}
38+
}
39+
40+
export const leetCodeTreeItemDecorationProvider: LeetCodeTreeItemDecorationProvider = new LeetCodeTreeItemDecorationProvider();

‎src/extension.ts

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import * as test from "./commands/test";
1414
import { explorerNodeManager } from "./explorer/explorerNodeManager";
1515
import { LeetCodeNode } from "./explorer/LeetCodeNode";
1616
import { leetCodeTreeDataProvider } from "./explorer/LeetCodeTreeDataProvider";
17+
import { leetCodeTreeItemDecorationProvider } from "./explorer/LeetCodeTreeItemDecorationProvider";
1718
import { leetCodeChannel } from "./leetCodeChannel";
1819
import { leetCodeExecutor } from "./leetCodeExecutor";
1920
import { leetCodeManager } from "./leetCodeManager";
@@ -47,6 +48,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
4748
markdownEngine,
4849
codeLensController,
4950
explorerNodeManager,
51+
vscode.window.registerFileDecorationProvider(leetCodeTreeItemDecorationProvider),
5052
vscode.window.createTreeView("leetCodeExplorer", { treeDataProvider: leetCodeTreeDataProvider, showCollapseAll: true }),
5153
vscode.commands.registerCommand("leetcode.deleteCache", () => cache.deleteCache()),
5254
vscode.commands.registerCommand("leetcode.toggleLeetCodeCn", () => plugin.switchEndpoint()),

0 commit comments

Comments
 (0)