Add progress bar for viewed files (#70)

caponetto · Jan 21, 2023 · 379d216 · 379d216
1 parent 0b103b2
commit 379d216
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/src/extension/skeleton.ts b/src/extension/skeleton.ts
@@ -20,6 +20,9 @@ export const buildSkeleton = (webviewUri: vscode.Uri) => `
   <div id="${SkeletonElementIds.DiffContainer}"></div>
   <footer>
     <span id="${SkeletonElementIds.ViewedIndicator}"></span>
+    <div id="${SkeletonElementIds.ViewedProgressContainer}">
+      <div id="${SkeletonElementIds.ViewedProgress}"></div>
+    </div>
     <label id="${SkeletonElementIds.MarkAllViewedContainer}">
       <input id="${SkeletonElementIds.MarkAllViewedCheckbox}" type="checkbox" name="mark-all-as-viewed">
         Mark all as viewed

diff --git a/src/shared/css/elements.ts b/src/shared/css/elements.ts
@@ -5,4 +5,6 @@ export enum SkeletonElementIds {
   MarkAllViewedContainer = "mark-all-viewed-container",
   MarkAllViewedCheckbox = "mark-all-viewed-checkbox",
   ViewedIndicator = "viewed-indicator",
+  ViewedProgressContainer = "viewed-progress-container",
+  ViewedProgress = "viewed-progress",
 }
diff --git a/src/webview/css/static/app.css b/src/webview/css/static/app.css
@@ -16,13 +16,13 @@ body * {
 
 body footer {
   position: sticky;
-  bottom: 2px;
+  bottom: 0px;
   padding: 6px 8px 4px 8px;
   border-top: 1px solid #eee;
   margin-top: auto;
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: center;
   justify-content: flex-end;
   background-color: white !important;
   z-index: 1;
@@ -33,6 +33,22 @@ body footer {
   margin-right: 8px;
 }
 
+#viewed-progress-container {
+  height: 12px;
+  width: 128px;
+  margin-right: 8px;
+  border-radius: 3px;
+  background: lightgray;
+}
+
+#viewed-progress {
+  height: 100%;
+  width: 0;
+  border-radius: 3px;
+  background: #1f6fea;
+  transition: width 0.4s ease;
+}
+
 #mark-all-viewed-container {
   user-select: none;
   display: flex;

diff --git a/src/webview/message/handler.ts b/src/webview/message/handler.ts
@@ -124,6 +124,12 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     const viewedCount = this.getViewedCount();
     indicator.textContent = `${viewedCount} / ${allCount} files viewed`;
 
+    const viewedProgressBar = document.getElementById(SkeletonElementIds.ViewedProgress);
+    if (viewedProgressBar) {
+      const progressPercentage = Math.round((viewedCount / allCount) * 100);
+      viewedProgressBar.style.width = `${progressPercentage}%`;
+    }
+
     const markAllViewedCheckbox = document.getElementById(SkeletonElementIds.MarkAllViewedCheckbox) as HTMLInputElement;
     if (!markAllViewedCheckbox) {
       return;