Skip to content

Add difficulty badge to problems in explorer tree #727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 20, 2021
Merged

Add difficulty badge to problems in explorer tree #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d09581c
Add difficulty badge to problems in explorer tree
anshkathuria Aug 20, 2021
3864dbf
Remove custom colors and rely on inbuilt colors for better theme support
anshkathuria Aug 20, 2021
96177ca
Add support to enable/disable difficulty badge and colorization
anshkathuria Aug 20, 2021
27602f8
Enable colorize problems by default, Update README with colorizeProbl…
anshkathuria Aug 20, 2021
12410ed
Bump vscode engine to 1.57.0
anshkathuria Aug 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,21 +119,23 @@ Thanks for [@yihong0618](https://github.com/yihong0618) provided a workaround wh


## Settings
| Setting Name | Description | Default Value |
| --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `leetcode.hideSolved` | Specify to hide the solved problems or not | `false` |
| `leetcode.showLocked` | Specify to show the locked problems or not. Only Premium users could open the locked problems | `false` |
| `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` |
| `leetcode.useWsl` | Specify whether to use WSL or not | `false` |
| `leetcode.endpoint` | Specify the active endpoint. Supported endpoints are: `leetcode`, `leetcode-cn` | `leetcode` |
| `leetcode.workspaceFolder` | Specify the path of the workspace folder to store the problem files. | `""` |
| `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). | |
| `leetcode.enableStatusBar` | Specify whether the LeetCode status bar will be shown or not. | `true` |
| `leetcode.editor.shortcuts` | Specify the customized shortcuts in editors. Supported values are: `submit`, `test`, `star`, `solution` and `description`. | `["submit, test"]` |
| `leetcode.enableSideMode` | Specify whether `preview`, `solution` and `submission` tab should be grouped into the second editor column when solving a problem. | `true` |
| `leetcode.nodePath` | Specify the `Node.js` executable path. for example, C:\Program Files\nodejs\node.exe | `node` |
| `leetcode.showCommentDescription` | Specify whether to include the problem description in the comments | `false` |
| `leetcode.useEndpointTranslation` | Use endpoint's translation (if available) | `true` |

| Setting Name | Description | Default Value |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
| `leetcode.hideSolved` | Specify to hide the solved problems or not | `false` |
| `leetcode.showLocked` | Specify to show the locked problems or not. Only Premium users could open the locked problems | `false` |
| `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` |
| `leetcode.useWsl` | Specify whether to use WSL or not | `false` |
| `leetcode.endpoint` | Specify the active endpoint. Supported endpoints are: `leetcode`, `leetcode-cn` | `leetcode` |
| `leetcode.workspaceFolder` | Specify the path of the workspace folder to store the problem files. | `""` |
| `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). | |
| `leetcode.enableStatusBar` | Specify whether the LeetCode status bar will be shown or not. | `true` |
| `leetcode.editor.shortcuts` | Specify the customized shortcuts in editors. Supported values are: `submit`, `test`, `star`, `solution` and `description`. | `["submit, test"]` |
| `leetcode.enableSideMode` | Specify whether `preview`, `solution` and `submission` tab should be grouped into the second editor column when solving a problem. | `true` |
| `leetcode.nodePath` | Specify the `Node.js` executable path. for example, C:\Program Files\nodejs\node.exe | `node` |
| `leetcode.showCommentDescription` | Specify whether to include the problem description in the comments | `false` |
| `leetcode.useEndpointTranslation` | Use endpoint's translation (if available) | `true` |
| `leetcode.colorizeProblems` | Add difficulty badge and colorize problems files in explorer tree | `true` |

## Want Help?

Expand Down
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 8 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"license": "MIT",
"icon": "resources/LeetCode.png",
"engines": {
"vscode": "^1.50.0"
"vscode": "^1.57.0"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -671,6 +671,12 @@
"default": "node",
"scope": "application",
"description": "The Node.js executable path. for example, C:\\Program Files\\nodejs\\node.exe"
},
"leetcode.colorizeProblems": {
"type": "boolean",
"default": true,
"scope": "application",
"description": "Add difficulty badge and colorize problems files in explorer tree."
}
}
}
Expand All @@ -689,7 +695,7 @@
"@types/mocha": "^2.2.42",
"@types/node": "^14.14.33",
"@types/require-from-string": "^1.2.0",
"@types/vscode": "1.50.0",
"@types/vscode": "1.57.0",
"tslint": "^5.20.1",
"typescript": "^4.3.2"
},
Expand Down
11 changes: 10 additions & 1 deletion src/explorer/LeetCodeNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Copyright (c) jdneo. All rights reserved.
// Licensed under the MIT license.

import { Command } from "vscode";
import { Command, Uri } from "vscode";
import { IProblem, ProblemState } from "../shared";

export class LeetCodeNode {
Expand Down Expand Up @@ -55,4 +55,13 @@ export class LeetCodeNode {
};
}

public get uri(): Uri {
return Uri.from({
scheme: "leetcode",
authority: this.isProblem ? "problems" : "tree-node",
path: `/${this.id}`, // path must begin with slash /
query: `difficulty=${this.difficulty}`,
});
}

}
1 change: 1 addition & 0 deletions src/explorer/LeetCodeTreeDataProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
collapsibleState: element.isProblem ? vscode.TreeItemCollapsibleState.None : vscode.TreeItemCollapsibleState.Collapsed,
iconPath: this.parseIconPathFromProblemState(element),
command: element.isProblem ? element.previewCommand : undefined,
resourceUri: element.uri,
contextValue,
};
}
Expand Down
40 changes: 40 additions & 0 deletions src/explorer/LeetCodeTreeItemDecorationProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { URLSearchParams } from "url";
import { FileDecoration, FileDecorationProvider, ProviderResult, ThemeColor, Uri, workspace, WorkspaceConfiguration } from "vscode";

export class LeetCodeTreeItemDecorationProvider implements FileDecorationProvider {
private readonly DIFFICULTY_BADGE_LABEL: { [key: string]: string } = {
easy: "E",
medium: "M",
hard: "H",
};

private readonly ITEM_COLOR: { [key: string]: ThemeColor } = {
easy: new ThemeColor("charts.green"),
medium: new ThemeColor("charts.yellow"),
hard: new ThemeColor("charts.red"),
};

public provideFileDecoration(uri: Uri): ProviderResult<FileDecoration> {
if (!this.isDifficultyBadgeEnabled()) {
return;
}

if (uri.scheme !== "leetcode" && uri.authority !== "problems") {
return;
}

const params: URLSearchParams = new URLSearchParams(uri.query);
const difficulty: string = params.get("difficulty")!.toLowerCase();
return {
badge: this.DIFFICULTY_BADGE_LABEL[difficulty],
color: this.ITEM_COLOR[difficulty],
};
}

private isDifficultyBadgeEnabled(): boolean {
const configuration: WorkspaceConfiguration = workspace.getConfiguration();
return configuration.get<boolean>("leetcode.colorizeProblems", false);
}
}

export const leetCodeTreeItemDecorationProvider: LeetCodeTreeItemDecorationProvider = new LeetCodeTreeItemDecorationProvider();
2 changes: 2 additions & 0 deletions src/extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import * as test from "./commands/test";
import { explorerNodeManager } from "./explorer/explorerNodeManager";
import { LeetCodeNode } from "./explorer/LeetCodeNode";
import { leetCodeTreeDataProvider } from "./explorer/LeetCodeTreeDataProvider";
import { leetCodeTreeItemDecorationProvider } from "./explorer/LeetCodeTreeItemDecorationProvider";
import { leetCodeChannel } from "./leetCodeChannel";
import { leetCodeExecutor } from "./leetCodeExecutor";
import { leetCodeManager } from "./leetCodeManager";
Expand Down Expand Up @@ -47,6 +48,7 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
markdownEngine,
codeLensController,
explorerNodeManager,
vscode.window.registerFileDecorationProvider(leetCodeTreeItemDecorationProvider),
vscode.window.createTreeView("leetCodeExplorer", { treeDataProvider: leetCodeTreeDataProvider, showCollapseAll: true }),
vscode.commands.registerCommand("leetcode.deleteCache", () => cache.deleteCache()),
vscode.commands.registerCommand("leetcode.toggleLeetCodeCn", () => plugin.switchEndpoint()),
Expand Down