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
|
// Add progress bar segments to this slide
|
||||||
for (let j = 0; j < slideCount; j++) {
|
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 startX = j * segmentWidth;
|
||||||
const endX = (j + 1) * segmentWidth - segmentGap;
|
const endX = (j + 1) * segmentWidth;
|
||||||
|
|
||||||
// Create a rectangle with minimal height to simulate a line
|
// Create a rectangle with minimal height to simulate a line
|
||||||
// since proper line creation is challenging with the Office JS API
|
// since proper line creation is challenging with the Office JS API
|
||||||
const line = slide.shapes.addGeometricShape("Rectangle");
|
const line = slide.shapes.addGeometricShape("Rectangle");
|
||||||
|
|
||||||
// Set the rectangle's position to look like a line
|
// 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.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
|
line.height = progressBarHeight; // Very small height
|
||||||
|
|
||||||
// Set fill color based on progress instead of line color
|
// Set fill color based on progress instead of line color
|
||||||
@@ -110,9 +112,21 @@ export const ProgressBarButtons: React.FC = () => {
|
|||||||
if (j <= i) {
|
if (j <= i) {
|
||||||
// Blue for progressed segments (RGB 32, 81, 112)
|
// Blue for progressed segments (RGB 32, 81, 112)
|
||||||
line.fill.setSolidColor("#205170");
|
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 {
|
} else {
|
||||||
// Grey for segments not yet progressed (RGB 242, 242, 242)
|
// Grey for segments not yet progressed (RGB 242, 242, 242)
|
||||||
line.fill.setSolidColor("#F2F2F2");
|
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
|
// Remove the border/outline entirely
|
||||||
@@ -181,9 +195,11 @@ export const ProgressBarButtons: React.FC = () => {
|
|||||||
await context.sync();
|
await context.sync();
|
||||||
|
|
||||||
if (removedCount > 0) {
|
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 {
|
} else {
|
||||||
setStatusMessage("No progress bar elements found to remove.");
|
setStatusMessage("No progress bar found to remove.");
|
||||||
}
|
}
|
||||||
setStatusType("success");
|
setStatusType("success");
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user