Minor changes in progress bar setup so that progress bar goes to the end of a slide
This commit is contained in:
@@ -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");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user