Select current branch (#18)

* Added active style css

* Added active class for current branch

* make gitBranch field global for reuse

* push view

* Update changelog and readme and bump version to 0.1.7

CHANGELOG.md

@@ -44,4 +44,5 @@
 
 v0.1.7
 
-- Fixed branch undefined issue
+- Fixed branch undefined issue
+- Colored current branch

README.md

@@ -20,7 +20,9 @@ Extension for track your work duration on every branch
 
   ![Sidebar view](https://github.com/M97Chahboun/vscode-branch-timer/assets/69054810/2dc5fcd9-23ac-4330-8bed-69a526c8095f)
 
+- Show branches &duration percent on pie chart and selec current branch:
 
+  ![Pie Chart](https://github.com/M97Chahboun/vscode-branch-timer/assets/69054810/688e66c4-ccc9-448b-a9a4-5d010b7dfab4)
 ## Release Notes
 
 ## v0.0.1
@@ -70,4 +72,6 @@ Extension for track your work duration on every branch
 v0.1.7
 
 - Fixed branch undefined issue
+- Colored current branch
+
 ---

media/main.css

@@ -20,4 +20,8 @@ body {
 	color: #fff;
 	font-size: 12px;
 	border-radius: 4px
+}
+
+.active {
+	background-color: rgba(0, 255, 255, 0.526);
 }

package.json

@@ -2,7 +2,7 @@
   "name": "branch-timer",
   "displayName": "Branch Timer",
   "description": "Timer for every branch",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "icon": "icon.png",
   "publisher": "vscode-branch-timer",
   "engines": {

src/extension.ts

@@ -17,7 +17,7 @@ import Timer from "./timer";
 import { ColorsViewProvider } from "./view";
 
 let timer: Timer;
-let gitBranch: string | undefined;
+export let gitBranch: string | undefined;
 export let jsonPath: string | undefined;
 export var data = JSON.parse("{}");
 const workspacePath = workspace.workspaceFolders![0].uri.path;
@@ -54,10 +54,6 @@ export function activate(context: ExtensionContext) {
     fs.writeFileSync(jsonPath, JSON.stringify({}));
   }
   const provider = new ColorsViewProvider(context.extensionUri);
-
-  context.subscriptions.push(
-    window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider)
-  );
   const pattern = new RelativePattern(gitpath, "HEAD");
   const watcher = workspace.createFileSystemWatcher(pattern, false, false);
   watcher.onDidCreate((e) => {
@@ -96,6 +92,9 @@ export function activate(context: ExtensionContext) {
   context.subscriptions.push(stopTimer);
   context.subscriptions.push(copyTimer);
   context.subscriptions.push(startTimer);
+  context.subscriptions.push(
+    window.registerWebviewViewProvider(ColorsViewProvider.viewType, provider)
+  );
 }
 
 function updateBranch() {

src/view.ts

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { data } from "./extension";
+import { data, gitBranch } from "./extension";
 import { secondsToHms, zeroBase } from "./timer";
 const fs = require("fs");
 
@@ -77,7 +77,7 @@ export class ColorsViewProvider implements vscode.WebviewViewProvider {
         <svg id="chart" viewBox="0 0 100 100"></svg>
         <div id="tooltip" class="tooltip"></div>
       </div>
-      <button class="refresh-button">Refresh</button>
+      <button class="refresh-button active">Refresh</button>
       <script nonce="${nonce}" src="${scriptUri}"></script>
       <script nonce="${nonce}">
         const data = ${JSON.stringify(data)};
@@ -184,11 +184,12 @@ function buildTable() {
   for (let key in data) {
     let value = data[key];
     var t = secondsToHms(value);
-    table += ` <tr>
+    var className = gitBranch?.toString() === key ? "active" : "";
+    table += ` <tr class=${className}>
 	  <td>${key}</td>
 	  <td class="duration">${zeroBase(t.h)}:${zeroBase(t.m)}:${zeroBase(t.s)}</td>
 	  <td> ${((value / total) * 100).toFixed(2)}%</td>
-	  <td><button class="copy-button" id="${key} : ${zeroBase(t.h)}:${zeroBase(
+	  <td><button class="copy-button active" id="${key} : ${zeroBase(t.h)}:${zeroBase(
       t.m
     )}:${zeroBase(t.s)}">Copy</button></td>
 	  </tr>`;