From 3dc463c256dfc730872c9aaf2614a207d1fbd34b Mon Sep 17 00:00:00 2001
From: Heiko Joerg Schick <info@schihei.de>
Date: Mon, 10 Mar 2025 19:48:45 +0100
Subject: [PATCH] Minor changes in progress bar setup so that progress bar goes
 to the end of a slide

---
 .../components/ProgressBarButtons.tsx         | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/taskpane/components/ProgressBarButtons.tsx b/src/taskpane/components/ProgressBarButtons.tsx
index 43abc333..b00dd35f 100644
--- a/src/taskpane/components/ProgressBarButtons.tsx
+++ b/src/taskpane/components/ProgressBarButtons.tsx
@@ -91,18 +91,20 @@ export const ProgressBarButtons: React.FC = () => {
             
             // Add progress bar segments to this slide
             for (let j = 0; j < slideCount; j++) {
-              // Create line for this segment
+              // Create line for this segment with a small overlap to prevent gaps
+              const overlap = 0.5; // Small overlap to ensure no gaps between segments
               const startX = j * segmentWidth;
-              const endX = (j + 1) * segmentWidth - segmentGap;
+              const endX = (j + 1) * segmentWidth;
               
               // Create a rectangle with minimal height to simulate a line
               // since proper line creation is challenging with the Office JS API
               const line = slide.shapes.addGeometricShape("Rectangle");
               
               // Set the rectangle's position to look like a line
-              line.left = startX;
+              // Adding a tiny bit of overlap to ensure no gaps
+              line.left = startX - (j > 0 ? overlap : 0); // Overlap with previous segment except for first
               line.top = startY;
-              line.width = endX - startX;
+              line.width = (endX - startX) + (j > 0 ? overlap : 0) + (j < slideCount - 1 ? overlap : 0);
               line.height = progressBarHeight; // Very small height
               
               // Set fill color based on progress instead of line color
@@ -110,9 +112,21 @@ export const ProgressBarButtons: React.FC = () => {
               if (j <= i) {
                 // Blue for progressed segments (RGB 32, 81, 112)
                 line.fill.setSolidColor("#205170");
+                
+                // Make the current slide indicator (last blue segment) slightly more prominent
+                if (j == i) {
+                  // Make it wider and taller for emphasis
+                  line.width += 1; // Add extra width
+                }
               } else {
                 // Grey for segments not yet progressed (RGB 242, 242, 242)
                 line.fill.setSolidColor("#F2F2F2");
+
+                // Make the current slide indicator (last blue segment) slightly more prominent
+                if (j == i) {
+                  // Make it wider and taller for emphasis
+                  line.width += 1; // Add extra width
+                }
               }
               
               // Remove the border/outline entirely
@@ -181,9 +195,11 @@ export const ProgressBarButtons: React.FC = () => {
         await context.sync();
         
         if (removedCount > 0) {
-          setStatusMessage(`Removed ${removedCount} progress bar elements from slides.`);
+          // setStatusMessage(`Removed ${removedCount} progress bar elements from slides.`);
+          // Added progress bar to slides.
+          setStatusMessage(`Removed progress bar from slides.`);
         } else {
-          setStatusMessage("No progress bar elements found to remove.");
+          setStatusMessage("No progress bar found to remove.");
         }
         setStatusType("success");
       });