ADDED: 0.0.5 - Label dependent icons with Gitea server label colors

CHANGELOG.md

@@ -33,7 +33,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 ## [0.0.5] - 2019-04-12
 ### Added:
 - Child items to root items. Collapsable item now shows assignee, state, id and list all labels from the issue
-- Label dependent icons
+- Label dependent icons (Automatically fetch colors)
 ### Refactored:
 - Created two methods that are used in both classes (the closed and the open issues provider)
 

README.md

@@ -16,7 +16,7 @@ When you've finished you can press the refresh button in the open issues section
 
 ![Issues with multiple colors](./media/gitea-issues.png)
 
-In order to get nice looking issueicons in multiple colors you need to assigne any issue a label called either "feature" or "bug". A bug is going to be represented as an red issue, while a feature will have a green icon. If the issue does not have got a label it will receive a grey icon. If the label is not know (so neither "feature" nor "bug" not case sensitive) it will also get a grey icon.
+In order to get nice looking issue icons in multiple colors (of your choice) you just need to assign a label to your issue. The color is being fetched automatically. If you change the color of the label however, you need to delete the `.gitea/{issuename}.svg` file in the given folder. If you skip this step, the file is not going to get updated. In most cases you need to restart visual studio code to apply the icons in the issues tab.
 ## Future
 - Implement a `Close Issue` Button
 - Create Issues via Webview

resources/light/bug.svg

@@ -1,5 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 31.5C24.5604 31.5 31.5 24.5604 31.5 16C31.5 7.43959 24.5604 0.5 16 0.5C7.43959 0.5 0.5 7.43959 0.5 16C0.5 24.5604 7.43959 31.5 16 31.5Z" stroke="#FF0000"/>
-<path d="M19 6C19 4.34315 17.6569 3 16 3C14.3431 3 13 4.34315 13 6V20C13 21.6569 14.3431 23 16 23C17.6569 23 19 21.6569 19 20V6Z" fill="#FF0000"/>
-<path d="M16.5 24H15.5C14.1193 24 13 25.1193 13 26.5C13 27.8807 14.1193 29 15.5 29H16.5C17.8807 29 19 27.8807 19 26.5C19 25.1193 17.8807 24 16.5 24Z" fill="#FF0000"/>
-</svg>

resources/light/feature.svg

@@ -1,5 +0,0 @@
-<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.5 32C25.0604 32 32 25.0604 32 16.5C32 7.93959 25.0604 1 16.5 1C7.93959 1 1 7.93959 1 16.5C1 25.0604 7.93959 32 16.5 32Z" stroke="#31CE09"/>
-<path d="M19.5 6.5C19.5 4.84315 18.1569 3.5 16.5 3.5C14.8431 3.5 13.5 4.84315 13.5 6.5V20.5C13.5 22.1569 14.8431 23.5 16.5 23.5C18.1569 23.5 19.5 22.1569 19.5 20.5V6.5Z" fill="#31CE09"/>
-<path d="M17 24.5H16C14.6193 24.5 13.5 25.6193 13.5 27C13.5 28.3807 14.6193 29.5 16 29.5H17C18.3807 29.5 19.5 28.3807 19.5 27C19.5 25.6193 18.3807 24.5 17 24.5Z" fill="#31CE09"/>
-</svg>

src/issue.ts

@@ -1,5 +1,6 @@
 import * as vscode from "vscode";
 import * as path from "path";
+import * as fs from "fs";
 
 export class Issue extends vscode.TreeItem {
 
@@ -12,6 +13,19 @@ export class Issue extends vscode.TreeItem {
         public collapsibleState: vscode.TreeItemCollapsibleState,
         public readonly command?: vscode.Command) {
         super(label, collapsibleState);
+        try {
+            for (const issueLabel of labels) {
+                const folderPath = path.join(vscode.workspace.rootPath as string, '.gitea', 'label_pictures');
+                if (!fs.existsSync(path.join(folderPath, issueLabel.name + ".svg"))) {
+                    if (!fs.existsSync(folderPath)) {
+                        fs.mkdirSync(folderPath);
+                    }
+                    fs.writeFileSync(path.join(folderPath, issueLabel.name + ".svg"), createIconWithColor(issueLabel.color));
+                }
+            }
+        } catch (e) {
+            console.log(e);
+        }
     }
 
     get tooltip() {
@@ -22,10 +36,11 @@ export class Issue extends vscode.TreeItem {
         let filename = "";
         if (this.labels.length === 0) {
             filename = "issue";
+            return path.join(__filename, '..', '..', 'media', 'issue.svg');
         } else {
-            this.labels[0].name.toLowerCase() === "feature" ? filename = "feature" : filename = this.labels[0].name.toLowerCase() === "bug" ? "bug" : "issue";
+            filename = this.labels[0].name;
+            return path.join(vscode.workspace.rootPath as string, '.gitea', 'label_pictures', this.labels[0].name + ".svg");
         }
-        return path.join(__filename, '..', '..', 'resources', dark ? 'dark' : 'light', filename + '.svg');
     }
 
     iconPath = {
@@ -35,3 +50,12 @@ export class Issue extends vscode.TreeItem {
 
     contextValue = 'issue';
 }
+
+export function createIconWithColor(color: string) {
+    return `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 31.5C24.5604 31.5 31.5 24.5604 31.5 16C31.5 7.43959 24.5604 0.5 16 0.5C7.43959 0.5 0.5 7.43959 0.5 16C0.5 24.5604 7.43959 31.5 16 31.5Z" stroke="{{color}}"/>
+<path d="M19 6C19 4.34315 17.6569 3 16 3C14.3431 3 13 4.34315 13 6V20C13 21.6569 14.3431 23 16 23C17.6569 23 19 21.6569 19 20V6Z" fill="{{color}}"/>
+<path d="M16.5 24H15.5C14.1193 24 13 25.1193 13 26.5C13 27.8807 14.1193 29 15.5 29H16.5C17.8807 29 19 27.8807 19 26.5C19 25.1193 17.8807 24 16.5 24Z" fill="{{color}}"/>
+</svg>
+`.replace(new RegExp("{{color}}", 'g'), "#" + color);
+}