Minor changes in progress bar setup so that progress bar goes to the end of a slide

This commit is contained in:
2025-03-10 19:48:45 +01:00
parent 213b503c65
commit 3dc463c256
+22 -6
View File
@@ -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");
});